header for mobile

pull/19/head
Niko PLP 1 year ago
parent 58e7bb85a0
commit 04abea8169
  1. 63
      ng-app/src/lib/Home.svelte
  2. 5
      ng-app/src/lib/MobileBottomBarItem.svelte

@ -11,14 +11,74 @@
<script lang="ts"> <script lang="ts">
import { close_active_wallet, online } from "../store"; import { close_active_wallet, online } from "../store";
import { ArrowRightOnRectangle } from "svelte-heros-v2";
import FullLayout from "./FullLayout.svelte"; import FullLayout from "./FullLayout.svelte";
import { PaperAirplane, Bell, ArrowRightOnRectangle } from "svelte-heros-v2";
// @ts-ignore
import Logo from "../assets/nextgraph.svg?component";
// @ts-ignore
import LogoGray from "../assets/nextgraph-gray.svg?component";
function logout() { function logout() {
close_active_wallet(); close_active_wallet();
} }
let width: number;
let breakPoint: number = 662;
let mobile = false;
$: if (width >= breakPoint) {
mobile = false;
} else {
mobile = true;
}
</script> </script>
<FullLayout> <FullLayout>
{#if mobile}
<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"
>
<div
class="mx-auto flex flex-wrap justify-between items-center w-full px-2 xxs:px-8 xs:px-10"
>
<a href="#/user" class="flex items-center" on:click>
{#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}
<span
class="ml-4 self-center text-base font-normal text-gray-900 rounded-lg dark:text-white whitespace-nowrap"
>NextGraph</span
>
</a>
<div class="w-auto flex flex-col">
<a href="#/messages" class="row items-center" on:click>
<PaperAirplane
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 focus:outline-none"
/>
<span
class="inline-flex justify-center items-center p-3 mt-1 -ml-2 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>
</a>
<a href="#/notifications" class="ml-4 row items-center" on:click>
<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 focus:outline-none"
/>
<span
class="inline-flex justify-center items-center p-3 mt-1 -ml-2 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>
</a>
</div>
</div>
</nav>
{/if}
<h1>Welcome</h1> <h1>Welcome</h1>
<h1>Welcome</h1> <h1>Welcome</h1>
<h1>Welcome</h1> <h1>Welcome</h1>
@ -52,3 +112,4 @@
<h1>Welcome</h1> <h1>Welcome</h1>
<h1>End</h1> <h1>End</h1>
</FullLayout> </FullLayout>
<svelte:window bind:innerWidth={width} />

@ -12,13 +12,10 @@
let sidebarUrl = ""; let sidebarUrl = "";
activeUrlStore.subscribe((value) => { activeUrlStore.subscribe((value) => {
// console.log('value: ', value)
sidebarUrl = value; sidebarUrl = value;
}); });
// console.log('sidbarUrl: ', sidebarUrl)
// console.log('href: ', href)
$: active = sidebarUrl ? href === sidebarUrl : false; $: active = sidebarUrl ? href === sidebarUrl : false;
// console.log('active: ', active)
</script> </script>
<a {href} class="flex items-center" on:click> <a {href} class="flex items-center" on:click>

Loading…
Cancel
Save