notkaramel/ECSESS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Announcement on navbar

Browse Source
This commit is contained in:
Antoine Phan
2026-03-02 00:09:21 -05:00
parent db31c64049
commit f7d8c4f945
1 changed files with 54 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/components/layout/NavBar.svelte
View File

@@ -4,32 +4,53 @@
import { Menu } from '@lucide/svelte'; import { Menu } from '@lucide/svelte';
import { slide } from 'svelte/transition'; import { slide } from 'svelte/transition';
let menuHidden = $state(true); let menuHidden = $state(true);
const announcementIntro = 'ECSESS Election: Nomination period is happening! See more info: ';
const announcementLinkUrl = 'https://ecsess.mcgilleus.ca/join';
const announcementLinkText = 'ecsess.mcgilleus.ca/join';
</script> </script>
<nav class="bg-ecsess-black text-ecsess-100 sticky w-full py-1"> <div class="sticky top-0 z-40 w-full">
<!-- Small screens --> <nav class="bg-ecsess-black text-ecsess-100 w-full py-1">
<div class="block md:hidden"> <!-- Small screens -->
<div class="mx-4 flex items-center-safe justify-between"> <div class="block md:hidden">
<a href="/"> <div class="mx-4 flex items-center-safe justify-between">
<img src={ECSESS} alt="ECSESS Logo" class="w-20 p-2" /> <a href="/">
</a> <img src={ECSESS} alt="ECSESS Logo" class="w-20 p-2" />
</a>
<button <button
type="button" type="button"
class="bg-ecsess-black-hover hover:bg-ecsess-800 active:bg-ecsess-900 grid size-10 place-items-center rounded-md transition-colors ease-in-out" class="bg-ecsess-black-hover hover:bg-ecsess-800 active:bg-ecsess-900 grid size-10 place-items-center rounded-md transition-colors ease-in-out"
onclick={() => { onclick={() => {
menuHidden = !menuHidden; menuHidden = !menuHidden;
}} }}
> >
<Menu class="size-6 transition-transform duration-300 ease-in-out" /> <Menu class="size-6 transition-transform duration-300 ease-in-out" />
</button> </button>
</div>
{#if !menuHidden}
<div
class="bg-ecsess-900 border-ecsess-700 mx-2 mb-2 flex w-auto flex-col gap-1 rounded-lg border-2 px-2 py-2 shadow-lg"
transition:slide
>
<NavButton href="/">Home</NavButton>
<NavButton href="/council">Meet the council</NavButton>
<NavButton href="/events">Events</NavButton>
<NavButton href="/resources">Resources</NavButton>
<NavButton href="/devteam">Dev Team</NavButton>
<NavButton href="/join">Join ECSESS</NavButton>
</div>
{/if}
</div> </div>
{#if !menuHidden} <!-- Medium and larger screens -->
<div <div class="hidden md:block">
class="bg-ecsess-900 border-ecsess-700 mx-2 mb-2 flex w-auto flex-col gap-1 rounded-lg border-2 px-2 py-2 shadow-lg" <div class="flex place-content-center items-end">
transition:slide <a href="/">
> <img src={ECSESS} alt="ECSESS Logo" class="h-12 p-2" />
</a>
<NavButton href="/">Home</NavButton> <NavButton href="/">Home</NavButton>
<NavButton href="/council">Meet the council</NavButton> <NavButton href="/council">Meet the council</NavButton>
<NavButton href="/events">Events</NavButton> <NavButton href="/events">Events</NavButton>
@@ -37,21 +58,17 @@
<NavButton href="/devteam">Dev Team</NavButton> <NavButton href="/devteam">Dev Team</NavButton>
<NavButton href="/join">Join ECSESS</NavButton> <NavButton href="/join">Join ECSESS</NavButton>
</div> </div>
{/if}
</div>
<!-- Medium and larger screens -->
<div class="hidden md:block">
<div class="flex place-content-center items-end">
<a href="/">
<img src={ECSESS} alt="ECSESS Logo" class="h-12 p-2" />
</a>
<NavButton href="/">Home</NavButton>
<NavButton href="/council">Meet the council</NavButton>
<NavButton href="/events">Events</NavButton>
<NavButton href="/resources">Resources</NavButton>
<NavButton href="/devteam">Dev Team</NavButton>
<NavButton href="/join">Join ECSESS</NavButton>
</div> </div>
</nav>
<!-- Small announcement underneath navbar -->
<div class="border-ecsess-black bg-ecsess-800 border-b px-4 py-2 shadow-sm" role="alert">
<p class="text-ecsess-100 text-center text-sm font-medium md:text-base">
{announcementIntro}<a
href={announcementLinkUrl}
class="text-ecsess-50 decoration-ecsess-400 hover:decoration-ecsess-300 underline underline-offset-2"
>
{announcementLinkText}
</a>
</p>
</div> </div>
</nav> </div>