upload all

2025-11-20 13:29:13 +01:00
parent daea26583b
commit c0e2df2430
35 changed files with 10016 additions and 0 deletions
--- a/frontend/src/components/Sidebar.jsx
+++ b/frontend/src/components/Sidebar.jsx
@@ -0,0 +1,98 @@
+import { Link, useLocation } from 'react-router-dom'
+
+const Sidebar = ({ isOpen, setIsOpen }) => {
+  const location = useLocation()
+
+  const menuItems = [
+    { path: '/', label: 'Home', icon: '🏠' },
+    { path: '/spaces', label: 'Spaces', icon: '📁' },
+    { path: '/impressum', label: 'Impressum', icon: 'ℹ️' },
+  ]
+
+  const isActive = (path) => {
+    if (path === '/') {
+      return location.pathname === '/'
+    }
+    return location.pathname.startsWith(path)
+  }
+
+  return (
+    <>
+      {/* Overlay for mobile */}
+      {isOpen && (
+        <div
+          className="fixed inset-0 bg-black/60 backdrop-blur-sm z-40 lg:hidden transition-opacity duration-300"
+          onClick={() => setIsOpen(false)}
+        />
+      )}
+
+      {/* Sidebar */}
+      <aside
+        className={`fixed lg:static top-0 left-0 h-full z-40 transform transition-all duration-300 ease-in-out bg-slate-800/95 backdrop-blur-sm border-r border-slate-600/50 shadow-xl ${
+          isOpen ? 'w-64 translate-x-0' : 'w-16 -translate-x-0 lg:translate-x-0'
+        }`}
+      >
+        <div className="p-4 border-b border-slate-700/50 flex items-center justify-between h-16">
+          {isOpen && (
+            <h1 className="text-xl font-bold text-white whitespace-nowrap overflow-hidden">
+              Certigo Addon
+            </h1>
+          )}
+          {/* Burger Menu Button - rechts in der Sidebar */}
+          <button
+            onClick={() => setIsOpen(!isOpen)}
+            className="ml-auto p-2 rounded-lg transition-all duration-200 flex-shrink-0 bg-slate-700/50 hover:bg-slate-700 text-white"
+            aria-label="Toggle menu"
+          >
+            <div className="w-5 h-4 relative flex flex-col justify-between">
+              <span
+                className={`block h-0.5 w-full bg-white rounded-full transition-all duration-300 ${
+                  isOpen ? 'rotate-45 translate-y-1.5' : ''
+                }`}
+              />
+              <span
+                className={`block h-0.5 w-full bg-white rounded-full transition-all duration-300 ${
+                  isOpen ? 'opacity-0' : 'opacity-100'
+                }`}
+              />
+              <span
+                className={`block h-0.5 w-full bg-white rounded-full transition-all duration-300 ${
+                  isOpen ? '-rotate-45 -translate-y-1.5' : ''
+                }`}
+              />
+            </div>
+          </button>
+        </div>
+        <nav className="px-2 py-4 overflow-hidden">
+          <ul className="space-y-2">
+            {menuItems.map((item) => (
+              <li key={item.path}>
+                <Link
+                  to={item.path}
+                  className={`flex items-center px-3 py-3 rounded-lg transition-all duration-200 ${
+                    isActive(item.path)
+                      ? 'bg-slate-700 text-white font-semibold shadow-md'
+                      : 'text-slate-300 hover:bg-slate-700/50 hover:text-white'
+                  }`}
+                  title={!isOpen ? item.label : ''}
+                >
+                  <span className={`text-xl flex-shrink-0 ${isOpen ? 'mr-3' : 'mx-auto'}`}>
+                    {item.icon}
+                  </span>
+                  {isOpen && (
+                    <span className="whitespace-nowrap overflow-hidden">
+                      {item.label}
+                    </span>
+                  )}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      </aside>
+    </>
+  )
+}
+
+export default Sidebar
+