From 0812b3725d4da1146558a84a08db0a5f5fb86bc0 Mon Sep 17 00:00:00 2001 From: fran-ink <171171801+fran-ink@users.noreply.github.com> Date: Tue, 18 Feb 2025 10:33:31 -0500 Subject: [PATCH] feat: add theme toggle to side and mobile nav --- package.json | 2 +- pnpm-lock.yaml | 10 ++--- src/app/[locale]/_components/MobileNav.tsx | 7 ++++ src/app/[locale]/_components/RoutedLayout.tsx | 2 - src/app/[locale]/_components/SideNav.tsx | 7 ++++ src/app/[locale]/_components/ThemeToggle.tsx | 42 +++++++++++++++++++ 6 files changed, 62 insertions(+), 8 deletions(-) create mode 100644 src/app/[locale]/_components/ThemeToggle.tsx diff --git a/package.json b/package.json index 4cc3070..6a54e0f 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2e6e757..1a36565 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -21,8 +21,8 @@ importers: specifier: 3.9.1 version: 3.9.1(react-hook-form@7.54.1(react@19.0.0)) '@inkonchain/ink-kit': - specifier: 0.9.0-beta.4 - version: 0.9.0-beta.4(@tanstack/react-query@5.60.6(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(tailwindcss@3.4.4)(viem@2.22.11(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1))(wagmi@2.14.9(@tanstack/query-core@5.60.6)(@tanstack/react-query@5.60.6(react@19.0.0))(@types/react@19.0.7)(bufferutil@4.0.9)(react@19.0.0)(typescript@5.7.3)(utf-8-validate@5.0.10)(viem@2.22.11(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1))(zod@3.24.1)) + specifier: 0.9.0-beta.6 + version: 0.9.0-beta.6(@tanstack/react-query@5.60.6(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(tailwindcss@3.4.4)(viem@2.22.11(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1))(wagmi@2.14.9(@tanstack/query-core@5.60.6)(@tanstack/react-query@5.60.6(react@19.0.0))(@types/react@19.0.7)(bufferutil@4.0.9)(react@19.0.0)(typescript@5.7.3)(utf-8-validate@5.0.10)(viem@2.22.11(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1))(zod@3.24.1)) '@next/third-parties': specifier: 15.1.6 version: 15.1.6(next@15.1.6(@babel/core@7.26.7)(@opentelemetry/api@1.9.0)(@playwright/test@1.45.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.77.6))(react@19.0.0) @@ -884,8 +884,8 @@ packages: cpu: [x64] os: [win32] - '@inkonchain/ink-kit@0.9.0-beta.4': - resolution: {integrity: sha512-fVAT/GKppn2lJV79egPcgiDqLc1oKlJF36RoxBpaOfL0zaQZBgydVlH4DCXxbdbn+KHphrxzO9ONggNk3+Z0FA==} + '@inkonchain/ink-kit@0.9.0-beta.6': + resolution: {integrity: sha512-1wC4lTXdjmDWo5lhltIB3huNqhGjULWRB8P9nazDDZ1knT14xi9EPlCJ+A/V+xJyCNIyWRYWwwwu8gxKUTZ1bg==} peerDependencies: '@tanstack/react-query': ^5 react: 19.0.0 @@ -7331,7 +7331,7 @@ snapshots: '@img/sharp-win32-x64@0.33.5': optional: true - '@inkonchain/ink-kit@0.9.0-beta.4(@tanstack/react-query@5.60.6(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(tailwindcss@3.4.4)(viem@2.22.11(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1))(wagmi@2.14.9(@tanstack/query-core@5.60.6)(@tanstack/react-query@5.60.6(react@19.0.0))(@types/react@19.0.7)(bufferutil@4.0.9)(react@19.0.0)(typescript@5.7.3)(utf-8-validate@5.0.10)(viem@2.22.11(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1))(zod@3.24.1))': + '@inkonchain/ink-kit@0.9.0-beta.6(@tanstack/react-query@5.60.6(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(tailwindcss@3.4.4)(viem@2.22.11(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1))(wagmi@2.14.9(@tanstack/query-core@5.60.6)(@tanstack/react-query@5.60.6(react@19.0.0))(@types/react@19.0.7)(bufferutil@4.0.9)(react@19.0.0)(typescript@5.7.3)(utf-8-validate@5.0.10)(viem@2.22.11(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1))(zod@3.24.1))': dependencies: '@headlessui/react': 2.2.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0) '@tanstack/react-query': 5.60.6(react@19.0.0) diff --git a/src/app/[locale]/_components/MobileNav.tsx b/src/app/[locale]/_components/MobileNav.tsx index 4647ae8..52a8778 100644 --- a/src/app/[locale]/_components/MobileNav.tsx +++ b/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 ( + + + } links={[ { href: "/", diff --git a/src/app/[locale]/_components/RoutedLayout.tsx b/src/app/[locale]/_components/RoutedLayout.tsx index 1548098..5394f06 100644 --- a/src/app/[locale]/_components/RoutedLayout.tsx +++ b/src/app/[locale]/_components/RoutedLayout.tsx @@ -1,5 +1,3 @@ -"use client"; - import { Suspense } from "react"; import { InkLayout } from "@inkonchain/ink-kit"; diff --git a/src/app/[locale]/_components/SideNav.tsx b/src/app/[locale]/_components/SideNav.tsx index a61df56..f7f8c54 100644 --- a/src/app/[locale]/_components/SideNav.tsx +++ b/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 ( + + + } links={[ { asChild: true, diff --git a/src/app/[locale]/_components/ThemeToggle.tsx b/src/app/[locale]/_components/ThemeToggle.tsx new file mode 100644 index 0000000..2a3ae52 --- /dev/null +++ b/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 ( +