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