temporary push, with testing changes for nav and Juhatus

src/layout/Navbar.svelte

@@ -22,6 +22,45 @@
   let isClosing = $state(false);
   let currentPath = $state(getPath());
 
+  const aboutRoutes = [
+    "/lapikutest",
+    "/aboutus",
+    "/tudengile",
+    "/student",
+    "/mentorid",
+    "/mentors",
+    "/juhatus",
+    "/management",
+  ];
+
+  const eventsRoutes = ["/kalender", "/striim", "/koolitused"];
+
+  function isCurrent(path) {
+    return currentPath === path;
+  }
+
+  function isInGroup(paths) {
+    return paths.includes(currentPath);
+  }
+
+  function navButtonClass(active = false) {
+    return active
+      ? "border-transparent text-orange-500 bg-white/5"
+      : "border-transparent text-white/75 hover:text-white hover:bg-white/5";
+  }
+
+  function dropdownButtonClass(active = false) {
+    return active
+      ? "border-transparent text-orange-500 bg-white/5"
+      : "border-transparent text-white/75 hover:text-white hover:bg-white/5";
+  }
+
+  function dropdownItemClass(active = false) {
+    return active
+      ? "bg-orange-500/10 text-orange-500"
+      : "bg-transparent text-black hover:text-orange-500";
+  }
+
   // Update currentPath when navigation occurs
   $effect(() => {
     const handleNavigation = () => {
@@ -125,84 +164,111 @@
 </style>
 
 <header class="fixed inset-x-0 top-0 z-50 text-white">
-  <Container maxWidth={true} center={false} class="py-0">
-    {#if $text && Object.keys($text).length > 0}
-      <div class="flex items-center w-full relative min-h-10">
-        <!-- Logo -->
-        {#if currentPath !== "/"}
-          <div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 md:relative md:left-auto md:translate-x-0 md:top-auto md:translate-y-0">
-            <Button onClick={() => handleNavigation("/")} class="border-transparent">
-              <img src="assets/LapLogo_black_white.png" alt="Lapikud Logo" class="h-14" />
-            </Button>
-          </div>
-        {/if}
-      
-        <div class="flex items-center justify-end ml-auto w-full md:w-auto md:border-b-3 md:border-white backdrop-blur-lg bg-black/35">
-          <!-- Desktop Navigation -->
-          <nav class="z-10 hidden md:flex gap-1 justify-end text-lg">
-            <Dropdown
-              name={$text.about}
-              buttonClass="hover:text-orange-500 border-transparent"
-              panelClass="bg-white text-black"
-            >
-              <Button class="bg-transparent hover:text-orange-500 border-transparent" onClick={() => navigate("/lapikutest")}
-                >{$text.aboutPages.info}</Button
-              >
-              <Button class="bg-transparent hover:text-orange-500 border-transparent" onClick={() => navigate("/tudengile")}
-                ><Bot />{$text.aboutPages.join}</Button
-              >
-              <Button class="bg-transparent hover:text-orange-500 border-transparent" onClick={() => navigate("/mentorid")}
-                ><HandHeart />{$text.aboutPages.mentors}</Button
-              >
-              <Button class="bg-transparent hover:text-orange-500 border-transparent" onClick={() => navigate("/juhatus")}
-                ><Lectern />{$text.aboutPages.board}</Button
-              >
-            </Dropdown>
-            <Dropdown
-              name={$text.events}
-              buttonClass="hover:text-orange-500 border-transparent"
-              panelClass="bg-white text-black"
-            >
-              <Button class="bg-transparent hover:text-orange-500 border-transparent" onClick={() => navigate("/koolitused")}
-                ><Presentation />{$text.eventsPages.workshops}</Button
-              >
-              <Button class="bg-transparent hover:text-orange-500 border-transparent" onClick={() => navigate("https://asikarikas.ee/", { external: true })}
-                ><Trophy />ASI Karikas</Button
-              >
-              <Button class="bg-transparent hover:text-orange-500 border-transparent" onClick={() => navigate("https://remondikohvik.lapikud.ee/", { external: true })}
-                ><Coffee />{$text.eventsPages.repair}</Button
-              >
-            </Dropdown>
-            <Button class="hover:text-orange-500 border-transparent" onClick={() => navigate("/helpdesk")}
-              >{$text.helpdesk}
-            </Button>
-            <Button class="hover:text-orange-500 border-transparent" onClick={() => navigate("/kontakt")}
-              >{$text.contact}
-            </Button>
-            
-            <!-- Language Switcher -->
-            <Button 
-              class="px-3 py-1 text-sm ml-4 hover:text-orange-500 border-transparent"
-              onClick={() => switchLanguageRoute($currentLang === 'est' ? 'en' : 'est')}
-            >
-              {$currentLang === 'est' ? 'EN' : 'EST'}
-            </Button>
-          </nav>
+  <div class="border-b-2 border-orange-500 bg-gray-900/95 backdrop-blur-md">
+    <Container maxWidth={true} center={true} class="py-0">
+      {#if $text && Object.keys($text).length > 0}
+        <div class="flex min-h-16 items-center gap-4">
+          <Button
+            onClick={() => handleNavigation("/")}
+            class="nav-logo-button border-transparent bg-transparent px-0 py-0 text-white hover:text-white"
+          >
+            <img src="/assets/LapLogo_white_orange.png" alt="Lapikud Logo" class="h-12 md:h-14 w-auto" />
+          </Button>
 
-          <!-- Mobile Hamburger Button - Fixed position -->
-          {#if !mobileMenuOpen}
-            <Button
-              onClick={toggleMobileMenu}
-              class="mobile-only p-2 text-white transition-colors bg-transparent absolute right-0 hover:text-white border-transparent"
-              aria-label="Toggle navigation menu"
-            >
-              <Menu size={32} />
-            </Button>
-          {/if}
+          <div class="flex items-center justify-end ml-auto w-full md:w-auto">
+            <nav class="z-10 hidden md:flex items-center gap-1 justify-end text-lg">
+              <Dropdown
+                name={$text.about}
+                buttonClass={`${dropdownButtonClass(isInGroup(aboutRoutes))} ${isInGroup(aboutRoutes) ? "nav-active-parent" : ""}`}
+                panelClass="nav-dropdown-panel"
+              >
+                <Button
+                  class={dropdownItemClass(isCurrent("/lapikutest") || isCurrent("/aboutus"))}
+                  onClick={() => handleNavigation("/lapikutest")}
+                >
+                  {$text.aboutPages.info}
+                </Button>
+                <Button
+                  class={dropdownItemClass(isCurrent("/tudengile") || isCurrent("/student"))}
+                  onClick={() => handleNavigation("/tudengile")}
+                >
+                  <Bot />{$text.aboutPages.join}
+                </Button>
+                <Button
+                  class={dropdownItemClass(isCurrent("/mentorid") || isCurrent("/mentors"))}
+                  onClick={() => handleNavigation("/mentorid")}
+                >
+                  <HandHeart />{$text.aboutPages.mentors}
+                </Button>
+                <Button
+                  class={dropdownItemClass(isCurrent("/juhatus") || isCurrent("/management"))}
+                  onClick={() => handleNavigation("/juhatus")}
+                >
+                  <Lectern />{$text.aboutPages.board}
+                </Button>
+              </Dropdown>
+
+              <Dropdown
+                name={$text.events}
+                buttonClass={`${dropdownButtonClass(isInGroup(eventsRoutes))} ${isInGroup(eventsRoutes) ? "nav-active-parent" : ""}`}
+                panelClass="nav-dropdown-panel"
+              >
+                <Button
+                  class={dropdownItemClass(isCurrent("/koolitused"))}
+                  onClick={() => handleNavigation("/koolitused")}
+                >
+                  <Presentation />{$text.eventsPages.workshops}
+                </Button>
+                <Button
+                  class="bg-transparent text-black hover:text-orange-500"
+                  onClick={() => handleNavigation("https://asikarikas.ee/", { external: true })}
+                >
+                  <Trophy />ASI Karikas
+                </Button>
+                <Button
+                  class="bg-transparent text-black hover:text-orange-500"
+                  onClick={() => handleNavigation("https://remondikohvik.lapikud.ee/", { external: true })}
+                >
+                  <Coffee />{$text.eventsPages.repair}
+                </Button>
+              </Dropdown>
+
+              <Button
+                class={navButtonClass(isCurrent("/helpdesk"))}
+                onClick={() => handleNavigation("/helpdesk")}
+              >
+                {$text.helpdesk}
+              </Button>
+
+              <Button
+                class={navButtonClass(isCurrent("/kontakt") || isCurrent("/contact"))}
+                onClick={() => handleNavigation("/kontakt")}
+              >
+                {$text.contact}
+              </Button>
+
+              <Button
+                class="ml-3 border-transparent bg-transparent px-3 py-1 text-sm text-white/75 hover:text-orange-500 hover:bg-white/5"
+                onClick={() => switchLanguageRoute($currentLang === "est" ? "en" : "est")}
+              >
+                {$currentLang === "est" ? "EN" : "EST"}
+              </Button>
+            </nav>
+
+            {#if !mobileMenuOpen}
+              <Button
+                onClick={toggleMobileMenu}
+                class="mobile-only ml-auto border-transparent bg-transparent p-2 text-white transition-colors hover:text-orange-500"
+                aria-label="Toggle navigation menu"
+              >
+                <Menu size={32} />
+              </Button>
+            {/if}
+          </div>
         </div>
-      </div>
-    {/if}
-  </Container>
+      {/if}
+    </Container>
+  </div>
 </header>
 
 <!-- Full Screen Mobile Menu -->
@@ -226,33 +292,40 @@
 
       <!-- Menu Content -->
       <Stack gap="gap-5" class="flex-1 px-8 pt-24 pb-12 text-white text-xl">
+        <Button
+          onClick={() => handleNavigation("/")}
+          class="mb-3 border-transparent bg-transparent px-0 py-0 text-left text-white hover:text-white"
+        >
+          <img src="/assets/LapLogo_white_orange.png" alt="Lapikud Logo" class="h-12 w-auto" />
+        </Button>
+
         <!-- About Section -->
         <Stack gap="gap-3">
           <h3 class="text-2xl font-bold text-orange-500">{$text.about}</h3>
           <Stack gap="gap-2" class="pl-4">
             <Button
               onClick={() => handleNavigation("/lapikutest")}
-              class="text-left transition-colors flex items-center gap-2 bg-transparent hover:text-orange-500 border-transparent"
+              class={`text-left transition-colors flex items-center gap-2 bg-transparent border-transparent ${isCurrent("/lapikutest") || isCurrent("/aboutus") ? "text-orange-500" : "hover:text-orange-500"}`}
             >
               {$text.aboutPages.info}
             </Button>
             <Button
               onClick={() => handleNavigation("/tudengile")}
-              class="text-left transition-colors flex items-center gap-2 bg-transparent hover:text-orange-500 border-transparent"
+              class={`text-left transition-colors flex items-center gap-2 bg-transparent border-transparent ${isCurrent("/tudengile") || isCurrent("/student") ? "text-orange-500" : "hover:text-orange-500"}`}
             >
               <Bot size={20} />
               {$text.aboutPages.join}
             </Button>
             <Button
               onClick={() => handleNavigation("/mentorid")}
-              class="text-left transition-colors flex items-center gap-2 bg-transparent hover:text-orange-500 border-transparent"
+              class={`text-left transition-colors flex items-center gap-2 bg-transparent border-transparent ${isCurrent("/mentorid") || isCurrent("/mentors") ? "text-orange-500" : "hover:text-orange-500"}`}
             >
               <HandHeart size={20} />
               {$text.aboutPages.mentors}
             </Button>
             <Button
               onClick={() => handleNavigation("/juhatus")}
-              class="text-left transition-colors flex items-center gap-2 bg-transparent hover:text-orange-500 border-transparent"
+              class={`text-left transition-colors flex items-center gap-2 bg-transparent border-transparent ${isCurrent("/juhatus") || isCurrent("/management") ? "text-orange-500" : "hover:text-orange-500"}`}
             >
               <Lectern size={20} />
               {$text.aboutPages.board}
@@ -292,13 +365,13 @@
         <Stack gap="gap-3">
           <Button
             onClick={() => handleNavigation("/helpdesk")}
-            class="text-left text-2xl font-semibold transition-colors bg-transparent hover:text-orange-500 border-transparent"
+            class={`text-left text-2xl font-semibold transition-colors bg-transparent border-transparent ${isCurrent("/helpdesk") ? "text-orange-500" : "hover:text-orange-500"}`}
           >
             {$text.helpdesk}
           </Button>
           <Button
             onClick={() => handleNavigation("/kontakt")}
-            class="text-left text-2xl font-semibold transition-colors bg-transparent hover:text-orange-500 border-transparent"
+            class={`text-left text-2xl font-semibold transition-colors bg-transparent border-transparent ${isCurrent("/kontakt") || isCurrent("/contact") ? "text-orange-500" : "hover:text-orange-500"}`}
           >
             {$text.contact}
           </Button>