fix(navbar): improper border color, alignment and layout issues

Author: nios-x

package-lock.json

@@ -11,12 +11,14 @@ export const navigationData = {
       ],
     },
   },
-
   links: [
     { label: 'News', path: '/news' },
     { label: 'Merchandise', path: '/products' },
     { label: 'Donate', path: '/donate' },
     { label: 'Join Development', path: '/join-development' },
     { label: 'Volunteer', path: '/volunteer' },
   ],
+  linksBefore:[
+    { label: 'Home', path: '/' },
+  ], 
 };

src/constants/Header.ts

@@ -64,11 +64,10 @@ const Header: React.FC = () => {
   return (
     <>
       <header
-        className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
-          isScrolled
+        className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${isScrolled
             ? 'backdrop-blur-md bg-white/90 dark:bg-gray-900/80 shadow-lg'
             : 'bg-white dark:bg-gray-900'
-        }`}
+          }`}
       >
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between items-center h-16 md:h-20">
@@ -81,7 +80,7 @@ const Header: React.FC = () => {
               <img
                 src={logo}
                 alt="Sugar Labs"
-                className="h-8 md:h-12 w-auto transition-transform hover:scale-105"
+                className="h-8 md:h-12 w-auto transition-transform"
               />
             </Link>
 
@@ -94,29 +93,39 @@ const Header: React.FC = () => {
             >
               <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                 <span
-                  className={`block w-6 h-0.5 bg-gray-600 dark:bg-gray-200 transition-all duration-300 ${
-                    isMobileMenuOpen
+                  className={`block w-6 h-0.5 bg-gray-600 dark:bg-gray-200 transition-all duration-300 ${isMobileMenuOpen
                       ? 'rotate-45 translate-y-1.5'
                       : 'translate-y-[-4px]'
-                  }`}
+                    }`}
                 />
                 <span
-                  className={`block w-6 h-0.5 bg-gray-600 dark:bg-gray-200 transition-all duration-300 mt-1 ${
-                    isMobileMenuOpen ? 'opacity-0' : ''
-                  }`}
+                  className={`block w-6 h-0.5 bg-gray-600 dark:bg-gray-200 transition-all duration-300 mt-1 ${isMobileMenuOpen ? 'opacity-0' : ''
+                    }`}
                 />
                 <span
-                  className={`block w-6 h-0.5 bg-gray-600 dark:bg-gray-200 transition-all duration-300 mt-1 ${
-                    isMobileMenuOpen
+                  className={`block w-6 h-0.5 bg-gray-600 dark:bg-gray-200 transition-all duration-300 mt-1 ${isMobileMenuOpen
                       ? '-rotate-45 -translate-y-1.5'
                       : 'translate-y-[4px]'
-                  }`}
+                    }`}
                 />
               </div>
             </button>
 
-            {/* Desktop Navigation (visible from lg and up) */}
+
+            {/* Regular links */}
             <nav className="hidden lg:flex lg:items-center lg:space-x-4">
+              {navigationData.linksBefore.map((link) => (
+                <Link
+                  key={link.label}
+                  to={link.path}
+                  className="px-2 lg:px-2 py-2 text-gray-700 dark:text-gray-200 hover:text-blue-600 font-medium rounded-md
+                            transition-all duration-200 hover:bg-gray-50 dark:hover:bg-gray-800 text-sm lg:text-sm whitespace-nowrap"
+                  onClick={handleNavigation}
+                >
+                  {link.label}
+                </Link>
+              ))}
+              {/* Desktop Navigation (visible from lg and up) */}
               {/* Dropdown menus */}
               {Object.entries(navigationData.dropdowns).map(
                 ([key, dropdown]) => (
@@ -145,7 +154,7 @@ const Header: React.FC = () => {
                 </Link>
               ))}
 
-              <div className="flex items-center gap-3">
+              <div className="flex items-center lg:ml-13 gap-3">
                 <DarkModeToggle />
 
                 {/* CTA Button (slightly reduced padding at lg so it fits tighter layouts) */}
@@ -210,14 +219,27 @@ const MobileNavDrawer: React.FC<{
           transition={{ type: 'tween', duration: 0.3 }}
           className="fixed lg:hidden top-0 right-0 bottom-0 w-[80%] max-w-sm bg-white dark:bg-gray-900 shadow-xl z-40 flex flex-col h-full"
         >
+
           <div className="flex flex-col h-full">
             {/* Space to avoid overlay with main header */}
             <div className="h-16" />
 
             {/* Scrollable content area */}
             <div className="flex-1 overflow-y-auto py-2">
+
               <div className="space-y-4">
                 {/* Dropdown menus */}
+                {navigationData.linksBefore.map((link) => (
+                  <Link
+                    key={link.label}
+                    to={link.path}
+                    onClick={onClose}
+                    className="block px-4 py-2 text-gray-700 dark:text-gray-200 font-medium  rounded-lg
+                            hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-blue-600"
+                  >
+                    {link.label}
+                  </Link>
+                ))}
                 {Object.entries(navigationData.dropdowns).map(
                   ([key, dropdown]) => (
                     <div key={key} className="space-y-1 px-2">
@@ -231,9 +253,8 @@ const MobileNavDrawer: React.FC<{
                       >
                         <span>{dropdown.label}</span>
                         <svg
-                          className={`w-5 h-5 transition-transform duration-200 ${
-                            activeDropdown === key ? 'rotate-180' : ''
-                          }`}
+                          className={`w-5 h-5 transition-transform duration-200 ${activeDropdown === key ? 'rotate-180' : ''
+                            }`}
                           fill="none"
                           viewBox="0 0 24 24"
                           stroke="currentColor"
@@ -282,7 +303,7 @@ const MobileNavDrawer: React.FC<{
                     key={link.label}
                     to={link.path}
                     onClick={onClose}
-                    className="block px-4 py-2 text-gray-700 dark:text-gray-200 font-medium rounded-lg
+                    className="block px-4 py-2 text-gray-700 dark:text-gray-200 font-medium  rounded-lg
                             hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-blue-600"
                   >
                     {link.label}

src/sections/Header.tsx

@@ -26,7 +26,7 @@ const NavDropdown: React.FC<NavDropdownProps> = ({
       onMouseLeave={() => setActive(null)}
     >
       <button
-        className={`px-2 lg:px-3 py-2 text-gray-700 dark:text-gray-200 hover:text-blue-600 font-medium rounded-md
+        className={`px-2 lg:px-3 py-2 text-sm lg:text-sm   text-gray-700 dark:text-gray-200 hover:text-blue-600 font-medium rounded-md cursor-pointer
                   transition-all duration-200 hover:bg-gray-50 dark:hover:bg-gray-800 flex items-center space-x-1
                   ${isActive ? 'text-blue-600 dark:text-blue-400' : ''}`}
         aria-expanded={isActive}
@@ -54,7 +54,7 @@ const NavDropdown: React.FC<NavDropdownProps> = ({
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: 10 }}
             transition={{ duration: 0.2 }}
-            className="absolute left-0 mt-[0.074rem] w-56 rounded-xl bg-white dark:bg-gray-800 shadow-xl ring-1 ring-black dark:ring-white ring-opacity-5 dark:ring-opacity-10 overflow-hidden"
+            className="absolute left-0 mt-[0.779rem] w-56 rounded-xl bg-white dark:bg-gray-800 shadow-xl ring-1 ring-zinc-300/50 dark:ring-white/20 ring-opacity-5  overflow-hidden"
           >
             <div className="py-2">
               {items.map((item) => (
@@ -66,7 +66,7 @@ const NavDropdown: React.FC<NavDropdownProps> = ({
                           transition-all duration-200 hover:text-blue-600 dark:hover:text-blue-400"
                 >
                   <span
-                    className="w-2 h-2 rounded-full bg-blue-600 opacity-0 group-hover:opacity-100
+                    className="w-2 h-2  rounded-full bg-blue-600 opacity-0 group-hover:opacity-100
                               transition-all duration-200 mr-2 transform scale-0 group-hover:scale-100"
                   />
                   {item.label}