Merge pull request #15 from bedirhanyildirim/8-mobile-navigation

feat: mobile nav developed

README.md

@@ -51,7 +51,7 @@ firebase deploy --only hosting -m "Deploy message"
 ### Features
 
 - [x] Navigation
-- [ ] Mobile navigation
+- [x] Mobile navigation
 - [x] Dark mode
 - [ ] Projects Page
 - [ ] Blog Page

components/theme/footer.tsx

@@ -62,7 +62,7 @@ export default function ThemeFooter() {
 
 export function ThemeFooterMobile() {
   return (
-    <div className="w-full flex justify-center py-3 text-xs text-gray-700 dark:text-gray-300 border-t dark:border-gray-700 lg:hidden">
+    <div className="w-full flex justify-center py-3 mt-8 text-xs text-gray-700 dark:text-gray-300 border-t dark:border-gray-700 lg:hidden">
       developed by <span className="font-bold inline-block ml-1">@bedcodes</span>
     </div>
   )

components/theme/nav.tsx

@@ -3,10 +3,11 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { cn } from "@/lib/utils";
 import { navigation } from "@/lib/navigation";
+import { Button } from "@/components/ui/button";
 
 export default function ThemeNav() {
   return (
-    <ul className="hidden lg:block mt-16 w-max">
+    <ul className="mt-8 lg:mt-16 w-full flex lg:flex-col gap-4 lg:gap-0">
       {navigation.map((route) => (
         <li key={route.label}>
           <ThemeNavItem href={route.href} label={route.label} />
@@ -31,18 +32,21 @@ function ThemeNavItem({ label, href }: { label: string; href: string }) {
     >
       <span
         className={cn(
-          "mr-4 h-px w-8 bg-slate-600 dark:bg-slate-300 transition-all group-hover:w-16 group-hover:bg-title group-focus-visible:w-16 group-focus-visible:bg-title motion-reduce:transition-none",
+          "hidden lg:block mr-4 h-px w-8 bg-slate-600 dark:bg-slate-300 transition-all group-hover:w-16 group-hover:bg-title group-focus-visible:w-16 group-focus-visible:bg-title motion-reduce:transition-none",
           isActive && "w-16 bg-title dark:bg-title"
         )}
       ></span>
       <span
         className={cn(
-          "text-xs font-bold uppercase tracking-widest text-zinc-600 dark:text-zinc-300 group-hover:text-title group-focus-visible:text-title",
+          "hidden lg:block text-xs font-bold uppercase tracking-widest text-zinc-600 dark:text-zinc-300 group-hover:text-title group-focus-visible:text-title",
           isActive && "text-title dark:text-title"
         )}
       >
         {label}
       </span>
+      <Button variant={isActive ? "secondary" : "ghost"} size="sm" className="block lg:hidden">
+        {label}
+      </Button>
     </Link>
   );
 }