parent
a2f1cf8316
commit
58e7bb85a0
@ -0,0 +1,190 @@ |
|||||||
|
<!-- |
||||||
|
// Copyright (c) 2022-2023 Niko Bonnieure, Par le Peuple, NextGraph.org developers |
||||||
|
// All rights reserved. |
||||||
|
// Licensed under the Apache License, Version 2.0 |
||||||
|
// <LICENSE-APACHE2 or http://www.apache.org/licenses/LICENSE-2.0> |
||||||
|
// or the MIT license <LICENSE-MIT or http://opensource.org/licenses/MIT>, |
||||||
|
// at your option. All files in the project carrying such |
||||||
|
// notice may not be copied, modified, or distributed except |
||||||
|
// according to those terms. |
||||||
|
--> |
||||||
|
|
||||||
|
<script lang="ts"> |
||||||
|
import { |
||||||
|
Sidebar, |
||||||
|
SidebarGroup, |
||||||
|
SidebarItem, |
||||||
|
SidebarWrapper, |
||||||
|
} from "flowbite-svelte"; |
||||||
|
import { link, location } from "svelte-spa-router"; |
||||||
|
import MobileBottomBarItem from "./MobileBottomBarItem.svelte"; |
||||||
|
import MobileBottomBar from "./MobileBottomBar.svelte"; |
||||||
|
// @ts-ignore |
||||||
|
import Logo from "../assets/nextgraph.svg?component"; |
||||||
|
// @ts-ignore |
||||||
|
import LogoGray from "../assets/nextgraph-gray.svg?component"; |
||||||
|
import { online } from "../store"; |
||||||
|
|
||||||
|
import { onMount, tick } from "svelte"; |
||||||
|
|
||||||
|
import { |
||||||
|
Home, |
||||||
|
Bolt, |
||||||
|
MagnifyingGlass, |
||||||
|
PlusCircle, |
||||||
|
PaperAirplane, |
||||||
|
Bell, |
||||||
|
User, |
||||||
|
} from "svelte-heros-v2"; |
||||||
|
|
||||||
|
let width: number; |
||||||
|
let breakPoint: number = 662; |
||||||
|
let mobile = false; |
||||||
|
|
||||||
|
$: if (width >= breakPoint) { |
||||||
|
mobile = false; |
||||||
|
} else { |
||||||
|
mobile = true; |
||||||
|
} |
||||||
|
|
||||||
|
async function scrollToTop() { |
||||||
|
await tick(); |
||||||
|
console.log("scrollToTop"); |
||||||
|
top.scrollIntoView(); |
||||||
|
} |
||||||
|
onMount(async () => await scrollToTop()); |
||||||
|
|
||||||
|
$: activeUrl = "#" + $location; |
||||||
|
|
||||||
|
let top; |
||||||
|
|
||||||
|
let asideClass = "w-48"; |
||||||
|
let spanClass = "flex-1 ml-3 whitespace-nowrap"; |
||||||
|
let nonActiveClass = |
||||||
|
"flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"; |
||||||
|
</script> |
||||||
|
|
||||||
|
{#if mobile} |
||||||
|
<div class="full-layout"> |
||||||
|
<main class="pb-14" bind:this={top}> |
||||||
|
<slot /> |
||||||
|
</main> |
||||||
|
<MobileBottomBar {activeUrl}> |
||||||
|
<MobileBottomBarItem href="#/" icon={Home} on:click={scrollToTop} /> |
||||||
|
<MobileBottomBarItem href="#/stream" icon={Bolt} on:click={scrollToTop} /> |
||||||
|
<MobileBottomBarItem |
||||||
|
href="#/search" |
||||||
|
icon={MagnifyingGlass} |
||||||
|
on:click={scrollToTop} |
||||||
|
/> |
||||||
|
<MobileBottomBarItem href="#/create" icon={PlusCircle} /> |
||||||
|
<MobileBottomBarItem href="#/site" icon={User} on:click={scrollToTop} /> |
||||||
|
</MobileBottomBar> |
||||||
|
</div> |
||||||
|
{:else} |
||||||
|
<div class="full-layout"> |
||||||
|
<Sidebar {activeUrl} {asideClass} {nonActiveClass} class="fixed"> |
||||||
|
<SidebarWrapper |
||||||
|
divClass="bg-gray-60 overflow-y-auto tall:py-4 px-3 rounded dark:bg-gray-800" |
||||||
|
> |
||||||
|
<SidebarGroup ulClass="space-y-1 tall:space-y-2"> |
||||||
|
<SidebarItem label="NextGraph" href="#/user" class="mt-1"> |
||||||
|
<svelte:fragment slot="icon"> |
||||||
|
{#if $online} |
||||||
|
<Logo class="w-7 h-7 tall:w-10 tall:h-10" /> |
||||||
|
{:else} |
||||||
|
<LogoGray class="w-7 h-7 tall:w-10 tall:h-10" /> |
||||||
|
{/if} |
||||||
|
</svelte:fragment> |
||||||
|
</SidebarItem> |
||||||
|
<SidebarItem |
||||||
|
label="Home" |
||||||
|
href="#/" |
||||||
|
on:click={scrollToTop} |
||||||
|
class="py-1 tall:p-2" |
||||||
|
> |
||||||
|
<svelte:fragment slot="icon"> |
||||||
|
<Home |
||||||
|
tabindex="-1" |
||||||
|
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white" |
||||||
|
/> |
||||||
|
</svelte:fragment> |
||||||
|
</SidebarItem> |
||||||
|
<SidebarItem label="Stream" href="#/stream" class="py-1 tall:p-2"> |
||||||
|
<svelte:fragment slot="icon"> |
||||||
|
<Bolt |
||||||
|
tabindex="-1" |
||||||
|
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white" |
||||||
|
/> |
||||||
|
</svelte:fragment> |
||||||
|
</SidebarItem> |
||||||
|
<SidebarItem label="Search" href="#/search" class="py-1 tall:p-2"> |
||||||
|
<svelte:fragment slot="icon"> |
||||||
|
<MagnifyingGlass |
||||||
|
tabindex="-1" |
||||||
|
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white" |
||||||
|
/> |
||||||
|
</svelte:fragment> |
||||||
|
</SidebarItem> |
||||||
|
<SidebarItem label="Create" href="#/create" class="py-1 tall:p-2"> |
||||||
|
<svelte:fragment slot="icon"> |
||||||
|
<PlusCircle |
||||||
|
tabindex="-1" |
||||||
|
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white" |
||||||
|
/> |
||||||
|
</svelte:fragment> |
||||||
|
</SidebarItem> |
||||||
|
<SidebarItem label="Site" href="#/site" class="py-1 tall:p-2"> |
||||||
|
<svelte:fragment slot="icon"> |
||||||
|
<User |
||||||
|
tabindex="-1" |
||||||
|
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white" |
||||||
|
/> |
||||||
|
</svelte:fragment> |
||||||
|
</SidebarItem> |
||||||
|
<SidebarItem label="Messages" href="#/messages" class="py-1 tall:p-2"> |
||||||
|
<svelte:fragment slot="icon"> |
||||||
|
<PaperAirplane |
||||||
|
tabindex="-1" |
||||||
|
class="-rotate-45 w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white" |
||||||
|
/> |
||||||
|
<span |
||||||
|
class="inline-flex justify-center items-center p-3 mt-1 -ml-3 w-3 h-3 text-sm font-medium text-primary-600 bg-primary-200 rounded-full dark:bg-primary-900 dark:text-primary-200" |
||||||
|
> |
||||||
|
3 |
||||||
|
</span> |
||||||
|
</svelte:fragment> |
||||||
|
</SidebarItem> |
||||||
|
<SidebarItem |
||||||
|
label="Notifications" |
||||||
|
href="#/notifications" |
||||||
|
class="mt-1 py-1 tall:p-2" |
||||||
|
> |
||||||
|
<svelte:fragment slot="icon"> |
||||||
|
<Bell |
||||||
|
tabindex="-1" |
||||||
|
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white" |
||||||
|
/> |
||||||
|
<span |
||||||
|
class="inline-flex justify-center items-center p-3 mt-1 -ml-3 w-3 h-3 text-sm font-medium text-primary-600 bg-primary-200 rounded-full dark:bg-primary-900 dark:text-primary-200" |
||||||
|
> |
||||||
|
10 |
||||||
|
</span> |
||||||
|
</svelte:fragment> |
||||||
|
</SidebarItem> |
||||||
|
</SidebarGroup> |
||||||
|
</SidebarWrapper> |
||||||
|
</Sidebar> |
||||||
|
|
||||||
|
<main class="ml-48" bind:this={top}> |
||||||
|
<slot /> |
||||||
|
</main> |
||||||
|
</div> |
||||||
|
{/if} |
||||||
|
<svelte:window bind:innerWidth={width} /> |
||||||
|
|
||||||
|
<style> |
||||||
|
.full-layout { |
||||||
|
height: 100vh; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,23 @@ |
|||||||
|
<script lang="ts"> |
||||||
|
import { setContext } from "svelte"; |
||||||
|
import { writable } from "svelte/store"; |
||||||
|
|
||||||
|
export let activeUrl: string = ""; |
||||||
|
|
||||||
|
const activeUrlStore = writable(""); |
||||||
|
|
||||||
|
$: { |
||||||
|
activeUrlStore.set(activeUrl); |
||||||
|
} |
||||||
|
setContext("activeUrl", activeUrlStore); |
||||||
|
</script> |
||||||
|
|
||||||
|
<nav |
||||||
|
class="border-t border-solid border-gray-200 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-200 dark:border-gray-700 divide-gray-100 dark:divide-gray-700 px-2 sm:px-4 py-2.5 w-full fixed bottom-0 left-0 z-20" |
||||||
|
> |
||||||
|
<div |
||||||
|
class="mx-auto flex flex-wrap justify-between items-center w-full px-2 xxs:px-8 xs:px-10" |
||||||
|
> |
||||||
|
<slot /> |
||||||
|
</div> |
||||||
|
</nav> |
||||||
@ -0,0 +1,32 @@ |
|||||||
|
<script lang="ts"> |
||||||
|
import { getContext } from "svelte"; |
||||||
|
import type { ComponentType } from "svelte"; |
||||||
|
import { Icon } from "svelte-heros-v2"; |
||||||
|
|
||||||
|
export let href: string = ""; |
||||||
|
export let icon: ComponentType; |
||||||
|
|
||||||
|
const activeUrlStore = getContext("activeUrl") as { |
||||||
|
subscribe: (callback: (value: string) => void) => void; |
||||||
|
}; |
||||||
|
|
||||||
|
let sidebarUrl = ""; |
||||||
|
activeUrlStore.subscribe((value) => { |
||||||
|
// console.log('value: ', value) |
||||||
|
sidebarUrl = value; |
||||||
|
}); |
||||||
|
// console.log('sidbarUrl: ', sidebarUrl) |
||||||
|
// console.log('href: ', href) |
||||||
|
$: active = sidebarUrl ? href === sidebarUrl : false; |
||||||
|
// console.log('active: ', active) |
||||||
|
</script> |
||||||
|
|
||||||
|
<a {href} class="flex items-center" on:click> |
||||||
|
<Icon |
||||||
|
tabindex="-1" |
||||||
|
color="black" |
||||||
|
variation={active ? "solid" : "outline"} |
||||||
|
class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white focus:outline-none" |
||||||
|
{icon} |
||||||
|
/> |
||||||
|
</a> |
||||||
Loading…
Reference in new issue