almost finished navbar

TODO: modify dropdown menus

src/components/Navbar.astro

@@ -1,11 +1,10 @@
 ---
 import { getRelativeLocaleUrl } from "astro:i18n";
-/* import ThemeSelector from "./ThemeSelector" */
+import { ThemeSelector } from "./ThemeSelector"
 import NavbarSkeleton from "./NavbarSkeleton.astro";
 import { LangSwitcher } from "./LangSwitcher";
 import { NavButton } from "./NavButton";
 
-
 function selected(path) {
 	return (
 		(Astro.url.pathname
@@ -14,7 +13,6 @@ function selected(path) {
 	);
 }
 ---
-
 <NavbarSkeleton>
 	<!-- Page Navigation -->
 	<div class="flex gap-1">
@@ -32,10 +30,8 @@ function selected(path) {
 	</div>
 
 	<!-- Options (language, light/dark mode) -->
-	<div class="flex gap-4">
-		<!-- <Icon icon="dark_mode" class={"h-8 w-8 hover:text-primary text-content"} /> -->
+	<div class="flex gap-1">
 		<LangSwitcher client:load client:only/>
-		<!-- <ThemeSelector client:load></ThemeSelector> -->
+		<ThemeSelector client:load client:only/>
 	</div>
-</NavbarSkeleton>
-./NavButton
+</NavbarSkeleton>

src/components/ThemeSelector.jsx

@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+
+import { icons } from "../lib/icons"
+import { Button } from "./ui/button"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuRadioGroup,
+    DropdownMenuRadioItem,
+    DropdownMenuTrigger,
+} from "./ui/dropdown-menu"
+
+
+// Please note that clang = lang, it's just for more confusion
+export function ThemeSelector() {
+    function getTheme() {
+        console.log(localStorage.getItem("data-theme"));
+        const theme = localStorage.getItem("data-theme") || document.documentElement.getAttribute("data-theme");
+        document.documentElement.setAttribute("data-theme", theme);
+        return theme;
+    }
+
+    function newTheme(theme) {
+        setTheme(theme);
+        document.documentElement.setAttribute("data-theme", theme);
+        localStorage.setItem("data-theme", theme);
+    }
+
+    const [theme, setTheme] = React.useState(getTheme());
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="icon" className="bg-inherit border-none text-content" dangerouslySetInnerHTML={{ __html: icons[theme] }} />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-20">
+                <DropdownMenuRadioGroup value={theme} onValueChange={newTheme}>
+                    <DropdownMenuRadioItem value="theme_auto">Auto</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="theme_light">Light</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="theme_dark">Dark</DropdownMenuRadioItem>
+                </DropdownMenuRadioGroup>
+            </DropdownMenuContent>
+        </DropdownMenu >
+    )
+}