lapikud/lapikud.github.io
2
0
Fork 1
mirror of https://github.com/Lapikud/lapikud.github.io.git synced 2026-08-08 23:49:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

mobile navbar fix

Browse Source
This commit is contained in:
Henri
2026-02-12 02:12:07 +02:00
parent 3e38e0e3cf
commit d9179334de
1 changed files with 166 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
src/layout/Navbar.svelte
View File

@@ -6,6 +6,7 @@
Section,
} from "$components";
import { navigate, getPath, currentLang, text, switchLang } from "$lib";
import { onDestroy } from "svelte";
// Icon imports (Lucide)
import Coffee from "lucide-svelte/icons/coffee";
@@ -16,11 +17,54 @@
import Bot from "lucide-svelte/icons/bot";
import HandHeart from "lucide-svelte/icons/hand-heart";
import Trophy from "lucide-svelte/icons/trophy";
import Menu from "lucide-svelte/icons/menu";
import X from "lucide-svelte/icons/x";
let mobileMenuOpen = false;
// Reactively control body scroll
$: if (typeof document !== 'undefined') {
if (mobileMenuOpen) {
document.body.style.overflow = 'hidden';
document.body.style.position = 'fixed';
document.body.style.width = '100%';
document.documentElement.style.overflow = 'hidden';
} else {
document.body.style.overflow = '';
document.body.style.position = '';
document.body.style.width = '';
document.documentElement.style.overflow = '';
}
}
// Cleanup on component destroy
onDestroy(() => {
if (typeof document !== 'undefined') {
document.body.style.overflow = '';
document.body.style.position = '';
document.body.style.width = '';
document.documentElement.style.overflow = '';
}
});
function toggleMobileMenu() {
mobileMenuOpen = !mobileMenuOpen;
}
function closeMobileMenu() {
mobileMenuOpen = false;
}
function handleNavigation(path, options = {}) {
navigate(path, options);
closeMobileMenu();
}
</script>
<Section className="text-white" background="off-black" padding="small">
<Grid>
<nav class="z-10 flex gap-4 justify-end text-xl">
<!-- Desktop Navigation -->
<nav class="z-10 hidden md:flex gap-4 justify-end text-xl">
<Dropdown
name={$text.nav.about}
buttonClass="rounded-[5px]"
@@ -69,5 +113,126 @@
>{$text.nav.helpdesk}
</Button>
</nav>
<!-- Mobile Hamburger Button -->
<button
on:click={toggleMobileMenu}
class="md:hidden ml-auto p-2 text-white hover:text-orange-500 transition-colors"
class:hidden={mobileMenuOpen}
aria-label="Toggle menu"
>
<Menu size={32} />
</button>
</Grid>
</Section>
<!-- Full Screen Mobile Menu -->
{#if mobileMenuOpen}
<div class="fixed inset-0 z-[100] bg-[var(--off-black)] md:hidden flex flex-col overflow-hidden">
<!-- Fixed Close Button - positioned to match hamburger with Section padding -->
<div class="absolute top-8 right-0 px-[var(--site-padding)]">
<button
on:click={closeMobileMenu}
class="ml-auto p-2 hover:text-orange-500 transition-colors flex"
aria-label="Close menu"
>
<X size={32} color="white" class="hover:stroke-orange-500" />
</button>
</div>
<!-- Menu Content -->
<nav class="flex-1 flex flex-col gap-6 px-8 pb-8 text-white text-xl justify-center">
<!-- About Section -->
<div class="border-b border-gray-700 pb-4">
<h3 class="text-2xl font-bold mb-4 text-orange-500">{$text.nav.about}</h3>
<div class="flex flex-col gap-3 pl-4">
<button
on:click={() => handleNavigation("/mis-teeme")}
class="text-left hover:text-orange-500 transition-colors flex items-center gap-2"
>
{$text.nav.aboutPages.info}
</button>
<button
on:click={() => handleNavigation("/liitu-meiega")}
class="text-left hover:text-orange-500 transition-colors flex items-center gap-2"
>
<Bot size={20} />
{$text.nav.aboutPages.join}
</button>
<button
on:click={() => handleNavigation("/mentorid")}
class="text-left hover:text-orange-500 transition-colors flex items-center gap-2"
>
<HandHeart size={20} />
{$text.nav.aboutPages.mentors}
</button>
<button
on:click={() => handleNavigation("/juhatus")}
class="text-left hover:text-orange-500 transition-colors flex items-center gap-2"
>
<Lectern size={20} />
{$text.nav.aboutPages.board}
</button>
</div>
</div>
<!-- Events Section -->
<div class="border-b border-gray-700 pb-4">
<h3 class="text-2xl font-bold mb-4 text-orange-500">{$text.nav.events}</h3>
<div class="flex flex-col gap-3 pl-4">
<button
on:click={() => handleNavigation("/kalender")}
class="text-left hover:text-orange-500 transition-colors flex items-center gap-2"
>
<CalendarClock size={20} />
{$text.nav.eventsPages.calendar}
</button>
<button
on:click={() => handleNavigation("https://asikarikas.ee/", { external: true })}
class="text-left hover:text-orange-500 transition-colors flex items-center gap-2"
>
<Trophy size={20} />
ASI Karikas
</button>
<button
on:click={() => handleNavigation("/mentorid")}
class="text-left hover:text-orange-500 transition-colors flex items-center gap-2"
>
<Presentation size={20} />
{$text.nav.eventsPages.workshops}
</button>
<button
on:click={() => handleNavigation("/rebased")}
class="text-left hover:text-orange-500 transition-colors flex items-center gap-2"
>
<Swords size={20} />
{$text.nav.eventsPages.fresh}
</button>
<button
on:click={() => handleNavigation("https://remondikohvik.lapikud.ee/", { external: true })}
class="text-left hover:text-orange-500 transition-colors flex items-center gap-2"
>
<Coffee size={20} />
{$text.nav.eventsPages.repair}
</button>
</div>
</div>
<!-- Direct Links -->
<div class="flex flex-col gap-4">
<button
on:click={() => handleNavigation("/kontakt")}
class="text-left text-2xl font-semibold hover:text-orange-500 transition-colors"
>
{$text.nav.contact}
</button>
<button
on:click={() => handleNavigation("/helpdesk")}
class="text-left text-2xl font-semibold hover:text-orange-500 transition-colors"
>
{$text.nav.helpdesk}
</button>
</div>
</nav>
</div>
{/if}