woms 3.0

src/components/Navbar.jsx

@@ -1,49 +1,174 @@
+import { useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 import { useAuth } from '../context/AuthContext'
-import { FaUser } from 'react-icons/fa'
+import { motion } from 'motion/react'
+import { 
+  IconTicket, 
+  IconDeviceDesktop, 
+  IconChartBar, 
+  IconCalendar, 
+  IconFolders, 
+  IconFileText, 
+  IconBook, 
+  IconSettings,
+  IconLogout
+} from '@tabler/icons-react'
+import { Sidebar, SidebarBody, SidebarLink } from './ModernSidebar'
 
 export default function Navbar() {
-  const { user, logout } = useAuth()
+  const { user, logout, isAdmin } = useAuth()
   const navigate = useNavigate()
+  const [open, setOpen] = useState(false)
 
   const handleLogout = async () => {
     await logout()
     navigate('/login')
   }
 
-  return (
-    <nav className="navbar">
-      <div className="navbar-brand">
-        <span>NetWEB</span>
-        <img src="/logo.png" alt="" height="18" width="18" />
-        <span>Systems</span>
-      </div>
-      
-      <ul className="navbar-nav">
-        <li><Link to="/tickets" className="nav-link">Tickets</Link></li>
-        <li><Link to="/assets" className="nav-link">Assets</Link></li>
-        <li><Link to="/dashboard" className="nav-link">Dashboard</Link></li>
-        <li><Link to="/planboard" className="nav-link">Planboard</Link></li>
-        <li><Link to="/projects" className="nav-link">Projects</Link></li>
-        <li><Link to="/reports" className="nav-link">Reports</Link></li>
-        <li><Link to="/docs" className="nav-link">Docs</Link></li>
-      </ul>
+  const links = [
+    {
+      label: 'Tickets',
+      href: '/tickets',
+      icon: <IconTicket className="icon" />,
+    },
+    {
+      label: 'Assets',
+      href: '/assets',
+      icon: <IconDeviceDesktop className="icon" />,
+    },
+    {
+      label: 'Dashboard',
+      href: '/dashboard',
+      icon: <IconChartBar className="icon" />,
+    },
+    {
+      label: 'Planboard',
+      href: '/planboard',
+      icon: <IconCalendar className="icon" />,
+    },
+    {
+      label: 'Projects',
+      href: '/projects',
+      icon: <IconFolders className="icon" />,
+    },
+    {
+      label: 'Reports',
+      href: '/reports',
+      icon: <IconFileText className="icon" />,
+    },
+    {
+      label: 'Docs',
+      href: '/docs',
+      icon: <IconBook className="icon" />,
+    },
+  ]
 
-      <div className="nav-right">
-        {user ? (
-          <button 
-            onClick={handleLogout} 
-            className="nav-link"
-            style={{ background: 'none', border: 'none', cursor: 'pointer' }}
-          >
-            <FaUser /> Logout, {user.name || user.email}
-          </button>
-        ) : (
-          <Link to="/login" className="nav-link">
-            <FaUser /> Login
-          </Link>
-        )}
-      </div>
-    </nav>
+  // Admin link nur wenn isAdmin
+  if (isAdmin) {
+    links.push({
+      label: 'Admin',
+      href: '/admin',
+      icon: <IconSettings className="icon" />,
+    })
+  }
+
+  return (
+    <Sidebar open={open} setOpen={setOpen}>
+      <SidebarBody className="justify-between gap-10">
+        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflowX: 'hidden', overflowY: 'auto' }}>
+          <Logo />
+          <div style={{ marginTop: '2rem', display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+            {links.map((link, idx) => (
+              <SidebarLink key={idx} link={link} />
+            ))}
+          </div>
+        </div>
+        <div>
+          {user ? (
+            <>
+              <SidebarLink
+                link={{
+                  label: user.name || user.email,
+                  href: '#',
+                  icon: (
+                    <div style={{
+                      height: '28px',
+                      width: '28px',
+                      borderRadius: '50%',
+                      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      color: 'white',
+                      fontSize: '12px',
+                      fontWeight: 'bold',
+                      flexShrink: 0
+                    }}>
+                      {(user.name || user.email).charAt(0).toUpperCase()}
+                    </div>
+                  ),
+                }}
+              />
+              <div onClick={handleLogout} style={{ cursor: 'pointer', marginTop: '0.5rem' }}>
+                <SidebarLink
+                  link={{
+                    label: 'Logout',
+                    href: '#',
+                    icon: <IconLogout className="icon" />,
+                  }}
+                />
+              </div>
+            </>
+          ) : (
+            <SidebarLink
+              link={{
+                label: 'Login',
+                href: '/login',
+                icon: <IconLogout className="icon" />,
+              }}
+            />
+          )}
+        </div>
+      </SidebarBody>
+    </Sidebar>
+  )
+}
+
+const Logo = () => {
+  return (
+    <Link
+      to="/"
+      style={{
+        position: 'relative',
+        zIndex: 20,
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.5rem',
+        padding: '0.25rem 0',
+        fontSize: '0.875rem',
+        fontWeight: 'normal',
+        color: 'var(--text-color, #333)',
+        textDecoration: 'none'
+      }}
+    >
+      <div style={{
+        height: '20px',
+        width: '24px',
+        flexShrink: 0,
+        borderRadius: '4px 2px 4px 2px',
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
+      }} />
+      <motion.span
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        style={{
+          fontWeight: 500,
+          whiteSpace: 'pre',
+          color: 'var(--text-color, #333)'
+        }}
+      >
+        Webklar
+      </motion.span>
+    </Link>
   )
 }