80 lines
1.6 KiB
Svelte
80 lines
1.6 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import { page } from '$app/stores';
|
||
|
|
import { onMount } from 'svelte';
|
||
|
|
|
||
|
|
const routes = [
|
||
|
|
{ path: '/', label: 'Notes', icon: '📝' },
|
||
|
|
{ path: '/feeds', label: 'Feeds', icon: '📰' },
|
||
|
|
{ path: '/readlist', label: 'Read Later', icon: '📚' }
|
||
|
|
];
|
||
|
|
|
||
|
|
let currentPath = $derived($page.url.pathname);
|
||
|
|
let isMobile = $state(false);
|
||
|
|
|
||
|
|
function checkMobile() {
|
||
|
|
isMobile = window.innerWidth < 768;
|
||
|
|
}
|
||
|
|
|
||
|
|
onMount(() => {
|
||
|
|
checkMobile();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<svelte:window onresize={checkMobile} />
|
||
|
|
|
||
|
|
{#if isMobile}
|
||
|
|
<nav class="navbar is-fixed-bottom p-0">
|
||
|
|
<div class="navbar-brand is-justify-content-space-around is-flex-grow-1">
|
||
|
|
{#each routes as route}
|
||
|
|
<a
|
||
|
|
href={route.path}
|
||
|
|
class="navbar-item has-text-centered"
|
||
|
|
class:is-active={currentPath === route.path}
|
||
|
|
>
|
||
|
|
<div>
|
||
|
|
<span class="icon">{route.icon}</span>
|
||
|
|
<p class="is-size-7">{route.label}</p>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
{/each}
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
{:else}
|
||
|
|
<nav class="menu p-4 is-fixed-left">
|
||
|
|
{#each routes as route}
|
||
|
|
<a
|
||
|
|
href={route.path}
|
||
|
|
class="button is-fullwidth mb-2 is-justify-content-start"
|
||
|
|
class:is-light={currentPath === route.path}
|
||
|
|
>
|
||
|
|
<span class="icon">{route.icon}</span>
|
||
|
|
<span>{route.label}</span>
|
||
|
|
</a>
|
||
|
|
{/each}
|
||
|
|
</nav>
|
||
|
|
{/if}
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.is-fixed-left {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
bottom: 0;
|
||
|
|
width: 200px;
|
||
|
|
background: inherit;
|
||
|
|
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
:global(body) {
|
||
|
|
padding-bottom: 60px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 769px) {
|
||
|
|
:global(body) {
|
||
|
|
padding-left: 200px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|