0xMRTT/webcompile
1
0
Fork 0
forked from ProjectSegfault/website
Code Pull Requests Activity

fix navbar styles

Browse Source
This commit is contained in:
Akis 2022-12-31 21:24:03 +02:00
parent dcf9e84322
commit 817cd937a6
Signed by untrusted user: akis
GPG Key ID: 267BF5C6677944ED
1 changed files with 16 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/lib/Nav.svelte
View File

@ -6,8 +6,6 @@
let showMenuButton = false;
let listStyles = "";
let innerWidth: number = 0;
$: showMenuButton = innerWidth < 1030;
@ -49,7 +47,6 @@
menuOpen = true;
showMenuButton = false;
showThemeToggle = false;
listStyles = "list-styles";
}
</script>
@ -81,7 +78,9 @@
{#if menuOpen}
<div
class="{listStyles} flex flex-col pt-2 nav:(flex-row pt-0) gap-2 links"
class="links"
class:hasJS={typeof Window !== "undefined"}
class:noJS={typeof Window === "undefined"}
>
{#each menus as { url, name, external }}
<a
@ -139,12 +138,21 @@
@apply flex flex-row items-center gap-2;
}
:global(.list-styles) {
@apply grid grid-cols-2 gap-2 w-fit links;
.hasJS {
@apply flex flex-col pt-2 gap-2;
}
@media screen and (min-width: 1030px) {
:global(.list-styles) {
.noJS {
@apply grid grid-cols-2 gap-2 pt-2 w-fit;
}
@media (min-width: 1030px) {
.hasJS {
flex-direction: row;
padding-top: 0;
}
.noJS {
display: flex;
flex-direction: row;
padding-top: 0;