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

navbar changes + logo

Browse Source
This commit is contained in:
Henri
2026-02-16 19:52:27 +02:00
parent 0885de6e77
commit e8fd801f9b
5 changed files with 105 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
public/assets/LAP_logo_v3_transp.png → public/assets/LapLogo_black_white.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

BIN
public/assets/LapLogo_white_orange.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

4
src/components/layout/Section.svelte
View File

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

182
src/layout/Navbar.svelte
View File

@@ -10,7 +10,6 @@
// Icon imports (Lucide) // Icon imports (Lucide)
import Coffee from "lucide-svelte/icons/coffee"; import Coffee from "lucide-svelte/icons/coffee";
import CalendarClock from "lucide-svelte/icons/calendar-clock";
import Presentation from "lucide-svelte/icons/presentation"; import Presentation from "lucide-svelte/icons/presentation";
import Swords from "lucide-svelte/icons/swords"; import Swords from "lucide-svelte/icons/swords";
import Lectern from "lucide-svelte/icons/lectern"; import Lectern from "lucide-svelte/icons/lectern";
@@ -20,19 +19,32 @@
import Menu from "lucide-svelte/icons/menu"; import Menu from "lucide-svelte/icons/menu";
import X from "lucide-svelte/icons/x"; 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 // Reactively control body scroll
$: if (typeof document !== 'undefined') { $effect(() => {
if (mobileMenuOpen) { if (typeof document !== 'undefined') {
document.body.style.overflow = 'hidden'; if (mobileMenuOpen) {
document.documentElement.style.overflow = 'hidden'; document.body.style.overflow = 'hidden';
} else { document.documentElement.style.overflow = 'hidden';
document.body.style.overflow = ''; } else {
document.documentElement.style.overflow = ''; document.body.style.overflow = '';
document.documentElement.style.overflow = '';
}
} }
} });
onDestroy(() => { onDestroy(() => {
if (typeof document !== 'undefined') { if (typeof document !== 'undefined') {
@@ -56,6 +68,7 @@
function handleNavigation(path, options = {}) { function handleNavigation(path, options = {}) {
navigate(path, options); navigate(path, options);
currentPath = getPath();
closeMobileMenu(); closeMobileMenu();
} }
@@ -95,76 +108,87 @@
<Section className="text-white" background="off-black" padding="small"> <Section className="text-white" background="off-black" padding="small">
{#if $text && Object.keys($text).length > 0} {#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">
<!-- Desktop Navigation --> <!-- Logo -->
<nav class="z-10 hidden md:flex gap-4 justify-end text-xl"> {#if currentPath !== "/" && currentPath !== "/en"}
<Dropdown <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">
name={$text.about || 'Meist'} <Button onClick={() => handleNavigation("/")}>
buttonClass="rounded-[5px]" <img src="assets/LapLogo_white_orange.png" alt="Lapikud Logo" class="h-16" />
buttonHoverStyle="background-color:var(--orange); color:var(--black)" </Button>
panelClassName="bg-[var(--off-black)]" </div>
> {/if}
<Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("/lapikutest")}
>{$text.aboutPages.info}</Button
>
<Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("/tudengile")}
><Bot />{$text.aboutPages.join}</Button
>
<Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("/mentorid")}
><HandHeart />{$text.aboutPages.mentors}</Button
>
<Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("/juhatus")}
><Lectern />{$text.aboutPages.board}</Button
>
</Dropdown>
<Dropdown
name={$text.events}
buttonClass="rounded-[5px]"
buttonHoverStyle="background-color:var(--orange); color:var(--black)"
panelClassName="bg-[var(--off-black)]"
>
<Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("/koolitused")}
><Presentation />{$text.eventsPages.workshops}</Button
>
<Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("/rebased")}
><Swords />{$text.eventsPages.fresh}</Button
>
<Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" 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 })}
><Coffee />{$text.eventsPages.repair}</Button
>
</Dropdown>
<Button buttonHoverStyle="background-color:var(--orange); color:var(--black)" class="rounded-[5px]" onClick={() => navigate("/kontakt")}
>{$text.contact}
</Button>
<Button buttonHoverStyle="background-color:var(--orange); color:var(--black)" class="rounded-[5px]" onClick={() => navigate("/helpdesk")}
>{$text.helpdesk}
</Button>
<!-- Language Switcher --> <div class="flex items-center justify-end ml-auto w-full md:w-auto">
<Button <!-- Desktop Navigation -->
class="rounded-[5px] px-3 py-1 text-sm ml-2" <nav class="z-10 hidden md:flex gap-4 justify-end text-xl">
style="color: var(--orange)" <Dropdown
buttonHoverStyle="background-color:var(--orange); color:var(--black)" name={$text.about || 'Meist'}
onClick={() => switchLanguageRoute($currentLang === 'est' ? 'en' : 'est')} buttonClass="rounded-[5px]"
> buttonHoverStyle="background-color:var(--orange); color:var(--black)"
{$currentLang === 'est' ? 'EN' : 'EST'} panelClassName="bg-[var(--off-black)]"
</Button> >
</nav> <Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("/lapikutest")}
>{$text.aboutPages.info}</Button
>
<Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("/tudengile")}
><Bot />{$text.aboutPages.join}</Button
>
<Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("/mentorid")}
><HandHeart />{$text.aboutPages.mentors}</Button
>
<Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("/juhatus")}
><Lectern />{$text.aboutPages.board}</Button
>
</Dropdown>
<Dropdown
name={$text.events}
buttonClass="rounded-[5px]"
buttonHoverStyle="background-color:var(--orange); color:var(--black)"
panelClassName="bg-[var(--off-black)]"
>
<Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("/koolitused")}
><Presentation />{$text.eventsPages.workshops}</Button
>
<Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("/rebased")}
><Swords />{$text.eventsPages.fresh}</Button
>
<Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" 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 })}
><Coffee />{$text.eventsPages.repair}</Button
>
</Dropdown>
<Button buttonHoverStyle="background-color:var(--orange); color:var(--black)" class="rounded-[5px]" onClick={() => navigate("/kontakt")}
>{$text.contact}
</Button>
<Button buttonHoverStyle="background-color:var(--orange); color:var(--black)" class="rounded-[5px]" onClick={() => navigate("/helpdesk")}
>{$text.helpdesk}
</Button>
<!-- Mobile Hamburger Button --> <!-- Language Switcher -->
<Button <Button
onClick={toggleMobileMenu} class="rounded-[5px] px-3 py-1 text-sm ml-2"
class="md:hidden ml-auto p-2 text-white transition-colors bg-transparent" style="color: var(--orange)"
buttonHoverStyle="color: var(--orange)" buttonHoverStyle="background-color:var(--orange); color:var(--black)"
style="opacity: {mobileMenuOpen ? '0' : '1'}; pointer-events: {mobileMenuOpen ? 'none' : 'auto'};" onClick={() => switchLanguageRoute($currentLang === 'est' ? 'en' : 'est')}
aria-label="Toggle menu" >
> {$currentLang === 'est' ? 'EN' : 'EST'}
<Menu size={32} /> </Button>
</Button> </nav>
</div>
<!-- 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(--orange)"
style="opacity: {mobileMenuOpen ? '0' : '1'}; pointer-events: {mobileMenuOpen ? 'none' : 'auto'};"
aria-label="Toggle menu"
>
<Menu size={32} />
</Button>
</div>
</div>
{/if} {/if}
</Section> </Section>

3
src/routes/Home.svelte
View File

@@ -4,7 +4,6 @@
Grid, Grid,
Card, Card,
Center, Center,
Container,
} from "$components"; } from "$components";
import { onMount } from "svelte"; import { onMount } from "svelte";
import yaml from 'js-yaml'; import yaml from 'js-yaml';
@@ -29,7 +28,7 @@
<Section background="orange"> <Section background="orange">
<Grid> <Grid>
<Center> <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> </Center>
<p class="text-3xl leading-relaxed" style="padding: var(--space-4);"> <p class="text-3xl leading-relaxed" style="padding: var(--space-4);">
MTÜ Lapikud on Tallinna Tehnikaülikooli Tarkvaraarendusklubi, mis ühendab endisi MTÜ Lapikud on Tallinna Tehnikaülikooli Tarkvaraarendusklubi, mis ühendab endisi