NickBland/website-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add in Generic Navbar

Browse Source 
+ Add DaisyUI and themes used
+ Add in generic navbar + Theming
+ Add in theme switcher (Firefox 120+ required, all others fine)

- Removed some boilerplate svelte stuff
This commit is contained in:
Nick Bland 2024-02-26 14:20:32 +10:00
parent 4d3ea83326
commit 2a13698538
6 changed files with 56 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" data-theme="dracula">
<html lang="en" data-theme="night">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />

14
src/components/navbar/navbar.svelte Normal file
View File

@ -0,0 +1,14 @@
<script>
import ThemeController from "./themeController.svelte";
</script>
<div class="navbar bg-base-100">
<div class="flex-1 navbar-start">
<a class="btn btn-ghost text-xl" href="/">daisyUI</a>
</div>
<div class="navbar-end">
<ul class="menu menu-horizontal px-1">
<li class="focus:"><ThemeController /></li>
</ul>
</div>
</div>

28
src/components/navbar/themeController.svelte Normal file
View File

@ -0,0 +1,28 @@
<label class="swap swap-rotate">
<!-- this hidden checkbox controls the state -->
<input type="checkbox" class="theme-controller" value="winter" />
<!-- sun icon -->
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
class="w-10 h-10 swap-on fill-current"
>
<path
d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z"
/>
</svg>
<!-- moon icon -->
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
class="w-10 h-10 swap-off fill-current"
>
<path
fill-rule="evenodd"
d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z"
clip-rule="evenodd"
/>
</svg>
</label>

8
src/routes/+page.svelte
View File

@ -1,3 +1,5 @@
<h1 class="text-5xl font-bold">Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
<input type="checkbox" value="light" class="toggle theme-controller" />
<script>
import Navbar from "../components/navbar/navbar.svelte";
</script>
<Navbar />

BIN
static/favicon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 15 KiB

16
tailwind.config.js
View File

@ -1,11 +1,11 @@
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html",'./src/**/*.{html,js,svelte,ts}'],
theme: {
extend: {}
},
plugins: [require('daisyui')],
daisyui: {
themes: ['light', 'dark', 'dracula']
}
content: ["./index.html", "./src/**/*.{html,js,svelte,ts}"],
theme: {
extend: {},
},
plugins: [require("daisyui")],
daisyui: {
themes: ["night", "winter"],
},
};