Merge pull request #18 from kjloveless/updates

fix nav dropdown, begin adding theme selector, default to dark theme
kjloveless · Oct 13, 2024 · c7780e0 · c7780e0
2 parents 358d815 + a9c7502
commit c7780e0
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 4 deletions.
diff --git a/fresh.gen.ts b/fresh.gen.ts
@@ -11,6 +11,7 @@ import * as $create_your_own from "./routes/create-your-own.tsx";
 import * as $index from "./routes/index.tsx";
 import * as $link from "./islands/link.tsx";
 import * as $site_header from "./islands/site-header.tsx";
+import * as $theme_toggle from "./islands/theme-toggle.tsx";
 import type { Manifest } from "$fresh/server.ts";
 
 const manifest = {
@@ -27,6 +28,7 @@ const manifest = {
   islands: {
     "./islands/link.tsx": $link,
     "./islands/site-header.tsx": $site_header,
+    "./islands/theme-toggle.tsx": $theme_toggle,
   },
   baseUrl: import.meta.url,
 } satisfies Manifest;

diff --git a/islands/site-header.tsx b/islands/site-header.tsx
@@ -9,7 +9,7 @@ import { cn } from "../util/mod.ts";
 import { buttonVariants } from "../components/ui/Button.tsx";
 import { Icons } from "../components/icons.tsx";
 import { Link } from "../islands/link.tsx";
-// import { ThemeToggle } from "@/components/theme-toggle";
+import { ThemeToggle } from "./theme-toggle.tsx";
 
 interface Props {
   children?: ComponentChildren;
@@ -34,7 +34,7 @@ export default function SiteHeader({ children }: Props) {
           <span className="sr-only">GitHub</span>
         </div>
       </Link>
-      {/* <ThemeToggle /> */}
+      <ThemeToggle />
     </nav>
   );
 
@@ -60,7 +60,7 @@ export default function SiteHeader({ children }: Props) {
       </header>
       {showMenu && (
         <div
-          className="fixed top-16 z-30 w-full overflow-hidden border-b bg-background/80 transition-transform duration-500 md:hidden"
+          className="fixed top-16 z-30 w-full overflow-hidden border-b bg-background/80 transition-transform duration-500 md:hidden translate-y-1px"
           aria-hidden={!showMenu}
         >
           <div className="container flex h-full flex-col items-center justify-stretch px-4 pb-2">

diff --git a/islands/theme-toggle.tsx b/islands/theme-toggle.tsx
@@ -0,0 +1,23 @@
+import { useSignal } from "@preact/signals";
+
+import { Button } from "../components/ui/Button.tsx";
+import { Icons } from "../components/icons.tsx";
+
+export function ThemeToggle() {
+  const theme = useSignal("light");
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      onClick={() => {
+        theme.value = theme.value === "light" ? "dark" : "light";
+        console.log(theme.value);
+      }}
+    >
+      <Icons.sun className="rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Icons.moon className="absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  );
+}
diff --git a/routes/_app.tsx b/routes/_app.tsx
@@ -7,7 +7,7 @@ import SiteHeader from "../islands/site-header.tsx";
 
 export default function App({ Component, url }: PageProps) {
   return (
-    <html>
+    <html class="dark">
       <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />