add navigation to home for mobile

components/Header.tsx

@@ -26,15 +26,17 @@ const Header = () => {
       </div>
       <div className="flex items-center text-base leading-5">
         <div className="hidden sm:block">
-          {headerNavLinks.map((link) => (
-            <Link
-              key={link.title}
-              href={link.href}
-              className="p-1 font-medium text-gray-900 dark:text-gray-100 sm:p-4"
-            >
-              {link.title}
-            </Link>
-          ))}
+          {headerNavLinks
+            .filter((link) => link.href !== '/')
+            .map((link) => (
+              <Link
+                key={link.title}
+                href={link.href}
+                className="p-1 font-medium text-gray-900 dark:text-gray-100 sm:p-4"
+              >
+                {link.title}
+              </Link>
+            ))}
         </div>
         <ThemeSwitch />
         <MobileNav />

components/MobileNav.tsx

@@ -40,7 +40,7 @@ const MobileNav = () => {
         </svg>
       </button>
       <div
-        className={`fixed left-0 top-0 z-10 h-full w-full transform bg-gray-200 opacity-95 duration-300 ease-in-out dark:bg-gray-800 ${
+        className={`fixed left-0 top-0 z-10 h-full w-full transform opacity-95 dark:opacity-[0.98] bg-white duration-300 ease-in-out dark:bg-gray-950 ${
           navShow ? 'translate-x-0' : 'translate-x-full'
         }`}
       >

data/headerNavLinks.ts

@@ -1,4 +1,5 @@
 const headerNavLinks = [
+  { href: '/', title: 'Home' },
   { href: '/blog', title: 'Blog' },
   { href: '/tags', title: 'Tags' },
   { href: '/projects', title: 'Projects' },