From fd03b7b9cfe22fddf4e737a6835fd938279ab404 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cyril=20=C5=A0ebek?= <cyril@cyrilsebek.cz>
Date: Sun, 7 Apr 2024 17:23:34 +0200
Subject: [PATCH] almost finished navbar TODO: modify dropdown menus

---
 src/components/Navbar.astro      | 12 +++-----
 src/components/ThemeSelector.jsx | 47 ++++++++++++++++++++++++++++++++
 src/components/ThemeSelector.tsx |  0
 src/layouts/MainLayout.astro     | 11 ++++++--
 src/layouts/SinglePage.astro     |  2 +-
 src/lib/icons.js                 |  9 ++++--
 src/pages/[lang]/index.astro     |  2 +-
 src/style/index.css              |  4 +--
 8 files changed, 69 insertions(+), 18 deletions(-)
 create mode 100644 src/components/ThemeSelector.jsx
 delete mode 100644 src/components/ThemeSelector.tsx

diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 1cc36d1..eed4180 100644
--- a/src/components/Navbar.astro
+++ b/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
\ No newline at end of file
+</NavbarSkeleton>
\ No newline at end of file
diff --git a/src/components/ThemeSelector.jsx b/src/components/ThemeSelector.jsx
new file mode 100644
index 0000000..9a671d3
--- /dev/null
+++ b/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 >
+    )
+}
diff --git a/src/components/ThemeSelector.tsx b/src/components/ThemeSelector.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
index 7171341..bdd1f35 100644
--- a/src/layouts/MainLayout.astro
+++ b/src/layouts/MainLayout.astro
@@ -1,22 +1,27 @@
 ---
 const { title, description, lang, themeOverride } = Astro.props;
+import { ViewTransitions } from 'astro:transitions';
 import Navbar from "../components/Navbar.astro";
 import "../style/index.css";
 import "../style/globals.css";
 ---
 
 <!doctype html>
-<html lang={lang} data-theme={themeOverride ? themeOverride : undefined} class="overflow-hidden">
+<html lang={lang} data-theme={themeOverride ? themeOverride : "theme_auto"} class="overflow-hidden">
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta name="description" content={description} />
         <link rel="shortcut icon" href="/favicon.svg">
         <title>{title}</title>
+        <ViewTransitions />
     </head>
     <body class="bg-bkg" >
-        <Navbar />
-        <div class="bg-bkg h-dvh w-full overflow-y-scroll snap-mandatory snap-y scroll-smooth">
+        <script transition:persist is:raw is:inline>
+            document.addEventListener('astro:after-swap', () => {document.documentElement.setAttribute("data-theme", localStorage.getItem("data-theme") || document.documentElement.getAttribute("data-theme"));});
+        </script>
+        <Navbar transition:persist/>
+        <div class="bg-bkg h-dvh w-full overflow-y-scroll snap-mandatory snap-y scroll-smooth" transition:animate="slide">
             <slot />
         </div>
     </body>
diff --git a/src/layouts/SinglePage.astro b/src/layouts/SinglePage.astro
index 391bb4f..00dae1c 100644
--- a/src/layouts/SinglePage.astro
+++ b/src/layouts/SinglePage.astro
@@ -1,4 +1,4 @@
-<div class="snap-start w-screen h-screen overflow-clip pt-10">
+<div class="snap-start w-screen h-screen overflow-clip pt-14">
 	<div class="bg-bkg h-full w-full sm:grid sm:grid-cols-6 lg:grid-cols-12">
 		<div
 			class="sm:col-start-2 sm:col-end-6 lg:col-start-3 lg:col-end-11 2xl:col-start-4 2xl:col-end-10 h-full p-2 sm:p-6"
diff --git a/src/lib/icons.js b/src/lib/icons.js
index 216a71d..b4bb35e 100644
--- a/src/lib/icons.js
+++ b/src/lib/icons.js
@@ -4,14 +4,17 @@ const home = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 2
 const blog = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
     <path stroke-linecap="round" stroke-linejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6v-3Z" />
     </svg>`;
-const dark_theme = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
+const theme_dark = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
     <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
     </svg>`;
-const light_theme = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
+const theme_light = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
     <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
     </svg>`;
 const lang = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
     <path stroke-linecap="round" stroke-linejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802" />
 </svg>`
+const theme_auto = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z" />
+</svg>`
 
-export const icons = { home: home, blog: blog, dark_theme: dark_theme, light_theme: light_theme, lang:lang };
\ No newline at end of file
+export const icons = { home: home, blog: blog, theme_dark: theme_dark, theme_light: theme_light, lang: lang, theme_auto: theme_auto };
\ No newline at end of file
diff --git a/src/pages/[lang]/index.astro b/src/pages/[lang]/index.astro
index ffd06ee..392b474 100644
--- a/src/pages/[lang]/index.astro
+++ b/src/pages/[lang]/index.astro
@@ -13,7 +13,7 @@ export async function getStaticPaths() {
   });
 }
 ---
-<MainLayout title={title} description={description} lang={Astro.currentLocale} themeOverride="dark">
+<MainLayout title={title} description={description} lang={Astro.currentLocale} themeOverride="theme_auto">
   <Hero />
   <About />
   <Hero />
diff --git a/src/style/index.css b/src/style/index.css
index 7753ac9..b0e7739 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -28,7 +28,7 @@ Dark Mode:  https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
         }
     }
 
-    :root[data-theme="dark"] {
+    :root[data-theme="theme_dark"] {
         --color-bkg: 0deg, 0%, 6%;
         --color-bkgNavbar: 0deg, 0%, 17%;
         --color-content: 240deg, 4%, 91%;
@@ -38,7 +38,7 @@ Dark Mode:  https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
         --color-accent-red: 0deg, 84%, 60%;
     }
 
-    :root[data-theme="light"] {
+    :root[data-theme="theme_light"] {
         --color-bkg: 0deg, 0%, 94%;
         --color-bkgNavbar: 0deg, 0%, 50%;
         --color-content: 240deg, 4%, 9%;