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

components and tailwind rework

Browse Source
This commit is contained in:
Henri
2026-03-05 16:43:56 +02:00
parent 4571d22644
commit 1b704c7cc4
19 changed files with 257 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/layout/Navbar.svelte
View File

@@ -105,7 +105,7 @@
}
</style>
<Section className="text-black" background="orange" padding="tight">
<Section className="text-black" bg="bg-orange-500" padding="tight">
{#if $text && Object.keys($text).length > 0}
<div class="flex items-center w-full relative min-h-12">
<!-- Logo -->
@@ -122,50 +122,47 @@
<nav class="z-10 hidden md:flex gap-4 justify-end text-xl">
<Dropdown
name={$text.about || 'Meist'}
buttonClass="rounded-[5px]"
buttonHoverStyle="color:var(--white)"
panelClassName="bg-[var(--white)] text-[var(--black)]"
buttonClass="rounded-[5px] hover:text-white"
panelClassName="bg-white text-black"
>
<Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("/lapikutest")}
<Button class="rounded-[5px] bg-transparent hover:text-orange-500" onClick={() => navigate("/lapikutest")}
>{$text.aboutPages.info}</Button
>
<Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("/tudengile")}
<Button class="rounded-[5px] bg-transparent hover:text-orange-500" onClick={() => navigate("/tudengile")}
><Bot />{$text.aboutPages.join}</Button
>
<Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("/mentorid")}
<Button class="rounded-[5px] bg-transparent hover:text-orange-500" onClick={() => navigate("/mentorid")}
><HandHeart />{$text.aboutPages.mentors}</Button
>
<Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("/juhatus")}
<Button class="rounded-[5px] bg-transparent hover:text-orange-500" onClick={() => navigate("/juhatus")}
><Lectern />{$text.aboutPages.board}</Button
>
</Dropdown>
<Dropdown
name={$text.events}
buttonClass="rounded-[5px]"
buttonHoverStyle="color:var(--white)"
panelClassName="bg-[var(--white)] text-[var(--black)]"
buttonClass="rounded-[5px] hover:text-white"
panelClassName="bg-white text-black"
>
<Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("/koolitused")}
<Button class="rounded-[5px] bg-transparent hover:text-orange-500" onClick={() => navigate("/koolitused")}
><Presentation />{$text.eventsPages.workshops}</Button
>
<Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("https://asikarikas.ee/", { external: true })}
<Button class="rounded-[5px] bg-transparent hover:text-orange-500" onClick={() => navigate("https://asikarikas.ee/", { external: true })}
><Trophy />ASI Karikas</Button
>
<Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("https://remondikohvik.lapikud.ee/", { external: true })}
<Button class="rounded-[5px] bg-transparent hover:text-orange-500" onClick={() => navigate("https://remondikohvik.lapikud.ee/", { external: true })}
><Coffee />{$text.eventsPages.repair}</Button
>
</Dropdown>
<Button buttonHoverStyle="color:var(--white)" class="rounded-[5px]" onClick={() => navigate("/kontakt")}
<Button class="rounded-[5px] hover:text-white" onClick={() => navigate("/kontakt")}
>{$text.contact}
</Button>
<Button buttonHoverStyle="color:var(--white)" class="rounded-[5px]" onClick={() => navigate("/helpdesk")}
<Button class="rounded-[5px] hover:text-white" onClick={() => navigate("/helpdesk")}
>{$text.helpdesk}
</Button>
<!-- Language Switcher -->
<Button
class="rounded-[5px] px-3 py-1 text-sm ml-2"
buttonHoverStyle="color:var(--white)"
class="rounded-[5px] px-3 py-1 text-sm ml-2 hover:text-white"
onClick={() => switchLanguageRoute($currentLang === 'est' ? 'en' : 'est')}
>
{$currentLang === 'est' ? 'EN' : 'EST'}
@@ -175,8 +172,7 @@
<!-- Mobile Hamburger Button - Fixed position -->
<Button
onClick={toggleMobileMenu}
class="md:hidden p-2 text-white transition-colors bg-transparent absolute right-0"
buttonHoverStyle="color: var(--white)"
class="md:hidden p-2 text-white transition-colors bg-transparent absolute right-0 hover:text-white"
style="opacity: {mobileMenuOpen ? '0' : '1'}; pointer-events: {mobileMenuOpen ? 'none' : 'auto'};"
aria-label="Toggle menu"
>
@@ -198,8 +194,7 @@
<div class="absolute top-8 right-0 px-(--site-padding)">
<Button
onClick={closeMobileMenu}
class="ml-auto p-2 transition-colors flex bg-transparent"
buttonHoverStyle="color: var(--orange)"
class="ml-auto p-2 transition-colors flex bg-transparent hover:text-orange-500"
aria-label="Close menu"
>
<X size={32} color="white" />
@@ -207,38 +202,34 @@
</div>
<!-- Menu Content -->
<Stack gap="var(--space-5)" className="flex-1 px-8 pt-24 pb-12 text-white text-xl">
<Stack gap="gap-5" className="flex-1 px-8 pt-24 pb-12 text-white text-xl">
<!-- About Section -->
<Stack gap="var(--space-3)">
<h3 class="text-2xl font-bold" style="color: var(--orange)">{$text.about}</h3>
<Stack gap="var(--space-2)" className="pl-4">
<Stack gap="gap-3">
<h3 class="text-2xl font-bold text-orange-500">{$text.about}</h3>
<Stack gap="gap-2" className="pl-4">
<Button
onClick={() => handleNavigation("/lapikutest")}
class="text-left transition-colors flex items-center gap-2 bg-transparent"
buttonHoverStyle="color: var(--orange)"
class="text-left transition-colors flex items-center gap-2 bg-transparent hover:text-orange-500"
>
{$text.aboutPages.info}
</Button>
<Button
onClick={() => handleNavigation("/tudengile")}
class="text-left transition-colors flex items-center gap-2 bg-transparent"
buttonHoverStyle="color: var(--orange)"
class="text-left transition-colors flex items-center gap-2 bg-transparent 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"
buttonHoverStyle="color: var(--orange)"
class="text-left transition-colors flex items-center gap-2 bg-transparent 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"
buttonHoverStyle="color: var(--orange)"
class="text-left transition-colors flex items-center gap-2 bg-transparent hover:text-orange-500"
>
<Lectern size={20} />
{$text.aboutPages.board}
@@ -247,29 +238,26 @@
</Stack>
<!-- Events Section -->
<Stack gap="var(--space-3)" >
<h3 class="text-2xl font-bold" style="color: var(--orange)">{$text.events}</h3>
<Stack gap="var(--space-2)" className="pl-4">
<Stack gap="gap-3" >
<h3 class="text-2xl font-bold text-orange-500">{$text.events}</h3>
<Stack gap="gap-2" className="pl-4">
<Button
onClick={() => handleNavigation("/mentorid")}
class="text-left transition-colors flex items-center gap-2 bg-transparent"
buttonHoverStyle="color: var(--orange)"
class="text-left transition-colors flex items-center gap-2 bg-transparent hover:text-orange-500"
>
<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"
buttonHoverStyle="color: var(--orange)"
class="text-left transition-colors flex items-center gap-2 bg-transparent hover:text-orange-500"
>
<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"
buttonHoverStyle="color: var(--orange)"
class="text-left transition-colors flex items-center gap-2 bg-transparent hover:text-orange-500"
>
<Coffee size={20} />
{$text.eventsPages.repair}
@@ -278,27 +266,24 @@
</Stack>
<!-- Direct Links -->
<Stack gap="var(--space-3)">
<Stack gap="gap-3">
<Button
onClick={() => handleNavigation("/kontakt")}
class="text-left text-2xl font-semibold transition-colors bg-transparent"
buttonHoverStyle="color: var(--orange)"
class="text-left text-2xl font-semibold transition-colors bg-transparent hover:text-orange-500"
>
{$text.contact}
</Button>
<Button
onClick={() => handleNavigation("/helpdesk")}
class="text-left text-2xl font-semibold transition-colors bg-transparent"
buttonHoverStyle="color: var(--orange)"
class="text-left text-2xl font-semibold transition-colors bg-transparent hover:text-orange-500"
>
{$text.helpdesk}
</Button>
</Stack>
<!-- Language Switcher -->
<Stack gap="var(--space-3)">
<Stack gap="gap-3">
<Button
class="w-full rounded-lg py-3 text-lg"
style="background-color: var(--orange); color: var(--black)"
class="w-full rounded-lg py-3 text-lg bg-orange-500 text-black"
onClick={() => handleLanguageSwitch($currentLang === 'est' ? 'en' : 'est')}
>
{$currentLang === 'est' ? 'English' : 'Eesti'}