notxia/notxia.github.io
1
0
Fork 0
mirror of https://github.com/NotXia/notxia.github.io.git synced 2025-12-16 11:31:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add theme switch

Browse Source
This commit is contained in:
Tian Cheng (Riccardo) Xia
2023-01-14 19:52:10 +01:00
parent 3a078e0195
commit 56d58a7ea2
4 changed files with 90 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/Navbar/Navbar.vue
View File

@ -3,18 +3,26 @@
<div class="container flex flex-wrap items-center justify-between mx-auto">
<div></div>
<button class="inline-flex items-center p-2 ml-3 text-sm text-gray-500 md:hidden dark:text-gray-400"
data-collapse-toggle="navbar-main" type="button" aria-controls="navbar-main" aria-expanded="false">
<span class="sr-only">Apri menù navigazione</span>
<svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
</svg>
</button>
<div class="hidden w-full md:block md:w-auto" id="navbar-main">
<ul class="flex flex-col pt-4 pr-4 mt-0 md:flex-row md:space-x-8 md:text-sm md:font-medium bg-transparent">
<NavLink to="/" label="Home"/>
</ul>
<div class="block md:flex">
<div class="flex justify-end items-center order-2">
<ThemeSwitch />
<button class="inline-flex items-center p-2 ml-3 text-sm text-gray-500 md:hidden dark:text-gray-400"
data-collapse-toggle="navbar-main" type="button" aria-controls="navbar-main" aria-expanded="false">
<span class="sr-only">Apri menù navigazione</span>
<svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
<div class="flex items-center order-1">
<div class="hidden w-full md:block md:w-auto" id="navbar-main">
<ul class="flex flex-col py-4 pr-4 mt-0 md:flex-row md:space-x-8 md:text-sm md:font-medium bg-transparent">
<NavLink to="/" label="Home"/>
</ul>
</div>
</div>
</div>
</div>
</nav>
@ -23,5 +31,6 @@
<script setup lang="ts">
import NavLink from "./NavLink.vue";
import ThemeSwitch from "../ThemeSwitch/ThemeSwitch.vue";
import "flowbite";
</script>