navbar changes + logo

src/components/layout/Section.svelte

@@ -7,7 +7,7 @@
 
   const paddingClasses = {
     none: "py-0",
-    small: "py-8",
+    small: "py-4 md:py-8",
     normal: "py-12 max-md:py-8",
     large: "py-[clamp(3rem,8vw,6rem)] max-md:py-12",
   };
@@ -26,7 +26,7 @@
 
 <section
   {id}
-  class="w-full relative {paddingClasses[padding]} {className}"
+  class="w-full {paddingClasses[padding]} {className}"
   style={backgroundStyle ? `background: ${backgroundStyle};` : ""}
 >
   <div class="{fullWidth ? '' : 'max-w-[1200px]'} mx-auto px-(--site-padding)">

src/layout/Navbar.svelte

@@ -10,7 +10,6 @@
 
   // Icon imports (Lucide)
   import Coffee from "lucide-svelte/icons/coffee";
-  import CalendarClock from "lucide-svelte/icons/calendar-clock";
   import Presentation from "lucide-svelte/icons/presentation";
   import Swords from "lucide-svelte/icons/swords";
   import Lectern from "lucide-svelte/icons/lectern";
@@ -20,11 +19,23 @@
   import Menu from "lucide-svelte/icons/menu";
   import X from "lucide-svelte/icons/x";
 
-  let mobileMenuOpen = false;
+  let mobileMenuOpen = $state(false);
-  let isClosing = false;
+  let isClosing = $state(false);
+  let currentPath = $state(getPath());
+
+  // Update currentPath when navigation occurs
+  $effect(() => {
+    const handleNavigation = () => {
+      currentPath = getPath();
+    };
+
+    window.addEventListener("popstate", handleNavigation);
+    return () => window.removeEventListener("popstate", handleNavigation);
+  });
 
   // Reactively control body scroll
-  $: if (typeof document !== 'undefined') {
+  $effect(() => {
+    if (typeof document !== 'undefined') {
       if (mobileMenuOpen) {
         document.body.style.overflow = 'hidden';
         document.documentElement.style.overflow = 'hidden';
@@ -33,6 +44,7 @@
         document.documentElement.style.overflow = '';
       }
     }
+  });
 
   onDestroy(() => {
     if (typeof document !== 'undefined') {
@@ -56,6 +68,7 @@
 
   function handleNavigation(path, options = {}) {
     navigate(path, options);
+    currentPath = getPath();
     closeMobileMenu();
   }
 
@@ -95,7 +108,17 @@
 
 <Section className="text-white" background="off-black" padding="small">
   {#if $text && Object.keys($text).length > 0}
-  <div class="flex items-center justify-end">
+    <div class="flex items-center w-full relative min-h-16 md:min-h-0">
+      <!-- Logo -->
+      {#if currentPath !== "/" && currentPath !== "/en"}
+        <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("/")}>
+            <img src="assets/LapLogo_white_orange.png" alt="Lapikud Logo" class="h-16" />
+          </Button>
+        </div>
+      {/if}
+      
+      <div class="flex items-center justify-end ml-auto w-full md:w-auto">
         <!-- Desktop Navigation -->
         <nav class="z-10 hidden md:flex gap-4 justify-end text-xl">
           <Dropdown
@@ -154,10 +177,10 @@
           </Button>
       </nav>
 
-    <!-- Mobile Hamburger Button -->
+      <!-- Mobile Hamburger Button - Fixed position -->
       <Button
         onClick={toggleMobileMenu}
-      class="md:hidden ml-auto p-2 text-white transition-colors bg-transparent"
+        class="md:hidden p-2 text-white transition-colors bg-transparent absolute right-0"
         buttonHoverStyle="color: var(--orange)"
         style="opacity: {mobileMenuOpen ? '0' : '1'}; pointer-events: {mobileMenuOpen ? 'none' : 'auto'};"
         aria-label="Toggle menu"
@@ -165,6 +188,7 @@
         <Menu size={32} />
       </Button>
     </div>
+    </div>
   {/if}
 </Section>
 

src/routes/Home.svelte

@@ -4,7 +4,6 @@
     Grid,
     Card,
     Center,
-    Container,
   } from "$components";
   import { onMount } from "svelte";
   import yaml from 'js-yaml';
@@ -29,7 +28,7 @@
 <Section background="orange">
   <Grid>
     <Center>
-      <img src="/assets/LAP_logo_v3_transp.png" alt="MTÜ Lapikud" class="max-w-md w-full h-auto" style="padding: var(--space-4);"/>
+      <img src="/assets/LapLogo_black_white.png" alt="MTÜ Lapikud" class="max-w-md w-full h-auto" style="padding: var(--space-4);"/>
     </Center>
     <p class="text-3xl leading-relaxed" style="padding: var(--space-4);">
       MTÜ Lapikud on Tallinna Tehnikaülikooli Tarkvaraarendusklubi, mis ühendab endisi