LukeParke/website
1
0
Fork 0
mirror of https://github.com/LukeHagar/website.git synced 2025-12-10 12:57:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix mobile nav

Browse Source
This commit is contained in:
tglide
2023-09-07 19:39:40 +01:00
parent 690c01dac4
commit ec3eeecefe
7 changed files with 40 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/lib/components/MobileNav.svelte
View File

@@ -1,14 +1,6 @@
<script lang="ts">
import type { NavLink } from '$lib/layouts/Main.svelte';
const handleMenuClick = () => {
const gridHugeNavs = document.querySelector('.aw-grid-huge-navs');
const referencesMenu = document.querySelector('.aw-references-menu');
gridHugeNavs?.classList.toggle('is-open');
referencesMenu?.classList.remove('is-open');
};
export let open = false;
export let links: NavLink[];
</script>
@@ -17,6 +9,11 @@
<nav class="aw-side-nav aw-is-only-mobile" class:u-hide={!open}>
<div class="aw-side-nav-wrapper aw-u-padding-inline-16">
<div class="u-flex items-center u-gap-8">
<button class="aw-button is-secondary u-width-full-line">Sign Up</button>
<button class="aw-button u-width-full-line">Get Started</button>
</div>
<div class="aw-side-nav-scroll">
<section>
<ul>

8
src/lib/layouts/Main.svelte
View File

@@ -120,9 +120,11 @@
</a>
</div>
<div class="aw-mobile-header-end">
{#if !isMobileNavOpen}
<button class="aw-button">
<span class="text">Get Started</span>
</button>
{/if}
<button
class="aw-button is-text"
aria-label="open navigation"
@@ -140,10 +142,10 @@
<div class="aw-top-banner">
<div class="aw-top-banner-content aw-u-color-text-primary">
<span class="aw-caption-500">We are having lots of fun on</span>
<span class="aw-icon-discord" aria-hidden="true"></span>
<span class="aw-icon-discord" aria-hidden="true" />
<span class="aw-caption-500">Discord. Come and join us!</span>
<button class="aw-top-banner-button" aria-label="close discord message">
<span class="aw-icon-close" aria-hidden="true"></span>
<span class="aw-icon-close" aria-hidden="true" />
</button>
</div>
</div>
@@ -176,7 +178,6 @@
</nav>
</div>
<div class="aw-main-header-end">
<div class="u-flex u-gap-8">
<button class="aw-button is-text">
<span aria-hidden="true" class="aw-icon-star" />
<span class="text">Star on GitHub</span>
@@ -190,7 +191,6 @@
</div>
</div>
</div>
</div>
</header>
<MobileNav bind:open={isMobileNavOpen} links={navLinks} />

7
src/routes/+page.svelte
View File

@@ -37,11 +37,11 @@
<div class="aw-big-padding-section-level-2">
<section class="aw-container aw-u-padding-block-end-0">
<button class="aw-hero-banner-button aw-u-margin-block-end-24">
<span class="aw-icon-star" aria-hidden="true"></span>
<span class="aw-icon-star" aria-hidden="true" />
<span class="aw-caption-500">New</span>
<div class="aw-hero-banner-button-sep"></div>
<div class="aw-hero-banner-button-sep" />
<span class="aw-caption-400">Pricing Plans announced</span>
<span class="aw-icon-arrow-right" aria-hidden="true"></span>
<span class="aw-icon-arrow-right" aria-hidden="true" />
</button>
<div class="aw-hero is-horizontal">
<h1 class="aw-headline">
@@ -68,6 +68,7 @@
class="u-block"
src="/images/pages/homepage/dashboard.svg"
alt="console dashboard"
style="aspect-ratio: 16 / 9"
/>
</div>
</section>

2
src/scss/6-elements/_button.scss
View File

@@ -6,7 +6,7 @@
background: linear-gradient(135deg, hsl(var(--aw-color-pink-500)) 0%, hsl(var(--aw-color-pink-500)) 61%, hsl(var(--aw-color-secondary-100)) 100%);
background-origin: border-box;
display:flex; justify-content:center; align-items:center; align-self:start; gap:pxToRem(8);
display:flex; justify-content:center; align-items:center; gap:pxToRem(8);
padding-inline:pxToRem(14); padding-block:pxToRem(7); min-block-size:pxToRem(40);
border-radius:var(--m-border-radius); border:solid var(--m-border-size) transparent;
text-align:center; transition:var(--transition); user-select:none; color:hsl(var(--aw-color-white)); font-weight: 500;

2
src/scss/7-components/_main-header.scss
View File

@@ -11,7 +11,7 @@
&-wrapper { display:flex; flex-direction:column; gap:pxToRem(14); }
&-row { display:flex; }
&-start { display:flex; align-items:center; }
&-end { display:flex; margin-inline-start:auto; }
&-end { display:flex; margin-inline-start:auto; align-items: center; gap: pxToRem(8) }
.aw-logo { margin-inline-end:pxToRem(32); }
.#{$p}-top-banner { position:relative; inset-block-start: calc(var(--p-main-header-padding-block) * -1); }

6
src/scss/7-components/_mobile-header.scss
View File

@@ -7,9 +7,9 @@
position:sticky; z-index:20; inset-block-start:0; background-color:hsl(var(--p-body-bg-color));
display:flex; justify-content:space-between; align-items:center; gap:pxToRem(16);
border-block-end: solid 1px var(--p-mobile-header-border-color);
padding:pxToRem(20); padding-inline-end:0;
&-start { display:flex; }
&-end { display:flex; }
padding:pxToRem(20);
&-start { display:flex; align-items: center; }
&-end { display:flex; align-items: center; gap: pxToRem(8) }
&.is-transparent { background-color:transparent; backdrop-filter:blur(7.5px); }
@media #{$break3open} { display:none; }

11
src/scss/7-components/_side-nav.scss
View File

@@ -19,15 +19,24 @@
position:sticky; z-index:25; inset-block-start:pxToRem(80); inset-block-end:0;
block-size:calc(100vh - pxToRem(80));
.#{$p}-icon-button { transition:var(--transition); margin-block-end:pxToRem(-4); margin-inline-end:pxToRem(6); }
&-wrapper {
display:flex; flex-direction:column; block-size:100%; gap:pxToRem(16);
padding:pxToRem(16); padding-block-end:pxToRem(32);
background-color:hsl(var(--p-side-nav-bg-color)); transition:var(--transition);
}
&-scroll {
flex:1; overflow-y:scroll; overflow-x:hidden;
display:flex; flex-direction:column; gap:pxToRem(24);
padding-inline:pxToRem(16); margin-inline:pxToRem(-16);
padding-inline:pxToRem(16); margin-inline:pxToRem(-16); padding-block-start: pxToRem(32);
.#{$p}-is-only-mobile & {
border-block-start: 1px solid hsl(var(--aw-color-smooth));
}
}
&-header { margin-block-end:pxToRem(8); }
&-button {