promiset/lapikud.github.io
1
0
Fork 0
forked from lapikud/lapikud.github.io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

about us section ready

Browse Source
This commit is contained in:
Henri
2026-04-05 22:54:23 +03:00
parent eb459ed4b6
commit 884281bd58
18 changed files with 380 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/layout/Navbar.svelte
View File

@@ -103,16 +103,35 @@
.menu-closing {
animation: collapseToButton 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.mobile-menu-overlay {
height: 100vh;
max-height: 100vh;
}
@supports (height: 100svh) {
.mobile-menu-overlay {
height: 100svh;
max-height: 100svh;
}
}
@supports (height: 100dvh) {
.mobile-menu-overlay {
height: 100dvh;
max-height: 100dvh;
}
}
</style>
<header class="fixed inset-x-0 top-0 z-50 text-white">
<Container maxWidth={true} center={false} className="py-0">
<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("/")}>
<Button onClick={() => handleNavigation("/")} class="border-transparent">
<img src="assets/LapLogo_black_white.png" alt="Lapikud Logo" class="h-14" />
</Button>
</div>
@@ -123,47 +142,47 @@
<nav class="z-10 hidden md:flex gap-1 justify-end text-lg">
<Dropdown
name={$text.about || 'Meist'}
buttonClass="rounded-[5px] hover:text-white"
panelClassName="bg-white text-black"
buttonClass="rounded-[5px] hover:text-white border-transparent"
panelClass="bg-white text-black"
>
<Button class="rounded-[5px] bg-transparent hover:text-orange-500" onClick={() => navigate("/lapikutest")}
<Button class="rounded-[5px] bg-transparent hover:text-orange-500 border-transparent" onClick={() => navigate("/lapikutest")}
>{$text.aboutPages.info}</Button
>
<Button class="rounded-[5px] bg-transparent hover:text-orange-500" onClick={() => navigate("/tudengile")}
<Button class="rounded-[5px] bg-transparent hover:text-orange-500 border-transparent" onClick={() => navigate("/tudengile")}
><Bot />{$text.aboutPages.join}</Button
>
<Button class="rounded-[5px] bg-transparent hover:text-orange-500" onClick={() => navigate("/mentorid")}
<Button class="rounded-[5px] bg-transparent hover:text-orange-500 border-transparent" onClick={() => navigate("/mentorid")}
><HandHeart />{$text.aboutPages.mentors}</Button
>
<Button class="rounded-[5px] bg-transparent hover:text-orange-500" onClick={() => navigate("/juhatus")}
<Button class="rounded-[5px] bg-transparent hover:text-orange-500 border-transparent" onClick={() => navigate("/juhatus")}
><Lectern />{$text.aboutPages.board}</Button
>
</Dropdown>
<Dropdown
name={$text.events}
buttonClass="rounded-[5px] hover:text-white"
panelClassName="bg-white text-black"
buttonClass="rounded-[5px] hover:text-white border-transparent"
panelClass="bg-white text-black"
>
<Button class="rounded-[5px] bg-transparent hover:text-orange-500" onClick={() => navigate("/koolitused")}
<Button class="rounded-[5px] bg-transparent hover:text-orange-500 border-transparent" onClick={() => navigate("/koolitused")}
><Presentation />{$text.eventsPages.workshops}</Button
>
<Button class="rounded-[5px] bg-transparent hover:text-orange-500" onClick={() => navigate("https://asikarikas.ee/", { external: true })}
<Button class="rounded-[5px] bg-transparent hover:text-orange-500 border-transparent" onClick={() => navigate("https://asikarikas.ee/", { external: true })}
><Trophy />ASI Karikas</Button
>
<Button class="rounded-[5px] bg-transparent hover:text-orange-500" onClick={() => navigate("https://remondikohvik.lapikud.ee/", { external: true })}
<Button class="rounded-[5px] bg-transparent hover:text-orange-500 border-transparent" onClick={() => navigate("https://remondikohvik.lapikud.ee/", { external: true })}
><Coffee />{$text.eventsPages.repair}</Button
>
</Dropdown>
<Button class="rounded-[5px] hover:text-white" onClick={() => navigate("/kontakt")}
<Button class="rounded-[5px] hover:text-white border-transparent" onClick={() => navigate("/kontakt")}
>{$text.contact}
</Button>
<Button class="rounded-[5px] hover:text-white" onClick={() => navigate("/helpdesk")}
<Button class="rounded-[5px] hover:text-white border-transparent" onClick={() => navigate("/helpdesk")}
>{$text.helpdesk}
</Button>
<!-- Language Switcher -->
<Button
class="rounded-[5px] px-3 py-1 text-sm ml-4 hover:text-white"
class="rounded-[5px] px-3 py-1 text-sm ml-4 hover:text-white border-transparent"
onClick={() => switchLanguageRoute($currentLang === 'est' ? 'en' : 'est')}
>
{$currentLang === 'est' ? 'EN' : 'EST'}
@@ -174,8 +193,8 @@
{#if !mobileMenuOpen}
<Button
onClick={toggleMobileMenu}
class="md:hidden p-2 text-white transition-colors bg-transparent absolute right-0 hover:text-white"
aria-label="Toggle menu"
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>
@@ -189,15 +208,16 @@
<!-- Full Screen Mobile Menu -->
{#if mobileMenuOpen}
<div
class="fixed inset-0 z-100 bg-black/95 md:hidden overflow-y-auto"
class="mobile-menu-overlay fixed inset-0 z-100 bg-black/95 mobile-only overflow-y-auto"
data-animation
class:menu-opening={!isClosing}
class:menu-closing={isClosing}
>
<Stack className="min-h-full">
<Stack class="min-h-full">
<div class="absolute top-6 right-4">
<Button
onClick={closeMobileMenu}
class="ml-auto p-2 transition-colors flex bg-transparent hover:text-orange-500"
class="ml-auto p-2 transition-colors flex bg-transparent hover:text-orange-500 border-transparent"
aria-label="Close menu"
>
<X size={32} color="white" />
@@ -205,34 +225,34 @@
</div>
<!-- Menu Content -->
<Stack gap="gap-5" className="flex-1 px-8 pt-24 pb-12 text-white text-xl">
<Stack gap="gap-5" class="flex-1 px-8 pt-24 pb-12 text-white text-xl">
<!-- About Section -->
<Stack gap="gap-3">
<h3 class="text-2xl font-bold text-orange-500">{$text.about}</h3>
<Stack gap="gap-2" className="pl-4">
<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"
class="text-left transition-colors flex items-center gap-2 bg-transparent hover:text-orange-500 border-transparent"
>
{$text.aboutPages.info}
</Button>
<Button
onClick={() => handleNavigation("/tudengile")}
class="text-left transition-colors flex items-center gap-2 bg-transparent hover:text-orange-500"
class="text-left transition-colors flex items-center gap-2 bg-transparent hover:text-orange-500 border-transparent"
>
<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"
class="text-left transition-colors flex items-center gap-2 bg-transparent hover:text-orange-500 border-transparent"
>
<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"
class="text-left transition-colors flex items-center gap-2 bg-transparent hover:text-orange-500 border-transparent"
>
<Lectern size={20} />
{$text.aboutPages.board}
@@ -243,24 +263,24 @@
<!-- Events Section -->
<Stack gap="gap-3" >
<h3 class="text-2xl font-bold text-orange-500">{$text.events}</h3>
<Stack gap="gap-2" className="pl-4">
<Stack gap="gap-2" class="pl-4">
<Button
onClick={() => handleNavigation("/koolitused")}
class="text-left transition-colors flex items-center gap-2 bg-transparent hover:text-orange-500"
class="text-left transition-colors flex items-center gap-2 bg-transparent hover:text-orange-500 border-transparent"
>
<Presentation size={20} />
{$text.eventsPages.workshops}
</Button>
<Button
onClick={() => handleNavigation("https://asikarikas.ee/", { external: true })}
class="text-left transition-colors flex items-center gap-2 bg-transparent hover:text-orange-500"
class="text-left transition-colors flex items-center gap-2 bg-transparent hover:text-orange-500 border-transparent"
>
<Trophy size={20} />
ASI Karikas
</Button>
<Button
onClick={() => handleNavigation("https://remondikohvik.lapikud.ee/", { external: true })}
class="text-left transition-colors flex items-center gap-2 bg-transparent hover:text-orange-500"
class="text-left transition-colors flex items-center gap-2 bg-transparent hover:text-orange-500 border-transparent"
>
<Coffee size={20} />
{$text.eventsPages.repair}
@@ -272,13 +292,13 @@
<Stack gap="gap-3">
<Button
onClick={() => handleNavigation("/kontakt")}
class="text-left text-2xl font-semibold transition-colors bg-transparent hover:text-orange-500"
class="text-left text-2xl font-semibold transition-colors bg-transparent hover:text-orange-500 border-transparent"
>
{$text.contact}
</Button>
<Button
onClick={() => handleNavigation("/helpdesk")}
class="text-left text-2xl font-semibold transition-colors bg-transparent hover:text-orange-500"
class="text-left text-2xl font-semibold transition-colors bg-transparent hover:text-orange-500 border-transparent"
>
{$text.helpdesk}
</Button>
@@ -286,7 +306,7 @@
<!-- Language Switcher -->
<Stack gap="gap-3">
<Button
class="w-full rounded-lg py-3 text-lg bg-orange-500 text-black"
class="w-full rounded-lg py-3 text-lg bg-orange-500 text-black border-transparent"
onClick={() => handleLanguageSwitch($currentLang === 'est' ? 'en' : 'est')}
>
{$currentLang === 'est' ? 'English' : 'Eesti'}