Merge pull request #51 from inkonchain/feat/theme-toggle

feat: add theme toggle to side and mobile nav

package.json

@@ -16,7 +16,7 @@
   "dependencies": {
     "@headlessui/react": "2.1.6",
     "@hookform/resolvers": "3.9.1",
-    "@inkonchain/ink-kit": "0.9.0-beta.4",
+    "@inkonchain/ink-kit": "0.9.0-beta.6",
     "@next/third-parties": "15.1.6",
     "@octokit/auth-app": "7.1.3",
     "@octokit/rest": "21.0.2",

src/app/[locale]/_components/MobileNav.tsx

@@ -10,6 +10,8 @@ import { useFeatureFlag } from "@/hooks/useFeatureFlag";
 import { useRouterQuery } from "@/hooks/useRouterQuery";
 import { Link } from "@/routing";
 
+import { ThemeToggle } from "./ThemeToggle";
+
 export function MobileNav() {
   const { setIsMobileNavOpen } = useInkLayoutContext();
 
@@ -21,6 +23,11 @@ export function MobileNav() {
   const query = useRouterQuery();
   return (
     <InkLayoutMobileNav
+      bottom={
+        <div className="flex justify-center">
+          <ThemeToggle />
+        </div>
+      }
       links={[
         {
           href: "/",

src/app/[locale]/_components/RoutedLayout.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { Suspense } from "react";
 import { InkLayout } from "@inkonchain/ink-kit";
 

src/app/[locale]/_components/SideNav.tsx

@@ -14,11 +14,18 @@ import {
 } from "@/routing";
 import { classNames } from "@/util/classes";
 
+import { ThemeToggle } from "./ThemeToggle";
+
 export const SideNav = () => {
   const hasVerifyPage = useFeatureFlag("verifyPage");
 
   return (
     <InkLayoutSideNav
+      bottom={
+        <div>
+          <ThemeToggle />
+        </div>
+      }
       links={[
         {
           asChild: true,

src/app/[locale]/_components/ThemeToggle.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { Button } from "@inkonchain/ink-kit";
+import { useTheme } from "next-themes";
+
+import { MoonIcon } from "@/components/icons/Moon";
+import { SunIcon } from "@/components/icons/Sun";
+import { classNames } from "@/util/classes";
+
+export const ThemeToggle = () => {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <Button
+      variant="secondary"
+      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+      aria-label="Toggle theme"
+      rounded="full"
+      className="ink:text-text-muted duration-0 bg-transparent"
+      iconLeft={
+        <div className="relative">
+          <SunIcon
+            className={classNames(
+              "absolute inset-0 opacity-0",
+              theme === "dark" && "opacity-100"
+            )}
+            size="icon-lg"
+            enforce="inherit"
+          />
+          <MoonIcon
+            className={classNames(
+              "absolute inset-0 opacity-100",
+              theme === "dark" && "opacity-0"
+            )}
+            size="icon-lg"
+            enforce="inherit"
+          />
+        </div>
+      }
+    />
+  );
+};