Add navbar

src/components/Header.tsx

@@ -1,8 +1,11 @@
 "use client";
 
+import Image from "next/image";
+import { Link } from "@/i18n/routing";
+import { vipnagorgialla } from "@/components/Vipnagorgialla";
+
 // Icons
 import {
-  MdClose,
   MdMenu,
   MdSunny,
   MdModeNight,
@@ -23,32 +26,63 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 
-// Fonts
-// import { vipnagorgialla } from "@/components/Vipnagorgialla";
+interface NavItem {
+  href:
+    | "/"
+    | "/ajakava"
+    | "/haldus"
+    | "/kodukord"
+    | "/messiala"
+    | "/piletid"
+    | "/striim"
+    | "/turniirid";
+  label: string;
+}
 
 interface HeaderProps {
-  isOpen: boolean;
-  onToggle: () => void;
   themeLabels: {
     light: string;
     dark: string;
     system: string;
   };
+  navItems: NavItem[];
 }
 
-const Header = ({ isOpen, onToggle, themeLabels }: HeaderProps) => {
+const Header = ({ themeLabels, navItems }: HeaderProps) => {
   const { theme, setTheme } = useTheme();
 
+  // Filter nav items for the horizontal bar (exclude kodukord)
+  const mainNavItems = navItems.filter(
+    (item) => item.href !== "/kodukord"
+  );
+
   return (
-    <header className="px-8 py-2 md:px-12 flex items-center bg-[#EEE5E5] dark:bg-[#0E0F19] border-b-3 border-[#1F5673] justify-between text-[#2A2C3F] dark:text-[#EEE5E5]">
-      <button onClick={onToggle}>
-        {isOpen ? (
-          <MdClose className="h-12 w-12 text-[#2A2C3F] dark:text-[#EEE5E5] cursor-pointer" />
-        ) : (
-          <MdMenu className="h-12 w-12 text-[#2A2C3F] dark:text-[#EEE5E5] cursor-pointer" />
-        )}
-      </button>
-      <div className="flex items-center gap-2">
+    <header className="px-4 py-2 md:px-8 flex items-center bg-[#0E0F19] border-b-3 border-[#1F5673] justify-between">
+      {/* Logo */}
+      <Link href="/" className="flex-shrink-0">
+        <Image
+          src="/tipilan-icon-white.svg"
+          alt="TipiLAN"
+          width={49}
+          height={40}
+          className="h-10 w-auto"
+        />
+      </Link>
+
+      {/* Right side - Navigation + controls */}
+      <div className="flex items-center gap-3">
+        {/* Desktop Navigation */}
+        <nav className="hidden md:flex items-center gap-3">
+          {mainNavItems.map((item) => (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={`${vipnagorgialla.className} font-bold italic text-lg uppercase px-4 py-1.5 border-2 border-[#00A3E0] text-[#EEE5E5] hover:bg-[#00A3E0]/20 transition`}
+            >
+              {item.label}
+            </Link>
+          ))}
+        </nav>
         <LanguageSwitcher />
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
@@ -57,8 +91,8 @@ const Header = ({ isOpen, onToggle, themeLabels }: HeaderProps) => {
               size="icon"
               className="size-10 cursor-pointer"
             >
-              <MdSunny className="scale-135 text-[#2A2C3F] dark:hidden" />
-              <MdModeNight className="scale-135 dark:text-[#EEE5E5] not-dark:hidden" />
+              <MdSunny className="scale-135 text-[#EEE5E5] dark:hidden" />
+              <MdModeNight className="scale-135 text-[#EEE5E5] not-dark:hidden" />
               <span className="sr-only">Toggle theme</span>
             </Button>
           </DropdownMenuTrigger>
@@ -93,6 +127,32 @@ const Header = ({ isOpen, onToggle, themeLabels }: HeaderProps) => {
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
+
+        {/* Mobile menu button */}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="md:hidden size-10 cursor-pointer"
+            >
+              <MdMenu className="h-8 w-8 text-[#EEE5E5]" />
+              <span className="sr-only">Menu</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-48 translate-y-4">
+            {navItems.map((item) => (
+              <DropdownMenuItem key={item.href} asChild>
+                <Link
+                  href={item.href}
+                  className={`${vipnagorgialla.className} font-bold italic uppercase text-lg`}
+                >
+                  {item.label}
+                </Link>
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
       </div>
     </header>
   );

src/components/SidebarLayoutClient.tsx

@@ -1,9 +1,5 @@
 "use client";
 
-import { useState, useEffect } from "react";
-import { usePathname } from "@/i18n/routing";
-import { Link } from "@/i18n/routing";
-import { vipnagorgialla } from "@/components/Vipnagorgialla";
 import Header from "./Header";
 
 interface NavItem {
@@ -14,7 +10,6 @@ interface NavItem {
     | "/kodukord"
     | "/messiala"
     | "/piletid"
-    | "/reeglid"
     | "/striim"
     | "/turniirid";
   label: string;
@@ -33,52 +28,7 @@ export default function SidebarLayoutClient({
   themeLabels,
   navItems,
 }: SidebarLayoutClientProps) {
-  const [isOpen, setIsOpen] = useState(false);
-  const pathname = usePathname();
-
-  const toggleSidebar = () => setIsOpen(!isOpen);
-
-  // Close sidebar when route changes
-  useEffect(() => {
-    if (isOpen) {
-      setIsOpen(false);
-    }
-  }, [pathname]);
-
   return (
-    <>
-      <Header
-        isOpen={isOpen}
-        onToggle={toggleSidebar}
-        themeLabels={themeLabels}
-      />
-
-      {/* Sidebar */}
-      <>
-        <div
-          className="fixed inset-0 backdrop-blur mt-16 z-20"
-          style={{ display: isOpen ? "block" : "none" }}
-          onClick={() => setIsOpen(false)}
-        ></div>
-        <div
-          className={`text-3xl md:text-4xl ${vipnagorgialla.className} font-bold break-all italic uppercase fixed flex items-start xs:pl-25 pl-20 sm:pl-20 md:pl-24 flex-col gap-8 pt-16 top-0 left-0 h-[99vh] mt-16 -skew-x-5 border-r-3 border-[#1F5673] w-screen sm:w-96 md:w-128 bg-[#EEE5E5] dark:bg-[#0E0F19] text-[#2A2C3F] dark:text-[#EEE5E5] transition-transform transform z-20`}
-          style={{
-            transform: isOpen
-              ? "translateX(-13%) skewX(calc(5deg * -1)"
-              : "translateX(-150%) skewX(calc(5deg * -1)",
-          }}
-        >
-          {navItems.map((item) => (
-            <Link
-              key={item.href}
-              href={item.href}
-              className="hover:text-[#00A3E0] md:hover:translate-x-2 transition duration-150"
-            >
-              {item.label}
-            </Link>
-          ))}
-        </div>
-      </>
-    </>
+    <Header themeLabels={themeLabels} navItems={navItems} />
   );
 }

src/components/SidebarLayoutServer.tsx

@@ -19,7 +19,6 @@ export default async function SidebarLayoutServer() {
     { href: "/ajakava" as const, label: navT("schedule") },
     { href: "/turniirid" as const, label: navT("tournaments") },
     { href: "/kodukord" as const, label: navT("houserules") },
-    { href: "/reeglid" as const, label: navT("rules") },
   ];
 
   return <SidebarLayoutClient themeLabels={themeLabels} navItems={navItems} />;