feat: separate navbar into two

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

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 {

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) {

2
static/icons/contrib.svg Normal file
View File

@ -0,0 +1,2 @@
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#ACC1D2"><g><rect fill="none" height="24" width="24"/></g><g><g><g><g><path d="M16,13c3.09-2.81,6-5.44,6-7.7C22,3.45,20.55,2,18.7,2c-1.04,0-2.05,0.49-2.7,1.25C15.34,2.49,14.34,2,13.3,2 C11.45,2,10,3.45,10,5.3C10,7.56,12.91,10.19,16,13z M13.3,4c0.44,0,0.89,0.21,1.18,0.55L16,6.34l1.52-1.79 C17.81,4.21,18.26,4,18.7,4C19.44,4,20,4.56,20,5.3c0,1.12-2.04,3.17-4,4.99c-1.96-1.82-4-3.88-4-4.99C12,4.56,12.56,4,13.3,4z"/><path d="M19,16h-2c0-1.2-0.75-2.28-1.87-2.7L8.97,11H1v11h6v-1.44l7,1.94l8-2.5v-1C22,17.34,20.66,16,19,16z M3,20v-7h2v7H3z M13.97,20.41L7,18.48V13h1.61l5.82,2.17C14.77,15.3,15,15.63,15,16c0,0-1.99-0.05-2.3-0.15l-2.38-0.79l-0.63,1.9l2.38,0.79 c0.51,0.17,1.04,0.26,1.58,0.26H19c0.39,0,0.74,0.23,0.9,0.56L13.97,20.41z"/></g></g></g></g></svg>

After

Width:  |  Height:  |  Size: 880 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ACC1D2"><path d="M0 0h24v24H0V0z" fill="none"/><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>

After

Width:  |  Height:  |  Size: 1.4 KiB