ProjectSegfault/website
4
2
Fork 1
mirror of https://github.com/ProjectSegfault/website.git synced 2025-05-31 14:12:04 +05:30
Code Issues Projects Releases Wiki Activity

better navbar

Browse Source
This commit is contained in:
Akis
2023-02-03 19:55:33 +02:00
parent 926890b324
commit 3ff1e24e7c
74 changed files with 839 additions and 415 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/lib/Nav/Nav.svelte
View File

@ -1,8 +1,8 @@
<script lang="ts">
import ThemeToggle from "./ThemeToggle.svelte";
import ThemeToggle from "$lib/Nav/ThemeToggle.svelte";
import { page } from "$app/stores";
import { slide } from "svelte/transition";
import { quintOut } from 'svelte/easing';
import { slide } from "svelte/transition"
import { quintOut } from "svelte/easing";
$: currentPage = $page.url.pathname;
@ -14,15 +14,16 @@
$: showMenuButton = hasJS && isMobile;
$: menuOpen = !hasJS || hasJS && !isMobile;
$: menuOpen = !hasJS || (hasJS && !isMobile);
$: menuOpenMobile = isMobile && menuOpen;
$: showThemeToggle = hasJS;
const toggleMenu = () => menuOpen = !menuOpen;
const toggleMenu = () => (menuOpen = !menuOpen);
const handleNavigation = () => showMenuButton ? menuOpen = false : menuOpen = true;
const handleNavigation = () =>
showMenuButton ? (menuOpen = false) : (menuOpen = true);
const menus = [
{ name: "Instances", url: "/instances" },
@ -48,13 +49,17 @@
<svelte:window bind:innerWidth />
<nav
class="bg-primary {menuOpenMobile ? "border-none" : "border-b border-b-solid border-b-grey"} {isMobile ? "py-2" : ""} flex px-2 flex-col justify-between nav:(flex-row items-center)"
class:hasJSNav={hasJS}
class:noJSNav={!hasJS}
class="bg-primary {menuOpenMobile
? 'border-none'
: 'border-b border-b-solid border-b-grey'} {isMobile
? 'py-2'
: ''} flex px-2 flex-col justify-between nav:(flex-row items-center) {hasJS
? 'sticky top-0 z-50'
: 'border-b border-b-solid border-b-grey'}"
>
<div class="flex flex-row items-center justify-between">
<a
class="flex items-center decoration-none text-text gap-2 transition-opacity duration-250 hover:opacity-80"
class="flex items-center decoration-none text-text gap-2 transition-filter duration-250"
href="/"
>
<img
@ -68,17 +73,21 @@
{#if showMenuButton}
<button
on:click={toggleMenu}
class="{menuOpen ? "i-ic:outline-close" : "i-ic:outline-menu"} h-4 w-4 cursor-pointer mr-2"
class="{menuOpen
? 'i-ic:outline-close'
: 'i-ic:outline-menu'} h-4 w-4 cursor-pointer mr-2"
/>
{/if}
</div>
{#if menuOpen}
<div
class="links {isMobile ? "!children:py-2" : ""}"
class:hasJS={hasJS}
class:noJS={!hasJS}
transition:slide="{{duration: 300, easing: quintOut }}"
class="links flex flex-row gap-2 {isMobile
? '!children:py-2'
: ''} {hasJS
? 'lt-nav:(flex flex-col pt-2 gap-2 fixed bg-primary w-full left-0 top-[2.75rem] p-2 z-50 border-b-solid border-b border-b-grey shadow shadow-secondary)'
: 'lt-nav:(grid grid-cols-2 gap-2 pt-2 w-fit)'}"
transition:slide={{ duration: 300, easing: quintOut }}
>
{#each menus as { url, name, external }}
<a
@ -88,9 +97,7 @@
href={url}
on:click={handleNavigation}
>{#if external}
<div
class="i-ic:outline-open-in-new mr-2 h-4 w-4"
/>
<div class="i-ic:outline-open-in-new mr-2 h-4 w-4" />
{/if}
{name}
</a>
@ -124,52 +131,14 @@
}
.links > * {
@apply py-4 px-2 cursor-pointer text-text decoration-none transition-color duration-250 text-sm font-500 flex items-center hover\:(text-accent);
@apply py-4 px-2 text-text decoration-none transition-filter duration-250 text-sm flex items-center;
}
.icon > span {
@apply flex text-sm nav\:hidden;
@apply text-sm nav\:hidden;
}
.icon {
@apply flex flex-row items-center gap-2 text-base;
}
.hasJS {
@apply flex flex-col pt-2 gap-2 fixed bg-primary w-full left-0 top-[2.75rem] p-2 z-50 border-b-solid border-b border-b-grey shadow shadow-secondary;
}
.noJS {
@apply grid grid-cols-2 gap-2 pt-2 w-fit;
}
.hasJSNav {
@apply sticky top-0 z-50;
}
.noJSNav {
@apply border-b border-b-solid border-b-grey;
}
@media (min-width: 1090px) {
.hasJS {
flex-direction: row;
padding-top: 0;
position: initial;
background-color: initial;
width: initial;
left: initial;
top: initial;
padding: initial;
z-index: initial;
border-bottom: initial;
box-shadow: initial;
}
.noJS {
display: flex;
flex-direction: row;
padding-top: 0;
}
@apply flex items-center gap-2 text-base;
}
</style>