Move Header Links to Burger Menu

Implement a burger menu for header links when in mobile view, positioning it in the top right corner for better accessibility and user experience. [skip gpt_engineer]
OwnTube-tv · Feb 2, 2025 · 1691a65 · 1691a65
1 parent ae2136c
commit 1691a65
Showing 1 changed file with 53 additions and 26 deletions.
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,9 +1,43 @@
 import { Link, useLocation } from "react-router-dom";
+import { Menu } from "lucide-react";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { Button } from "@/components/ui/button";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
 
 const Header = () => {
   const location = useLocation();
+  const isMobile = useIsMobile();
   const isActive = (path: string) => location.pathname === path;
 
+  const NavigationLinks = () => (
+    <>
+      <Link
+        to="/"
+        className={`text-lg ${
+          isActive("/") ? "text-owntube-orange font-semibold" : "text-gray-600 hover:text-owntube-orange"
+        }`}
+      >
+        Apps
+      </Link>
+      <Link
+        to="/consulting"
+        className={`text-lg ${
+          isActive("/consulting") ? "text-owntube-orange font-semibold" : "text-gray-600 hover:text-owntube-orange"
+        }`}
+      >
+        Consulting
+      </Link>
+      <Link
+        to="/contact"
+        className={`text-lg ${
+          isActive("/contact") ? "text-owntube-orange font-semibold" : "text-gray-600 hover:text-owntube-orange"
+        }`}
+      >
+        Contact
+      </Link>
+    </>
+  );
+
   return (
     <header className="w-full bg-white shadow-sm">
       <div className="container mx-auto px-4 py-4 flex justify-between items-center">
@@ -15,32 +49,25 @@ const Header = () => {
           />
           <span className="text-2xl font-bold text-owntube-orange">OwnTube.tv</span>
         </Link>
-        <nav className="flex space-x-8">
-          <Link
-            to="/"
-            className={`text-lg ${
-              isActive("/") ? "text-owntube-orange font-semibold" : "text-gray-600 hover:text-owntube-orange"
-            }`}
-          >
-            Apps
-          </Link>
-          <Link
-            to="/consulting"
-            className={`text-lg ${
-              isActive("/consulting") ? "text-owntube-orange font-semibold" : "text-gray-600 hover:text-owntube-orange"
-            }`}
-          >
-            Consulting
-          </Link>
-          <Link
-            to="/contact"
-            className={`text-lg ${
-              isActive("/contact") ? "text-owntube-orange font-semibold" : "text-gray-600 hover:text-owntube-orange"
-            }`}
-          >
-            Contact
-          </Link>
-        </nav>
+
+        {isMobile ? (
+          <Sheet>
+            <SheetTrigger asChild>
+              <Button variant="ghost" size="icon">
+                <Menu className="h-6 w-6" />
+              </Button>
+            </SheetTrigger>
+            <SheetContent>
+              <nav className="flex flex-col space-y-8 mt-8">
+                <NavigationLinks />
+              </nav>
+            </SheetContent>
+          </Sheet>
+        ) : (
+          <nav className="flex space-x-8">
+            <NavigationLinks />
+          </nav>
+        )}
       </div>
     </header>
   );