upagge/noteshare.space
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update mobile navbar dark mode

Browse Source
This commit is contained in:
Maxime Cannoodt 2022-07-07 09:52:28 +02:00
parent 378e337e9f
commit 3086289d68
4 changed files with 31 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
webapp/src/lib/components/navbar/NavBar.svelte
View File

@ -29,7 +29,7 @@
>
<div id="navbar-left" class="flex gap-4">
<a href="/" class="self-center h-full pb-0.5">
<span id="name" class="self-center font-bold text-2xl md:text-lg dark:text-white"
<span id="name" class="self-center font-bold text-xl md:text-lg dark:text-white"
>📝 {import.meta.env.VITE_BRANDING}</span
>
</a>
@ -38,7 +38,7 @@
</ul>
</div>
<div id="navbar-right" class="hidden md:block flex gap-8 flex">
<ul class="flex gap-2.5 content-center">
<ul class="flex gap-4 content-center">
<slot name="right" />
</ul>
</div>
@ -46,7 +46,7 @@
<button
aria-label="navigation menu"
on:click={() => (showMobileMenu = !showMobileMenu)}
class="flex flex-col justify-center"><FaBars /></button
class="flex flex-col justify-center text-zinc-500 dark:text-zinc-400"><FaBars /></button
>
</div>
</div>
@ -58,8 +58,13 @@
class="fixed top-[65px] w-full sm:w-72 sm:right-1
rounded-lg"
>
<div class="bg-zinc-200 relative mt-2 mx-2 px-4 py-2 rounded-[20px] shadow-sm sm:shadow-lg">
<div on:click={() => (showMobileMenu = !showMobileMenu)} class="flex flex-col gap-0 text-xl">
<div
class="bg-zinc-200 dark:bg-zinc-700 relative mt-2 mx-2 px-4 py-2 rounded-[20px] shadow-sm sm:shadow-lg"
>
<div
on:click={() => (showMobileMenu = !showMobileMenu)}
class="flex flex-col gap-0 text-xl dark:text-zinc-200"
>
<slot name="left" />
<slot name="right" />
</div>

2
webapp/src/lib/components/navbar/NavBarLink.svelte
View File

@ -4,7 +4,7 @@
<a
{href}
class="text-center py-4 px-2 md:py-0 md:px-0 self-center w-full h-full text-zinc-600 dark:text-zinc-400 border-b md:border-b-0 border-zinc-300"
class="text-center py-4 px-2 md:py-0 md:px-0 self-center w-full h-full text-zinc-600 dark:text-zinc-200 md:dark:text-zinc-300 border-b md:border-b-0 border-zinc-300 dark:border-zinc-500"
>
<div class="h-full flex flex-col justify-center">
<slot />

23
webapp/src/lib/components/navbar/ThemeToggle.svelte
View File

@ -11,15 +11,18 @@
<button
on:click={onClick}
class="py-4 px-2 md:py-0 md:px-0 self-center w-full h-full text-zinc-600 dark:text-zinc-400 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 p-1.5"
class="py-4 px-2 md:py-0 md:px-0 self-center w-full h-full text-zinc-600 dark:text-zinc-200 md:dark:text-zinc-400 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 p-1.5"
>
<div class="h-full flex flex-col justify-center">
<span class="h-6 text-black dark:text-zinc-300">
{#if dark}
<LightIcon />
{:else}
<DarkIcon />
{/if}
</span>
</div>
<span class="flex md:block justify-center items-center gap-2">
<span class="text-black dark:text-zinc-200 md:hidden">Toggle dark mode</span>
<div class="h-full flex flex-col justify-center">
<span class="h-6 text-black dark:text-zinc-300">
{#if dark}
<LightIcon />
{:else}
<DarkIcon />
{/if}
</span>
</div>
</span>
</button>

8
webapp/src/routes/__layout.svelte
View File

@ -46,8 +46,14 @@
><span class="text-[#705dcf] font-bold">Get Obsidian</span></NavBarLink
>
<NavBarLink href="https://github.com/mcndt/obsidian-note-sharing">
<span class="h-6 text-black dark:text-zinc-300"><LogoGithub /></span>
<span class="flex justify-center gap-2 items-center">
<span class="text-black dark:text-zinc-200 md:hidden">GitHub</span>
<span class="h-6 text-black dark:text-zinc-200 md:dark:text-zinc-300"
><LogoGithub /></span
>
</span>
</NavBarLink>
<ThemeToggle bind:dark />
</svelte:fragment>
></NavBar