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

fix: mobile navigation menu (#35)

Browse Source
This commit is contained in:
Ax333l
2022-11-25 21:05:25 +01:00
committed by GitHub
parent fac28851d0
commit 57b9e6e258
4 changed files with 147 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.css
View File

@ -24,7 +24,7 @@ body {
html, html,
body { body {
max-width: 100%; max-width: 100vw;
} }
.wrapper { .wrapper {

25
src/lib/components/molecules/MobileDropdown.svelte Normal file
View File

@ -0,0 +1,25 @@
<script>
import { slide } from 'svelte/transition';
</script>
<div transition:slide>
<slot />
</div>
<style>
div {
position: fixed;
width: 100vw;
top: 75px;
z-index: 999;
/* background-color: var(--grey-six); guh @xafn */
background-color: hsla(220, 12%, 15%, 0.95);
border-style: solid;
border-color: var(--accent-color);
/* its rotated for some reason :skull: */
border-left: 0.5rem;
border-right: 0.5rem;
}
</style>

160
src/lib/components/molecules/NavHost.svelte
View File

@ -1,76 +1,105 @@
<script lang="ts"> <script lang="ts">
import Navigation from '../atoms/NavButton.svelte'; import Navigation from '../atoms/NavButton.svelte';
import { onMount } from 'svelte';
import { page } from '$app/stores'; import { page } from '$app/stores';
import Button from '../atoms/Button.svelte'; import Button from '../atoms/Button.svelte';
import MobileDropdown from './MobileDropdown.svelte';
import { onMount } from 'svelte';
import RouterEvents from '../../../data/RouterEvents';
let menuBtn: HTMLElement;
let menuOpen = false; let menuOpen = false;
onMount(() => {
menuBtn.addEventListener('click', () => { onMount(() => {
if (!menuOpen) { return RouterEvents.subscribe(event => {
menuBtn.classList.add('open'); if (event.navigating) {
menuOpen = true; menuOpen = false;
} else { }
menuBtn.classList.remove('open'); });
menuOpen = false; });
}
});
});
</script> </script>
<nav> <nav>
<div class="left-side"> <div class="navbar">
<a href="/"> <div class="left-side">
<div class="logo"> <a href="/">
<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" /> <span class="logo">
</div> <img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
</a> </span>
<ul> </a>
<Navigation href="/">Home</Navigation>
<Navigation href="/download">Download</Navigation> <span class="desktop">
<div hidden> <Navigation href="/">Home</Navigation>
<!-- This is just temporary so the build doesn't fail --> <Navigation href="/download">Download</Navigation>
<Navigation is_selected={target => target.startsWith("/docs")} href="/docs">Docs</Navigation> <div hidden>
</div> <!-- This is just temporary so the build doesn't fail -->
<Navigation href="/patches">Patches</Navigation> <Navigation is_selected={target => target.startsWith("/docs")} href="/docs">Docs</Navigation>
</ul> </div>
</div> <Navigation href="/patches">Patches</Navigation>
<ul> </span>
<Navigation href="/contributors/"> </div>
<img src="/icons/contrib.svg" alt="Contributors"/>
</Navigation> <div class="right-side">
<Navigation href="/api-settings/"> <span class="desktop">
<img src="/icons/settings.svg" alt="Settings"/> <Navigation href="/contributors/">
</Navigation> <img src="/icons/contrib.svg" alt="Contributors"/>
</ul> </Navigation>
<div class="menu-btn" class:open={menuOpen} bind:this={menuBtn}> <Navigation href="/api-settings/">
<div class="menu-btn__burger" /> <img src="/icons/settings.svg" alt="Settings"/>
</div> </Navigation>
</span>
<!-- Should probably be moved to its own component. -->
<button class="menu-btn mobile" class:open={menuOpen} on:click={() => {menuOpen = !menuOpen}}>
<span class="menu-btn__burger" />
</button>
</div>
</div>
<div class="mobile">
{#if menuOpen}
<MobileDropdown>
<div class="mobile-menu">
<Navigation href="/">Home</Navigation>
<Navigation href="/download">Download</Navigation>
<Navigation href="/patches">Patches</Navigation>
<Navigation href="/contributors">Contributors</Navigation>
<Navigation href="/api-settings">Settings</Navigation>
</div>
</MobileDropdown>
{/if}
</div>
</nav> </nav>
<style> <style>
nav { .navbar {
padding: 0 1rem 0 2rem; padding: 0 1rem 0 2rem;
top: 0; top: 0;
position: fixed; position: fixed;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height: 70px; min-height: 70px;
width: 100%; width: 100vw;
z-index: 999; z-index: 999;
background-color: var(--grey-six); background-color: var(--grey-six);
backdrop-filter: blur(15px); backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
} }
ul { .desktop {
display: flex; display: flex;
gap: 0.75rem; gap: 0.75rem;
align-items: center; align-items: center;
} }
.mobile-menu {
display: block;
width: 80vw;
height: 100vh;
white-space: pre;
margin: 0 auto;
padding: 1ch 0;
}
a { a {
text-decoration: none; text-decoration: none;
} }
@ -98,15 +127,15 @@
height: 20px; height: 20px;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 600px) {
ul { .desktop {
display: none; display: none;
} }
} }
/* Hamburger mmm yum */ /* Hamburger mmm yum */
@media screen and (min-width: 768px) { @media screen and (min-width: 600px) {
.menu-btn { .mobile {
display: none !important; display: none !important;
} }
} }
@ -120,6 +149,16 @@
height: 60px; height: 60px;
cursor: pointer; cursor: pointer;
transition: all 0.5s var(--bezier-one); transition: all 0.5s var(--bezier-one);
/* We don't want it to look like a normal button. */
background-color: transparent;
border: none;
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
line-height: inherit;
padding: 0;
} }
.menu-btn__burger { .menu-btn__burger {
width: 25px; width: 25px;
@ -127,6 +166,9 @@
border-radius: 50px; border-radius: 50px;
background: var(--grey-five); background: var(--grey-five);
transition: all 0.5s var(--bezier-one); transition: all 0.5s var(--bezier-one);
display: flex;
flex-wrap: wrap;
} }
.menu-btn__burger::before, .menu-btn__burger::before,
.menu-btn__burger::after { .menu-btn__burger::after {

20
src/lib/utils.ts
View File

@ -6,3 +6,23 @@ export function dev_log(part: string, ...args) {
console.log(`[${part}]:`, ...args); console.log(`[${part}]:`, ...args);
} }
} }
// Use directive that makes an element dispatch an event when you click or tap outside of it.
// Stolen from the svelte docs: https://svelte.dev/tutorial/actions
export function click_outside(node: Element) {
const handle = (event: MouseEvent) => {
if (!node.contains(event.target)) {
node.dispatchEvent(new CustomEvent("click_outside"));
}
};
document.addEventListener("touchstart", handle, true);
document.addEventListener("click", handle, true);
return {
destroy() {
document.removeEventListener("touchstart", handle, true);
document.removeEventListener("click", handle, true);
},
};
}