lapikud/lapikud.github.io
2
0
Fork 1
mirror of https://github.com/Lapikud/lapikud.github.io.git synced 2026-08-08 20:39: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 = {
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)">

180
src/layout/Navbar.svelte
View File

@@ -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,19 +19,32 @@
import Menu from "lucide-svelte/icons/menu";
import X from "lucide-svelte/icons/x";
let mobileMenuOpen = false;
let isClosing = false;
let mobileMenuOpen = $state(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') {
if (mobileMenuOpen) {
document.body.style.overflow = 'hidden';
document.documentElement.style.overflow = 'hidden';
} else {
document.body.style.overflow = '';
document.documentElement.style.overflow = '';
$effect(() => {
if (typeof document !== 'undefined') {
if (mobileMenuOpen) {
document.body.style.overflow = 'hidden';
document.documentElement.style.overflow = 'hidden';
} else {
document.body.style.overflow = '';
document.documentElement.style.overflow = '';
}
}
}
});
onDestroy(() => {
if (typeof document !== 'undefined') {
@@ -56,6 +68,7 @@
function handleNavigation(path, options = {}) {
navigate(path, options);
currentPath = getPath();
closeMobileMenu();
}
@@ -95,76 +108,87 @@
<Section className="text-white" background="off-black" padding="small">
{#if $text && Object.keys($text).length > 0}
<div class="flex items-center justify-end">
<!-- Desktop Navigation -->
<nav class="z-10 hidden md:flex gap-4 justify-end text-xl">
<Dropdown
name={$text.about || 'Meist'}
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("/lapikutest")}
>{$text.aboutPages.info}</Button
<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
name={$text.about || 'Meist'}
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("/tudengile")}
><Bot />{$text.aboutPages.join}</Button
<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("/mentorid")}
><HandHeart />{$text.aboutPages.mentors}</Button
<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 -->
<Button
class="rounded-[5px] px-3 py-1 text-sm ml-2"
style="color: var(--orange)"
buttonHoverStyle="background-color:var(--orange); color:var(--black)"
onClick={() => switchLanguageRoute($currentLang === 'est' ? 'en' : 'est')}
>
<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 -->
<Button
class="rounded-[5px] px-3 py-1 text-sm ml-2"
style="color: var(--orange)"
buttonHoverStyle="background-color:var(--orange); color:var(--black)"
onClick={() => switchLanguageRoute($currentLang === 'est' ? 'en' : 'est')}
>
{$currentLang === 'est' ? 'EN' : 'EST'}
</Button>
</nav>
{$currentLang === 'est' ? 'EN' : 'EST'}
</Button>
</nav>
<!-- Mobile Hamburger Button -->
<Button
onClick={toggleMobileMenu}
class="md:hidden ml-auto p-2 text-white transition-colors bg-transparent"
buttonHoverStyle="color: var(--orange)"
style="opacity: {mobileMenuOpen ? '0' : '1'}; pointer-events: {mobileMenuOpen ? 'none' : 'auto'};"
aria-label="Toggle menu"
>
<Menu size={32} />
</Button>
</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}
</Section>
@@ -296,4 +320,4 @@
</Stack>
</Stack>
</div>
{/if}
{/if}

3
src/routes/Home.svelte
View File

@@ -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