From ae1a44b65f02ce5b3f1a6b8d0ed767116a5cafe0 Mon Sep 17 00:00:00 2001
From: Henri <henrikarba@gmail.com>
Date: Mon, 6 Apr 2026 21:10:15 +0300
Subject: [PATCH] changes for nav and Juhatus

---
 src/App.svelte                 |   6 +-
 src/app.css                    |  11 +++-
 src/components/Dropdown.svelte |  18 ++----
 src/layout/Navbar.svelte       | 100 +++++++++++++++++++++++++--------
 src/routes/AboutUs.svelte      |   2 +
 src/routes/Calendar.svelte     |   2 +-
 src/routes/Contact.svelte      |   2 +
 src/routes/Helpdesk.svelte     |   2 +
 src/routes/Managment.svelte    |   2 +
 src/routes/Mentors.svelte      |   2 +
 src/routes/OurWork.svelte      |   2 +
 src/routes/Striim.svelte       |   8 +--
 src/routes/Student.svelte      |   2 +
 13 files changed, 113 insertions(+), 46 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index ab76b48..8ec6170 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -7,8 +7,10 @@
 
 {#if $text && Object.keys($text).length > 0}
   <Navbar />
-  <main>
-    <Router {routes} />
+  <main class="min-h-screen flex flex-col">
+    <div class="flex-1 flex flex-col">
+      <Router {routes} />
+    </div>
     <Footer />
   </main>
 {/if}
diff --git a/src/app.css b/src/app.css
index 43e5414..359c58d 100644
--- a/src/app.css
+++ b/src/app.css
@@ -5,9 +5,9 @@
 
 /* Overwriting tailwindcss specific variables */
 @theme {
-  --color-orange-500: #f0941d;
-  --color-orange-300: #ffa940;
-  --color-orange-600: #d67d0a;
+  --color-orange-500: #f0941d; /* Primary color, use this for most things. */
+  --color-orange-300: #ffa80d; /* Use for hover states, accents, and highlights. (lighter than primary) */
+  --color-orange-600: #d67d0a; /* Ideally don't use */
 
   --color-gray-100: #fffdfa;
   --color-gray-900: #0d0d0d;
@@ -109,6 +109,11 @@ input[type="submit"] {
   margin: -1px;
 }
 
+/* Safe area for content below navbar (94px scaled) */
+.safe-area-navbar {
+  padding-top: calc(94px * var(--ui-scale));
+}
+
 /* Show/hide helpers for breakpoints */
 .mobile-only {
   display: block;
diff --git a/src/components/Dropdown.svelte b/src/components/Dropdown.svelte
index d9fd758..c2ebb29 100644
--- a/src/components/Dropdown.svelte
+++ b/src/components/Dropdown.svelte
@@ -26,21 +26,13 @@
 <div class="relative inline-block" onfocusout={handleFocusOut}>
   <Button onClick={toggle} class={`${buttonClass} gap-0`}>
     {name}
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke-width="2"
-      stroke="currentColor"
-      class="w-4 h-4 ml-1 mr-0 mt-0.5 transition-transform inline-block"
+    <span
+      class="ml-1 mr-0 mt-0.5 transition-transform inline-block text-[0.9em] opacity-60"
       style:transform={isOpen ? "rotate(180deg)" : "none"}
+      aria-hidden="true"
     >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="m19.5 8.25-7.5 7.5-7.5-7.5"
-      />
-    </svg>
+      ↓
+    </span>
   </Button>
 
   <div
diff --git a/src/layout/Navbar.svelte b/src/layout/Navbar.svelte
index b01b732..8e8c190 100644
--- a/src/layout/Navbar.svelte
+++ b/src/layout/Navbar.svelte
@@ -33,7 +33,7 @@
     "/management",
   ];
 
-  const eventsRoutes = ["/kalender", "/striim", "/koolitused"];
+  const eventsRoutes = ["/koolitused"];
 
   function isCurrent(path) {
     return currentPath === path;
@@ -43,22 +43,74 @@
     return paths.includes(currentPath);
   }
 
+  function isHomePage() {
+    return currentPath === "/";
+  }
+
+  function headerShellClass() {
+    return isHomePage()
+      ? "bg-transparent"
+      : "border-b-2 border-orange-500 bg-gray-900 backdrop-blur-md";
+  }
+
+  function headerRowClass() {
+    return isHomePage()
+      ? "flex items-center w-full relative min-h-10"
+      : "flex min-h-16 items-center gap-4";
+  }
+
+  function headerWrapClass() {
+    return isHomePage()
+      ? "ml-auto flex w-full items-center justify-end md:w-auto md:border-b-3 md:border-white backdrop-blur-lg bg-black/35 pr-(--page-padding-inline)"
+      : "flex items-center justify-end ml-auto w-full md:w-auto";
+  }
+
+  function desktopNavClass() {
+    return isHomePage()
+      ? "z-10 hidden md:flex gap-1 justify-end text-lg"
+      : "z-10 hidden md:flex items-center gap-1 justify-end text-lg";
+  }
+
   function navButtonClass(active = false) {
+    if (isHomePage()) {
+      return active
+        ? "border-transparent text-orange-500 bg-transparent"
+        : "border-transparent bg-transparent text-white/75 hover:text-orange-500";
+    }
+
     return active
-      ? "border-transparent text-orange-500 bg-white/5"
-      : "border-transparent text-white/75 hover:text-white hover:bg-white/5";
+      ? "border-transparent text-orange-500 hover:bg-white/5"
+      : "border-transparent text-white/75 hover:bg-white/5";
   }
 
   function dropdownButtonClass(active = false) {
+    if (isHomePage()) {
+      return active
+        ? "border-transparent text-orange-500 bg-transparent"
+        : "border-transparent bg-transparent text-white/75 hover:text-orange-500";
+    }
+
     return active
-      ? "border-transparent text-orange-500 bg-white/5"
-      : "border-transparent text-white/75 hover:text-white hover:bg-white/5";
+      ? "border-transparent text-orange-500 hover:bg-white/5"
+      : "border-transparent text-white/75 hover:bg-white/5";
+  }
+
+  function languageButtonClass() {
+    if (isHomePage()) {
+      return "ml-3 border-transparent bg-transparent px-3 py-1 text-sm text-white/75 hover:text-orange-500";
+    }
+
+    return "ml-3 border-transparent bg-transparent px-3 py-1 text-sm text-white/75 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";
+      ? "w-full justify-start border-transparent bg-transparent text-orange-500"
+      : "w-full justify-start border-transparent bg-transparent text-black hover:text-orange-500";
+  }
+
+  function dropdownPanelClass() {
+    return "nav-dropdown-panel min-w-52 border border-black/10 bg-white/95 p-1 text-black backdrop-blur-md";
   }
 
   // Update currentPath when navigation occurs
@@ -164,23 +216,25 @@
 </style>
 
 <header class="fixed inset-x-0 top-0 z-50 text-white">
-  <div class="border-b-2 border-orange-500 bg-gray-900/95 backdrop-blur-md">
-    <Container maxWidth={true} center={true} class="py-0">
+  <div class={headerShellClass()}>
+    <Container maxWidth={true} center={!isHomePage()} 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>
+        <div class={headerRowClass()}>
+          {#if !isHomePage()}
+            <Button
+              onClick={() => handleNavigation("/")}
+              class="nav-logo-button border-transparent bg-transparent px-0 py-3"
+            >
+              <img src="/assets/LapLogo_white_orange.png" alt="Lapikud logo" class="h-12 md:h-14 w-auto" />
+            </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">
+          <div class={headerWrapClass()}>
+            <nav class={desktopNavClass()}>
               <Dropdown
                 name={$text.about}
                 buttonClass={`${dropdownButtonClass(isInGroup(aboutRoutes))} ${isInGroup(aboutRoutes) ? "nav-active-parent" : ""}`}
-                panelClass="nav-dropdown-panel"
+                panelClass={dropdownPanelClass()}
               >
                 <Button
                   class={dropdownItemClass(isCurrent("/lapikutest") || isCurrent("/aboutus"))}
@@ -211,7 +265,7 @@
               <Dropdown
                 name={$text.events}
                 buttonClass={`${dropdownButtonClass(isInGroup(eventsRoutes))} ${isInGroup(eventsRoutes) ? "nav-active-parent" : ""}`}
-                panelClass="nav-dropdown-panel"
+                panelClass={dropdownPanelClass()}
               >
                 <Button
                   class={dropdownItemClass(isCurrent("/koolitused"))}
@@ -220,13 +274,13 @@
                   <Presentation />{$text.eventsPages.workshops}
                 </Button>
                 <Button
-                  class="bg-transparent text-black hover:text-orange-500"
+                  class={dropdownItemClass(false)}
                   onClick={() => handleNavigation("https://asikarikas.ee/", { external: true })}
                 >
                   <Trophy />ASI Karikas
                 </Button>
                 <Button
-                  class="bg-transparent text-black hover:text-orange-500"
+                  class={dropdownItemClass(false)}
                   onClick={() => handleNavigation("https://remondikohvik.lapikud.ee/", { external: true })}
                 >
                   <Coffee />{$text.eventsPages.repair}
@@ -248,7 +302,7 @@
               </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"
+                class={languageButtonClass()}
                 onClick={() => switchLanguageRoute($currentLang === "est" ? "en" : "est")}
               >
                 {$currentLang === "est" ? "EN" : "EST"}
diff --git a/src/routes/AboutUs.svelte b/src/routes/AboutUs.svelte
index f64f440..22e9e2b 100644
--- a/src/routes/AboutUs.svelte
+++ b/src/routes/AboutUs.svelte
@@ -37,6 +37,7 @@
   });
 </script>
 
+<div class="safe-area-navbar">
 <!-- Hero Section -->
 <Section background="orange">
   <Center>
@@ -260,6 +261,7 @@
     </div>
   </Section>
 {/if}
+</div>
 
 <style>
   .feature-icon {
diff --git a/src/routes/Calendar.svelte b/src/routes/Calendar.svelte
index dc21031..b53a60c 100644
--- a/src/routes/Calendar.svelte
+++ b/src/routes/Calendar.svelte
@@ -9,7 +9,7 @@
   });
 </script>
 
-<div bind:this={sectionElement}>
+<div class="safe-area-navbar" bind:this={sectionElement}>
 <Section >
   <Center dir="col" class="w-full">
     <div class="w-full max-w-4xl">
diff --git a/src/routes/Contact.svelte b/src/routes/Contact.svelte
index a1e1813..6340b65 100644
--- a/src/routes/Contact.svelte
+++ b/src/routes/Contact.svelte
@@ -91,6 +91,7 @@
   }
 </script>
 
+<div class="safe-area-navbar">
 <!-- Hero Section -->
 <Section background="orange">
   <Center>
@@ -299,6 +300,7 @@
     </Card>
   </Grid>
 </Section>
+</div>
 
 <style>
   .feature-icon {
diff --git a/src/routes/Helpdesk.svelte b/src/routes/Helpdesk.svelte
index 5928477..0a73d26 100644
--- a/src/routes/Helpdesk.svelte
+++ b/src/routes/Helpdesk.svelte
@@ -43,6 +43,7 @@
   });
 </script>
 
+<div class="safe-area-navbar">
 <!-- Hero Section -->
 <div class="w-full bg-black">
   <div class="flex absolute justify-center items-center flex-row w-full h-[42vh] px-4">
@@ -188,3 +189,4 @@
       </div>
     </Grid>
   </Section>
+</div>
diff --git a/src/routes/Managment.svelte b/src/routes/Managment.svelte
index 3087ab0..dc420f0 100644
--- a/src/routes/Managment.svelte
+++ b/src/routes/Managment.svelte
@@ -111,6 +111,7 @@
   });
 </script>
 
+<div class="safe-area-navbar">
 <Section
   padding="none"
   fullWidth={true}
@@ -255,6 +256,7 @@
     {/if}
   </Container>
 </Section>
+</div>
 
 <style>
   .hero-shell {
diff --git a/src/routes/Mentors.svelte b/src/routes/Mentors.svelte
index f171b3b..bd12407 100644
--- a/src/routes/Mentors.svelte
+++ b/src/routes/Mentors.svelte
@@ -46,6 +46,7 @@
     }
 </script>
 
+<div class="safe-area-navbar">
 <!-- Hero Section -->
 <Section background="orange">
     <Center>
@@ -177,4 +178,5 @@
         {/each}
     </div>
 </Section>
+</div>
 
diff --git a/src/routes/OurWork.svelte b/src/routes/OurWork.svelte
index 2c42e6d..9df0a32 100644
--- a/src/routes/OurWork.svelte
+++ b/src/routes/OurWork.svelte
@@ -69,6 +69,7 @@
   ];
 </script>
 
+<div class="safe-area-navbar">
 <!-- Hero Section -->
 <Section background="orange">
   <Center>
@@ -257,6 +258,7 @@
     </div>
   </Center>
 </Section>
+</div>
 
 <style>
   .feature-icon {
diff --git a/src/routes/Striim.svelte b/src/routes/Striim.svelte
index 7c146be..6a94631 100644
--- a/src/routes/Striim.svelte
+++ b/src/routes/Striim.svelte
@@ -13,9 +13,9 @@
   }
 </script>
 
-<div bind:this={sectionElement}>
-<Section>
-  <Grid min="400px">
+<div class="safe-area-navbar" bind:this={sectionElement}>
+<Section fullWidth={true} contentClass="flex items-start">
+  <Grid min="400px" class="w-full">
     <a href="https://master.lapikud.ee/stream/1/stream">
       <img src="https://master.lapikud.ee/stream/1/substream" alt="video0" style="width:100%;" on:load={handleImageLoad}/>
     </a>
@@ -27,6 +27,6 @@
     <a href="https://master.lapikud.ee/stream/3/stream">
       <img src="https://master.lapikud.ee/stream/3/substream" alt="video2" style="width:100%;" on:load={handleImageLoad}/>
     </a>
-    </Grid>
+  </Grid>
 </Section>
 </div>
diff --git a/src/routes/Student.svelte b/src/routes/Student.svelte
index 523228f..7e71738 100644
--- a/src/routes/Student.svelte
+++ b/src/routes/Student.svelte
@@ -25,6 +25,7 @@
   });
 </script>
 
+<div class="safe-area-navbar">
 <!-- Hero Section -->
 <Section background="orange">
   <Center>
@@ -195,6 +196,7 @@
     </div>
   {/if}
 </Section>
+</div>
 
 <style>
   .feature-icon {