julienfroidefond/towercontrol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance Header component with active link styling

Browse Source 
- Added `usePathname` hook to determine the current route.
- Implemented `isActiveLink` and `getLinkClasses` functions for dynamic link styling based on active state.
- Adjusted navigation links in the Header to utilize the new styling functions for improved user experience.
- Updated KanbanPageClient subtitle for consistency.
This commit is contained in:
Julien Froidefond
2025-09-18 12:57:10 +02:00
parent 3c7f5ca2fa
commit cece09d150
2 changed files with 29 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
components/ui/Header.tsx
View File

@@ -1,6 +1,7 @@
import { Card, CardContent } from '@/components/ui/Card';
import { TaskStats } from '@/lib/types';
import { useTheme } from '@/contexts/ThemeContext';
import { usePathname } from 'next/navigation';
import Link from 'next/link';
interface HeaderProps {
@@ -12,6 +13,26 @@ interface HeaderProps {
export function Header({ title = "TowerControl", subtitle = "Task Management", stats, syncing = false }: HeaderProps) {
const { theme, toggleTheme } = useTheme();
const pathname = usePathname();
// Fonction pour déterminer si un lien est actif
const isActiveLink = (href: string) => {
if (href === '/') {
return pathname === '/';
}
return pathname.startsWith(href);
};
// Fonction pour obtenir les classes CSS d'un lien
const getLinkClasses = (href: string) => {
const baseClasses = "font-mono text-sm uppercase tracking-wider transition-colors px-3 py-1.5 rounded-md";
if (isActiveLink(href)) {
return `${baseClasses} text-[var(--primary)] bg-[var(--primary)]/10 border border-[var(--primary)]/30`;
}
return `${baseClasses} text-[var(--muted-foreground)] hover:text-[var(--primary)] hover:bg-[var(--card-hover)]`;
};
return (
<header className="bg-[var(--card)]/80 backdrop-blur-sm border-b border-[var(--border)]/50 shadow-lg shadow-[var(--card)]/20">
@@ -19,7 +40,7 @@ export function Header({ title = "TowerControl", subtitle = "Task Management", s
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-6">
{/* Titre tech avec glow */}
<div className="flex items-center gap-6">
<div className="flex items-center gap-4">
<div className="flex items-center gap-4 w-[300px]">
<div className={`w-3 h-3 rounded-full shadow-lg ${
syncing
? 'bg-yellow-400 animate-spin shadow-yellow-400/50'
@@ -36,34 +57,34 @@ export function Header({ title = "TowerControl", subtitle = "Task Management", s
</div>
{/* Navigation */}
<nav className="hidden sm:flex items-center gap-4">
<nav className="hidden sm:flex items-center gap-2">
<Link
href="/"
className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors font-mono text-sm uppercase tracking-wider"
className={getLinkClasses('/')}
>
Dashboard
</Link>
<Link
href="/kanban"
className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors font-mono text-sm uppercase tracking-wider"
className={getLinkClasses('/kanban')}
>
Kanban
</Link>
<Link
href="/daily"
className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors font-mono text-sm uppercase tracking-wider"
className={getLinkClasses('/daily')}
>
Daily
</Link>
<Link
href="/tags"
className="text-[var(--muted-foreground)] hover:text-[var(--accent)] transition-colors font-mono text-sm uppercase tracking-wider"
className={getLinkClasses('/tags')}
>
Tags
</Link>
<Link
href="/settings"
className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors font-mono text-sm uppercase tracking-wider"
className={getLinkClasses('/settings')}
>
Settings
</Link>