ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-04-30 06:34:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor(NavHost): use same markup for mobile and desktop

Browse Source
This commit is contained in:
Ax333l 2022-12-27 15:31:09 +01:00
parent 1881f6c903
commit f0f502afc6
No known key found for this signature in database
GPG Key ID: D2B4D85271127D23
1 changed files with 56 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/layout/Navbar/NavHost.svelte
View File

@ -40,39 +40,19 @@
<svelte:window bind:scrollY={y} /> <svelte:window bind:scrollY={y} />
<nav class:scrolled={y > 10}> <nav class:scrolled={y > 10}>
<button class="menu-btn mobile" on:click={() => (menuOpen = !menuOpen)} class:open={menuOpen}> <button
class="menu-btn mobile-only"
on:click={() => (menuOpen = !menuOpen)}
class:open={menuOpen}
>
<span class="menu-btn__burger" /> <span class="menu-btn__burger" />
</button> </button>
<a href="/" id="logo"><img src="/logo.svg" alt="ReVanced Logo" /></a> <a href="/" id="logo"><img src="/logo.svg" alt="ReVanced Logo" /></a>
<div class="desktop"> {#key menuOpen}
<div id="main-navigation">
<div class="nav-buttons">
<Navigation href="/">Home</Navigation>
<Navigation href="/download">Download</Navigation>
<Navigation href="/patches">Patches</Navigation>
<div hidden>
<!-- This is just temporary so the build doesn't fail -->
<Navigation href="/docs">Docs</Navigation>
</div>
<Navigation href="/contributors">Contributors</Navigation>
</div>
</div>
<div id="secondary">
<button on:click={() => (modalOpen = !modalOpen)}>
<Svg viewBoxHeight={24} svgHeight={20}>
<path
d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.09-.16-.26-.25-.44-.25-.06 0-.12.01-.17.03l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.06-.02-.12-.03-.18-.03-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.09.16.26.25.44.25.06 0 .12-.01.17-.03l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-1.98-1.71c.04.31.05.52.05.73 0 .21-.02.43-.05.73l-.14 1.13.89.7 1.08.84-.7 1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2 1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21 1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21 1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16 1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14 1.13zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
/>
</Svg>
</button>
</div>
</div>
{#if menuOpen}
<div class="mobile">
<div <div
class="nav-wrapper" class="nav-wrapper"
class:desktop-only={!menuOpen}
transition:horizontalSlide={{ direction: 'inline', easing: expoOut, duration: 400 }} transition:horizontalSlide={{ direction: 'inline', easing: expoOut, duration: 400 }}
> >
<div id="main-navigation"> <div id="main-navigation">
@ -97,13 +77,15 @@
</button> </button>
</div> </div>
</div> </div>
{/key}
{#if menuOpen}
<div <div
class="overlay" class="overlay mobile-only"
transition:fade={{ duration: 350 }} transition:fade={{ duration: 350 }}
on:click={() => (menuOpen = !menuOpen)} on:click={() => (menuOpen = !menuOpen)}
on:keypress={() => (menuOpen = !menuOpen)} on:keypress={() => (menuOpen = !menuOpen)}
/> />
</div>
{/if} {/if}
</nav> </nav>
@ -186,12 +168,6 @@
width: 100%; width: 100%;
} }
.nav-wrapper {
display: flex;
width: 100%;
justify-content: space-between;
}
#main-navigation, #main-navigation,
#secondary-navigation { #secondary-navigation {
align-items: center; align-items: center;
@ -227,22 +203,19 @@
z-index: 88; z-index: 88;
} }
.desktop { .nav-wrapper {
display: flex;
width: 100%; width: 100%;
justify-content: space-between; justify-content: space-between;
}
@media (min-width: 768px) {
.nav-wrapper {
align-items: center; align-items: center;
display: flex; }
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.desktop {
display: none;
}
nav {
justify-content: normal;
}
.nav-wrapper { .nav-wrapper {
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 0.5rem;
@ -259,6 +232,14 @@
z-index: 100; z-index: 100;
} }
.desktop-only {
display: none !important;
}
nav {
justify-content: normal;
}
.nav-buttons { .nav-buttons {
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 0.5rem;
@ -271,12 +252,13 @@
} }
} }
/* Hamburger mmm yum */
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.mobile { .mobile-only {
display: none !important; display: none !important;
} }
} }
/* Hamburger mmm yum */
.menu-btn { .menu-btn {
user-select: none; user-select: none;
position: relative; position: relative;