From 65c190cf5487aa380f3f96f2f29371c8eb7f09c0 Mon Sep 17 00:00:00 2001
From: John Schmidt <jschmidt901318@gmail.com>
Date: Sun, 22 Mar 2026 15:21:09 -0500
Subject: [PATCH] feat: enhance Navbar component with theme toggle and improved
 mobile menu

---
 Application/components/navbar.tsx | 93 +++++++++++++++++++++++--------
 1 file changed, 69 insertions(+), 24 deletions(-)

diff --git a/Application/components/navbar.tsx b/Application/components/navbar.tsx
index 35903a3..754c02a 100644
--- a/Application/components/navbar.tsx
+++ b/Application/components/navbar.tsx
@@ -1,38 +1,76 @@
 "use client";
 
-import { Box, Flex, Text, IconButton, Stack, HStack } from "@chakra-ui/react";
-import { useState } from "react"; // Use standard React state
+import {
+  Box,
+  Flex,
+  Text,
+  IconButton,
+  Stack,
+  HStack,
+
+} from "@chakra-ui/react";
+import { useState, useEffect } from "react";
 import Link from "next/link";
-import { HiMenu, HiX } from "react-icons/hi";
+import { HiMenu, HiX, HiMoon, HiSun } from "react-icons/hi";
+import { useColorMode } from "@/components/ui/color-mode";
 
 export default function Navbar() {
   const [isOpen, setIsOpen] = useState(false);
+  const { colorMode, toggleColorMode } = useColorMode();
+  const [mounted, setMounted] = useState(false);
+
+  // Prevent hydration mismatch by waiting for mount
+  useEffect(() => setMounted(true), []);
 
   return (
-    <Box as="nav" bg="blue.900" color="white" borderBottom="1px solid" borderColor="whiteAlpha.200">
+    <Box
+      as="nav"
+      // Using semantic bg for light/dark support, fallback to blue.900
+      bg="blue.900"
+      color="white"
+      borderBottom="1px solid"
+      borderColor="whiteAlpha.200"
+      position="sticky"
+      top={0}
+      zIndex="docked"
+    >
       <Flex h={16} px={8} alignItems="center" justifyContent="space-between">
         <Text fontSize="xl" fontWeight="bold">Coding United</Text>
 
-        {/* Hamburger Icon */}
-        <IconButton 
-          display={{ base: "flex", md: "none" }} 
-          onClick={() => setIsOpen(!isOpen)}
-          variant="solid"
-          aria-label="Toggle Menu"
-        >
-          {isOpen ? <HiX /> : <HiMenu />}
-        </IconButton>
-
-        {/* Desktop Links */}
-        <HStack gap={8} display={{ base: "none", md: "flex" }}>
-          <NavLink href="/">Home</NavLink>
-          <NavLink href="/about">About Us</NavLink>
-          <NavLink href="/faq">FAQ</NavLink>
-          <NavLink href="/contact">Contact</NavLink>
+        <HStack gap={4}>
+          {/* Desktop Links */}
+          <HStack gap={8} display={{ base: "none", md: "flex" }}>
+            <NavLink href="/">Home</NavLink>
+            <NavLink href="/about">About Us</NavLink>
+            <NavLink href="/faq">FAQ</NavLink>
+            <NavLink href="/contact">Contact</NavLink>
+          </HStack>
+
+          {/* Theme Toggle Button */}
+          {mounted && (
+            <IconButton
+              variant="ghost"
+              aria-label="Toggle color mode"
+              onClick={toggleColorMode}
+              color="current"
+            >
+              {colorMode === "light" ? <HiMoon /> : <HiSun />}
+            </IconButton>
+          )}
+
+          {/* Hamburger Icon */}
+          <IconButton
+            display={{ base: "flex", md: "none" }}
+            onClick={() => setIsOpen(!isOpen)}
+            variant="outline"
+            aria-label="Toggle Menu"
+          >
+            {isOpen ? <HiX /> : <HiMenu />}
+          </IconButton>
         </HStack>
       </Flex>
 
-      {/* Manual Mobile Menu (No snippets required) */}
+      {/* Mobile Menu */}
       {isOpen && (
         <Box display={{ md: "none" }} pb={4} px={8}>
           <Stack gap={4}>
@@ -47,9 +85,16 @@ export default function Navbar() {
   );
 }
 
-// Simple NavLink to avoid scope errors
 const NavLink = ({ href, children }: { href: string; children: React.ReactNode }) => (
-  <Link href={href} passHref>
-    <Text _hover={{ color: "blue.400" }} py={2}>{children}</Text>
+  <Link href={href} passHref legacyBehavior>
+    <Text
+      as="a"
+      cursor="pointer"
+      _hover={{ color: "blue.400" }}
+      fontWeight="medium"
+      py={2}
+    >
+      {children}
+    </Text>
   </Link>
 );
\ No newline at end of file