-
-
-
- `flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors ${
- isActive ? 'bg-gray-900 text-white font-medium' : 'text-gray-600 hover:bg-gray-100'
+ `relative flex items-center gap-2.5 px-3 py-2 rounded-lg text-[13px] transition-all duration-150 ${
+ isActive
+ ? 'bg-white/12 text-white font-semibold'
+ : 'text-white/60 hover:bg-white/5 hover:text-white/85'
}`
}
>
- {children}
+ {({ isActive }) => (
+ <>
+ {isActive && (
+
+ )}
+ {icon}
+ {children}
+
+ )}
);
}
@@ -22,6 +94,7 @@ function NavItem({ to, children, onClick }) {
export default function Sidebar({ open, onClose }) {
const { user, logout } = useAuth();
const { project, userRole } = useProject();
+ const { dark, toggle } = useTheme();
const { projectId } = useParams();
const navigate = useNavigate();
const location = useLocation();
@@ -35,18 +108,42 @@ export default function Sidebar({ open, onClose }) {
navigate('/login');
};
+ const initials = user?.fullName
+ ? user.fullName.split(' ').map((n) => n[0]).slice(0, 2).join('')
+ : '?';
+
return (
-
Chuva Bot
-Task Management
+
+ {/* Decorative grid */}
+
+
+
);
diff --git a/MtdrSpring/backend/src/main/frontend/src/components/Layout/Sidebar.jsx b/MtdrSpring/backend/src/main/frontend/src/components/Layout/Sidebar.jsx
index 871287fae..f02f8c25d 100644
--- a/MtdrSpring/backend/src/main/frontend/src/components/Layout/Sidebar.jsx
+++ b/MtdrSpring/backend/src/main/frontend/src/components/Layout/Sidebar.jsx
@@ -2,19 +2,91 @@ import React, { useEffect } from 'react';
import { NavLink, useParams, useNavigate, useLocation } from 'react-router-dom';
import { useAuth } from '../../context/AuthContext';
import { useProject } from '../../context/ProjectContext';
+import { useTheme } from '../../context/ThemeContext';
+import KairoMark from '../common/KairoMark';
-function NavItem({ to, children, onClick }) {
+const SunIcon = () => (
+
+);
+
+const MoonIcon = () => (
+
+);
+
+const Icons = {
+ grid: (
+
+ ),
+ user: (
+
+ ),
+ tasks: (
+
+ ),
+ sprint: (
+
+ ),
+ backlog: (
+
+ ),
+ members: (
+
+ ),
+ dashboard: (
+
+ ),
+ logout: (
+
+ ),
+ star: (
+
+ ),
+};
+
+function NavItem({ to, icon, children, onClick }) {
return (
+ {/* Brand lockup */}
+
+ 
{ e.target.style.display = 'none'; }}
+ />
+
+
+ {/* Card */}
+ { e.target.style.display = 'none'; }}
+ />
+
+ {/* Top accent bar */}
+
+
+
-
+ {/* Logo */}
+
+
+
+
+
+
+ Kairo
+
+
+ TEConecta
+
+