mobile nav implemented

dark mode need rifinements

frontend/src/components/layout/Header.tsx

@@ -1,44 +1,71 @@
 
+import { useState } from 'react';
 import { Link } from '@tanstack/react-router';
 import { useAuth } from '../../contexts/AuthContext';
 import { Button } from '../ui/button';
+import { ThemeToggle } from './ThemeToggle';
+import { Menu, X } from 'lucide-react';
 
 export function Header() {
   const { user, logout, isAuthenticated, hasRole } = useAuth();
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+  const toggleMobileMenu = () => {
+    setIsMobileMenuOpen(!isMobileMenuOpen);
+  };
+
+  const closeMobileMenu = () => {
+    setIsMobileMenuOpen(false);
+  };
+
+  const navLinks = [
+    { to: '/', label: 'Home' },
+    { to: '/articles', label: 'Articles' },
+    { to: '/live-blogs', label: 'Live' },
+  ];
+
+  const adminLinks = [
+    { to: '/admin', label: 'Admin' },
+    { to: '/admin/live-blogs/create', label: '+ New Live Blog' },
+  ];
 
   return (
-    <header className="border-b">
+    <header className="border-b sticky top-0 z-50 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
       <div className="container mx-auto max-w-6xl px-4 py-4">
         <div className="flex items-center justify-between">
-          <h1 className="text-3xl font-bold">
+          <h1 className="text-2xl md:text-3xl font-bold">
             <Link to="/" className="hover:underline">Placebo.mk</Link>
           </h1>
           
-          <nav className="flex items-center gap-4">
+          {/* Desktop Navigation */}
-            <Link to="/" className="text-sm font-medium hover:underline">
+          <nav className="hidden md:flex items-center gap-4">
-              Home
+            {navLinks.map((link) => (
-            </Link>
+              <Link
-            <Link to="/articles" className="text-sm font-medium hover:underline">
+                key={link.to}
-              Articles
+                to={link.to}
-            </Link>
+                className="text-sm font-medium hover:underline transition-colors"
-            <Link to="/live-blogs" className="text-sm font-medium hover:underline">
+              >
-              Live
+                {link.label}
               </Link>
+            ))}
             
             {isAuthenticated ? (
               <>
                 {(hasRole('admin') || hasRole('contributor')) && (
                   <>
-                    <Link to="/admin" className="text-sm font-medium hover:underline text-primary">
+                    {adminLinks.map((link) => (
-                      Admin
+                      <Link
-                    </Link>
+                        key={link.to}
-                    <Link to="/admin/live-blogs/create" className="text-sm font-medium hover:underline text-primary">
+                        to={link.to}
-                      + New Live Blog
+                        className="text-sm font-medium hover:underline text-primary transition-colors"
+                      >
+                        {link.label}
                       </Link>
+                    ))}
                   </>
                 )}
                 
-                <div className="flex items-center gap-2">
+                <div className="flex items-center gap-2 ml-2">
                   <span className="text-sm text-muted-foreground">
                     {user?.username}
                   </span>
@@ -53,13 +80,98 @@ export function Header() {
                 </div>
               </>
             ) : (
-              <Link to="/auth" className="text-sm font-medium hover:underline text-primary">
+              <Link to="/auth" className="text-sm font-medium hover:underline text-primary transition-colors">
                 Login / Register
               </Link>
             )}
+            
+            <ThemeToggle />
           </nav>
+
+          {/* Mobile Menu Button */}
+          <div className="flex items-center gap-2 md:hidden">
+            <ThemeToggle />
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={toggleMobileMenu}
+              className="h-9 w-9"
+              aria-label={isMobileMenuOpen ? 'Close menu' : 'Open menu'}
+            >
+              {isMobileMenuOpen ? (
+                <X className="h-5 w-5" />
+              ) : (
+                <Menu className="h-5 w-5" />
+              )}
+            </Button>
           </div>
         </div>
+
+        {/* Mobile Navigation */}
+        {isMobileMenuOpen && (
+          <div className="md:hidden mt-4 pb-4 border-t pt-4 animate-in slide-in-from-top-2">
+            <div className="flex flex-col gap-3">
+              {navLinks.map((link) => (
+                <Link
+                  key={link.to}
+                  to={link.to}
+                  className="text-sm font-medium hover:underline py-2 transition-colors"
+                  onClick={closeMobileMenu}
+                >
+                  {link.label}
+                </Link>
+              ))}
+              
+              {isAuthenticated ? (
+                <>
+                  {(hasRole('admin') || hasRole('contributor')) && (
+                    <div className="border-t pt-3 mt-2">
+                      <p className="text-xs text-muted-foreground mb-2">Admin</p>
+                      {adminLinks.map((link) => (
+                        <Link
+                          key={link.to}
+                          to={link.to}
+                          className="text-sm font-medium hover:underline text-primary py-2 block transition-colors"
+                          onClick={closeMobileMenu}
+                        >
+                          {link.label}
+                        </Link>
+                      ))}
+                    </div>
+                  )}
+                  
+                  <div className="border-t pt-3 mt-2">
+                    <div className="flex items-center justify-between">
+                      <span className="text-sm text-muted-foreground">
+                        Logged in as: {user?.username}
+                      </span>
+                      <Button 
+                        variant="outline" 
+                        size="sm"
+                        onClick={() => {
+                          logout();
+                          closeMobileMenu();
+                        }}
+                        className="text-xs"
+                      >
+                        Logout
+                      </Button>
+                    </div>
+                  </div>
+                </>
+              ) : (
+                <Link 
+                  to="/auth" 
+                  className="text-sm font-medium hover:underline text-primary py-2 transition-colors"
+                  onClick={closeMobileMenu}
+                >
+                  Login / Register
+                </Link>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
     </header>
   );
 }

frontend/src/components/layout/ThemeToggle.tsx

@@ -0,0 +1,38 @@
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Sun, Moon } from 'lucide-react';
+import { getInitialTheme, toggleTheme, watchSystemTheme } from '@/lib/theme';
+
+export function ThemeToggle() {
+  const [theme, setTheme] = useState<'light' | 'dark'>(getInitialTheme);
+
+  useEffect(() => {
+    // Watch for system theme changes
+    const cleanup = watchSystemTheme((newTheme) => {
+      setTheme(newTheme);
+    });
+    
+    return cleanup;
+  }, []);
+
+  const handleToggle = () => {
+    const newTheme = toggleTheme();
+    setTheme(newTheme);
+  };
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={handleToggle}
+      className="h-9 w-9"
+      aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
+    >
+      {theme === 'light' ? (
+        <Moon className="h-4 w-4" />
+      ) : (
+        <Sun className="h-4 w-4" />
+      )}
+    </Button>
+  );
+}

frontend/src/lib/theme.ts

@@ -0,0 +1,79 @@
+/**
+ * Theme utilities for dark/light mode
+ */
+
+export type Theme = 'light' | 'dark';
+
+/**
+ * Get the current theme from localStorage or system preference
+ */
+export function getInitialTheme(): Theme {
+  // Check localStorage first
+  const savedTheme = localStorage.getItem('theme') as Theme;
+  if (savedTheme) {
+    return savedTheme;
+  }
+  
+  // Check system preference
+  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    return 'dark';
+  }
+  
+  // Default to light
+  return 'light';
+}
+
+/**
+ * Apply theme to document
+ */
+export function applyTheme(theme: Theme): void {
+  const root = document.documentElement;
+  
+  if (theme === 'dark') {
+    root.classList.add('dark');
+  } else {
+    root.classList.remove('dark');
+  }
+  
+  // Save to localStorage
+  localStorage.setItem('theme', theme);
+}
+
+/**
+ * Initialize theme on page load
+ */
+export function initializeTheme(): void {
+  const theme = getInitialTheme();
+  applyTheme(theme);
+}
+
+/**
+ * Toggle between light and dark themes
+ */
+export function toggleTheme(): Theme {
+  const currentTheme = getInitialTheme();
+  const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+  applyTheme(newTheme);
+  return newTheme;
+}
+
+/**
+ * Listen for system theme changes
+ */
+export function watchSystemTheme(callback: (theme: Theme) => void): () => void {
+  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+  
+  const handleChange = (e: MediaQueryListEvent) => {
+    // Only update if user hasn't set a preference in localStorage
+    if (!localStorage.getItem('theme')) {
+      const theme = e.matches ? 'dark' : 'light';
+      callback(theme);
+      applyTheme(theme);
+    }
+  };
+  
+  mediaQuery.addEventListener('change', handleChange);
+  
+  // Return cleanup function
+  return () => mediaQuery.removeEventListener('change', handleChange);
+}

frontend/src/main.tsx

@@ -4,6 +4,10 @@ import { RouterProvider } from '@tanstack/react-router'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { router } from './routes'
 import { AuthProvider } from './contexts/AuthContext'
+import { initializeTheme } from './lib/theme'
+
+// Initialize theme before rendering
+initializeTheme();
 
 const queryClient = new QueryClient()