From 035aa7b3d75945226d20e643dc54184aa2838a16 Mon Sep 17 00:00:00 2001
From: david <njorogedavid13@gmail.com>
Date: Sun, 15 Mar 2026 18:45:27 +0300
Subject: [PATCH] style frontend components

---
 frontend/src/App.tsx                        | 25 ++++++-
 frontend/src/components/Navbar.tsx          | 82 +++++++++++++++++++--
 frontend/src/components/icons/CloseIcon.tsx | 18 +++++
 frontend/src/components/icons/MenuIcon.tsx  | 19 +++++
 frontend/src/hooks/useAuth.ts               |  2 -
 frontend/src/pages/Home.tsx                 |  2 +-
 6 files changed, 138 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/components/icons/CloseIcon.tsx
 create mode 100644 frontend/src/components/icons/MenuIcon.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4bfe05f..faf9ae7 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,4 +1,6 @@
 import { Routes, Route, Navigate } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { useApp } from './context/AppContext';
 import { ModalProvider } from './context/modals/useModal';
 import { ModalRoot } from './context/modals/ModalRoot';
 import { ToastProvider } from './context/toasts/useToast';
@@ -17,15 +19,34 @@ import { BoardDetail } from './pages/BoardDetail';
 import { CardDetail } from './pages/CardDetail';
 
 const App = () => {
+  const { token } = useApp();
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    setIsAuthenticated(!!token);
+  }, [token]);
+
+  if (isAuthenticated === null) {
+    return null;
+  }
   return (
     <LoaderProvider>
       <ToastProvider>
         <ModalProvider>
           <div className="min-h-screen bg-gray-900 text-gray-100">
             <Navbar />
-            <main className="flex-1 p-8 max-w-7xl mx-auto w-full">
+            <main className="flex-1 p-8 mx-auto w-full max-w-7xl">
               <Routes>
-                <Route path="/" element={<Navigate to="/boards" replace />} />
+                <Route
+                  path="/"
+                  element={
+                    isAuthenticated ? (
+                      <Navigate to="/boards" replace />
+                    ) : (
+                      <Navigate to="/home" replace />
+                    )
+                  }
+                />
                 <Route path="/home" element={<Home />} />
                 <Route path="/login" element={<Login />} />
                 <Route path="/register" element={<Register />} />
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index ca3cab1..942b937 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -1,27 +1,31 @@
 import { Link } from 'react-router-dom';
+import { useState } from 'react';
 import { useApp } from '../context/AppContext';
 import { useAuth } from '../hooks/useAuth';
 import { TaskboardLogo } from './TaskboardLogo';
+import MenuIcon from './icons/MenuIcon';
+import CloseIcon from './icons/CloseIcon';
 
 export function Navbar() {
   const { user } = useApp();
   const { logout } = useAuth();
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   return (
     <nav className="bg-gray-800 border-b border-gray-700 shadow-md">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex items-center justify-between h-16">
-          <div className="flex items-center gap-3">
-            <Link to="/boards" className="hover:opacity-80 transition-opacity">
+          <div className="flex items-center">
+            <Link to="/boards" className="hover:opacity-80 transition-opacity flex-shrink-0">
               <TaskboardLogo className="h-8 w-auto" />
             </Link>
             <Link
               to="/boards"
-              className="text-xl font-bold text-white hover:text-blue-400 transition-colors"
+              className="text-xl font-bold text-white hover:text-blue-400 transition-colors ml-2"
             >
               Taskboard
             </Link>
-            <div className="ml-10 flex items-baseline space-x-4">
+            <div className="hidden md:flex items-baseline ml-10 space-x-4">
               <Link
                 to="/home"
                 className="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
@@ -39,7 +43,7 @@ export function Navbar() {
               )}
             </div>
           </div>
-          <div className="flex items-center gap-3">
+          <div className="hidden md:flex items-center gap-3">
             {user ? (
               <>
                 <span className="text-gray-300 px-3 py-2">{user.username}</span>
@@ -67,8 +71,76 @@ export function Navbar() {
               </>
             )}
           </div>
+          <div className="md:hidden flex items-center">
+            <button
+              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+              className="text-gray-300 hover:text-white p-2 rounded-md"
+              aria-label="Toggle menu"
+            >
+              {mobileMenuOpen ? <CloseIcon /> : <MenuIcon />}
+            </button>
+          </div>
         </div>
       </div>
+
+      {/* Mobile menu */}
+      {mobileMenuOpen && (
+        <div className="md:hidden bg-gray-800 border-t border-gray-700">
+          <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
+            <Link
+              to="/home"
+              className="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              Home
+            </Link>
+
+            {user && (
+              <Link
+                to="/boards"
+                className="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
+                onClick={() => setMobileMenuOpen(false)}
+              >
+                Boards
+              </Link>
+            )}
+
+            <div className="border-t border-gray-700 my-2"></div>
+
+            {user ? (
+              <>
+                <div className="px-3 py-2 text-gray-300 text-base font-medium">{user.username}</div>
+                <button
+                  onClick={() => {
+                    logout();
+                    setMobileMenuOpen(false);
+                  }}
+                  className="text-gray-300 hover:text-white block w-full text-left px-3 py-2 rounded-md text-base font-medium"
+                >
+                  Logout
+                </button>
+              </>
+            ) : (
+              <>
+                <Link
+                  to="/login"
+                  className="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
+                  onClick={() => setMobileMenuOpen(false)}
+                >
+                  Login
+                </Link>
+                <Link
+                  to="/register"
+                  className="bg-blue-600 hover:bg-blue-700 text-white block px-3 py-2 rounded-md text-base font-medium"
+                  onClick={() => setMobileMenuOpen(false)}
+                >
+                  Register
+                </Link>
+              </>
+            )}
+          </div>
+        </div>
+      )}
     </nav>
   );
 }
diff --git a/frontend/src/components/icons/CloseIcon.tsx b/frontend/src/components/icons/CloseIcon.tsx
new file mode 100644
index 0000000..9e69f38
--- /dev/null
+++ b/frontend/src/components/icons/CloseIcon.tsx
@@ -0,0 +1,18 @@
+const CloseIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <line x1="18" y1="6" x2="6" y2="18"></line>
+    <line x1="6" y1="6" x2="18" y2="18"></line>
+  </svg>
+);
+
+export default CloseIcon;
diff --git a/frontend/src/components/icons/MenuIcon.tsx b/frontend/src/components/icons/MenuIcon.tsx
new file mode 100644
index 0000000..630747b
--- /dev/null
+++ b/frontend/src/components/icons/MenuIcon.tsx
@@ -0,0 +1,19 @@
+const MenuIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <line x1="3" y1="12" x2="21" y2="12"></line>
+    <line x1="3" y1="6" x2="21" y2="6"></line>
+    <line x1="3" y1="18" x2="21" y2="18"></line>
+  </svg>
+);
+
+export default MenuIcon;
diff --git a/frontend/src/hooks/useAuth.ts b/frontend/src/hooks/useAuth.ts
index 3360625..acdcc07 100644
--- a/frontend/src/hooks/useAuth.ts
+++ b/frontend/src/hooks/useAuth.ts
@@ -45,7 +45,6 @@ export function useAuth() {
     } catch (err: any) {
       const errorMessage =
         err.response?.data.error || err.message || 'Login failed. Please try again.';
-      // debugger
       // Show error toast
       addNotification({
         type: 'error',
@@ -76,7 +75,6 @@ export function useAuth() {
       };
 
       // Store in localStorage first
-      // debugger
       localStorage.setItem('token', response.access_token);
       localStorage.setItem('user', JSON.stringify(user));
 
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index 506502f..f769012 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -6,7 +6,7 @@ import { TaskboardLogo } from '../components/TaskboardLogo';
 
 export function Home() {
   return (
-    <div className="space-y-12">
+    <div className="space-y-12 flex-1 p-8 max-w-7xl mx-auto w-full">
       <div className="text-center py-12">
         <div className="flex justify-center mb-6">
           <TaskboardLogo className="h-16 w-auto" />