ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/ReVanced/revanced-website.git synced 2026-01-19 17:23:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: separate navbar into two

Browse Source
This commit is contained in:
afn
2022-10-31 22:24:51 -04:00
parent 963e78a685
commit d6a660313c
4 changed files with 33 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/components/atoms/NavButton.svelte
View File

@@ -15,7 +15,6 @@
border: var(--grey-six);
text-align: center;
list-style: none;
display: inline-block;
position: relative;
font-weight: 500;
font-size: 0.9rem;
@@ -25,6 +24,9 @@
transition-duration: 0.25s;
padding: 10px 25px;
border-radius: 200px;
display: flex;
align-items: center;
justify-content: center;
}
a {

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

@@ -2,6 +2,7 @@
import Navigation from '../atoms/NavButton.svelte';
import { onMount } from 'svelte';
import { page } from '$app/stores';
import Button from '../atoms/Button.svelte';
let menuBtn: HTMLElement;
let menuOpen = false;
@@ -19,21 +20,26 @@
</script>
<nav>
<a href="/">
<div class="logo">
<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
{#if $page.url.pathname !== '/'}
<h1><span>Re</span>Vanced</h1>
{/if}
</div>
</a>
<div class="left-side">
<a href="/">
<div class="logo">
<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
</div>
</a>
<ul>
<Navigation href="/">Home</Navigation>
<Navigation href="/download/">Download</Navigation>
<Navigation href="/docs/">Docs</Navigation>
<Navigation href="/patches/">Patches</Navigation>
</ul>
</div>
<ul>
<Navigation href="/">Home</Navigation>
<Navigation href="/download/">Download</Navigation>
<Navigation href="/docs/">Docs</Navigation>
<Navigation href="/patches/">Patches</Navigation>
<Navigation href="/credits/">Credits</Navigation>
<Navigation href="/api-settings/">API Settings</Navigation>
<Navigation href="/contributors/">
<img src="../icons/contrib.svg" alt="Contributors"/>
</Navigation>
<Navigation href="/api-settings/">
<img src="../icons/settings.svg" alt="Settings"/>
</Navigation>
</ul>
<div class="menu-btn" class:open={menuOpen} bind:this={menuBtn}>
<div class="menu-btn__burger" />
@@ -77,22 +83,16 @@
align-items: center;
}
h1 {
display: inline-block;
margin-left: 1rem;
font-size: 1.75rem;
letter-spacing: -0.04em;
height: 90%;
.left-side {
display: flex;
flex-direction: row;
align-items: center;
gap: 2.5rem;
}
h1 span {
color: var(--accent-color);
}
@media screen and (max-width: 400px) {
h1 {
display: none;
}
img {
height: 20px;
}
@media screen and (max-width: 768px) {