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

package.json

@@ -11,7 +11,7 @@
     "preview": "vite preview --host",
     "predeploy": "npm run build",
     "deploy": "gh-pages -d dist",
-    "lint:ts": "eslint 'src/**/*.{ts,tsx}'",
+    "lint:ts": "eslint \"src/**/*.{ts,tsx}\"",
     "lint:md": "markdownlint '**/*.md' --ignore-path .prettierignore",
     "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,json,css,md}'",
     "format:file": "prettier --write",

src/constants/Header.ts

@@ -11,12 +11,12 @@ 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/sections/Header.tsx

@@ -81,7 +81,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>
 
@@ -114,9 +114,19 @@ const Header: React.FC = () => {
                 />
               </div>
             </button>
-
-            {/* Desktop Navigation (visible from lg and up) */}
             <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]) => (
@@ -218,6 +228,17 @@ const MobileNavDrawer: React.FC<{
             <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">
@@ -277,6 +298,7 @@ const MobileNavDrawer: React.FC<{
                 )}
 
                 {/* Regular links */}
+
                 {navigationData.links.map((link) => (
                   <Link
                     key={link.label}

src/sections/NavDropdown.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}