-
Notifications
You must be signed in to change notification settings - Fork 134
/
Copy pathTopNav.astro
90 lines (83 loc) · 4.3 KB
/
TopNav.astro
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
---
import Search from './Search.astro'
---
<nav
transition:persist
class="flex justify-between mx-auto h-20 px-6 w-full bg-gray1 dark:bg-gray7 z-50 relative"
>
<div class="flex justify-center items-center">
<button id="sidebarBtn" class="lg:hidden">
<svg
class="fill-gray6 dark:fill-gray2 w-8 mx-2"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M4 5C3.44772 5 3 5.44772 3 6C3 6.55228 3.44772 7 4 7H20C20.5523 7 21 6.55228 21 6C21 5.44772 20.5523 5 20 5H4ZM7 12C7 11.4477 7.44772 11 8 11H20C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H8C7.44772 13 7 12.5523 7 12ZM13 18C13 17.4477 13.4477 17 14 17H20C20.5523 17 21 17.4477 21 18C21 18.5523 20.5523 19 20 19H14C13.4477 19 13 18.5523 13 18Z"
></path>
</svg>
</button>
<a class="grid place-items-center w-14" href="/">
<img id="logo" src="/logo.svg" alt="sveltefire logo" />
</a>
</div>
<ul class="flex justify-center items-center list-none">
<li class="mx-2 md:mx-4 hidden md:block">
<a
href="/guide/start"
class="font-code font-bold text-gray5 dark:text-gray2">start</a
>
</li>
<li class="mx-4">
<Search />
<button class="flex md:hidden">
<span class="text-gray2 w-6 mx-2"></span>
</button>
</li>
<li
id="dark"
class="w-5 cursor-pointer fill-gray3 dark:fill-orange-500 mr-2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
xml:space="preserve"
style="enable-background:new 0 0 312.812 312.812"
viewBox="0 0 312.812 312.812"
><path
d="M305.2 178.159c-3.2-.8-6.4 0-9.2 2-10.4 8.8-22.4 16-35.6 20.8-12.4 4.8-26 7.2-40.4 7.2-32.4 0-62-13.2-83.2-34.4-21.2-21.2-34.4-50.8-34.4-83.2 0-13.6 2.4-26.8 6.4-38.8 4.4-12.8 10.8-24.4 19.2-34.4 3.6-4.4 2.8-10.8-1.6-14.4-2.8-2-6-2.8-9.2-2-34 9.2-63.6 29.6-84.8 56.8-20.4 26.8-32.4 60-32.4 96 0 43.6 17.6 83.2 46.4 112s68 46.4 112 46.4c36.8 0 70.8-12.8 98-34 27.6-21.6 47.6-52.4 56-87.6 1.6-5.6-1.6-11.2-7.2-12.4z"
></path></svg>
</li>
<li id="light" class="w-5 cursor-pointer fill-orange-500 dark:fill-gray3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
><path
d="M100.307 168.213a180.083 180.083 0 0 1 67.905-67.905L90.7 71.547A14.9 14.9 0 0 0 71.547 90.7zM77.22 256c0-16.617 2.287-32.71 6.549-47.986L8.687 242.457a14.9 14.9 0 0 0 0 27.086l75.083 34.443A178.326 178.326 0 0 1 77.22 256zM256 77.22a178.32 178.32 0 0 1 47.986 6.549L269.543 8.687a14.9 14.9 0 0 0-27.086 0L208.014 83.77A178.28 178.28 0 0 1 256 77.22zM411.693 168.213l28.76-77.513A14.9 14.9 0 0 0 421.3 71.547l-77.513 28.76a180.102 180.102 0 0 1 67.906 67.906zM256 434.78a178.32 178.32 0 0 1-47.986-6.549l34.443 75.083a14.9 14.9 0 0 0 27.086-.001l34.444-75.083A178.333 178.333 0 0 1 256 434.78zM100.307 343.787 71.547 421.3A14.9 14.9 0 0 0 90.7 440.453l77.513-28.76a180.102 180.102 0 0 1-67.906-67.906zM503.313 242.457l-75.083-34.444c4.262 15.277 6.549 31.369 6.549 47.986s-2.287 32.71-6.549 47.986l75.083-34.443a14.9 14.9 0 0 0 0-27.085zM411.693 343.787a180.083 180.083 0 0 1-67.905 67.905l77.513 28.76a14.897 14.897 0 0 0 15.719-3.434 14.9 14.9 0 0 0 3.434-15.719zM256 404.98c-82.148 0-148.98-66.832-148.98-148.98S173.852 107.02 256 107.02 404.98 173.852 404.98 256 338.148 404.98 256 404.98z"
></path></svg>
</li>
</ul>
</nav>
<script>
function light() {
// Whenever the user explicitly chooses light mode
localStorage.theme = "light";
document.documentElement.classList.add("light");
document.documentElement.classList.remove("dark");
}
function dark() {
// Whenever the user explicitly chooses dark mode
localStorage.theme = "dark";
document.documentElement.classList.add("dark");
document.documentElement.classList.remove("light");
}
document.getElementById("light")!.addEventListener("click", light);
document.getElementById("dark")!.addEventListener("click", dark);
const sidebarBtn = document.getElementById("sidebarBtn");
const article = document.querySelector("article")
sidebarBtn.onclick = function () {
const sidebar = document.getElementById("sidebar");
sidebar.classList.toggle("hidden");
article.classList.toggle("hidden")
};
</script>