mirror of
https://github.com/LukeHagar/better-auth.git
synced 2025-12-10 04:19:32 +00:00
Scrolling issue and mob theme toggler (#97)
This commit is contained in:
Kinfe Michael Tariku
committed by
GitHub
GitHub
parent
50448399dc
commit
4733e2f393
@@ -1,58 +1,58 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { ThemeToggle } from "@/components/theme-toggler";
|
||||
import { NavbarMobile, NavbarMobileBtn } from "./nav-mobile";
|
||||
import Image from "next/image";
|
||||
import { NavbarMobileBtn } from "./nav-mobile";
|
||||
import { NavLink } from "./nav-link";
|
||||
import { Logo } from "./logo";
|
||||
import { PulicBetaBadge } from "./beta/badge";
|
||||
import { useState } from "react";
|
||||
import { MenuIcon, X } from "lucide-react";
|
||||
|
||||
export const Navbar = () => {
|
||||
return (
|
||||
<div className="flex flex-col sticky top-0 bg-background backdrop-blur-md z-30">
|
||||
<nav className="md:grid grid-cols-12 border-b top-0 flex items-center justify-between ">
|
||||
<Link
|
||||
href="/"
|
||||
className="md:border-r md:px-5 px-2.5 py-4 text-foreground md:col-span-2 shrink-0 transition-colors md:w-[--fd-sidebar-width]"
|
||||
>
|
||||
<div className="flex flex-col gap-2 w-full">
|
||||
<div className="flex items-center gap-2">
|
||||
<Logo />
|
||||
<p>BETTER-AUTH.</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
<div className="md:col-span-10 flex items-center justify-end relative">
|
||||
<ul className="md:flex items-center divide-x w-max border-r hidden shrink-0">
|
||||
{navMenu.map((menu, i) => (
|
||||
<NavLink key={menu.name} href={menu.path}>
|
||||
{menu.name}
|
||||
</NavLink>
|
||||
))}
|
||||
</ul>
|
||||
<ThemeToggle />
|
||||
<NavbarMobileBtn />
|
||||
</div>
|
||||
</nav>
|
||||
<NavbarMobile />
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<nav className="sticky z-40 top-0 flex items-center justify-between bg-background backdrop-blur-md">
|
||||
<Link
|
||||
href="/"
|
||||
className="md:border-r md:px-5 px-2.5 py-4 text-foreground md:col-span-2 shrink-0 transition-colors md:w-[--fd-sidebar-width]"
|
||||
>
|
||||
<div className="flex flex-col gap-2 w-full">
|
||||
<div className="flex items-center gap-2">
|
||||
<Logo />
|
||||
<p>BETTER-AUTH.</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
<div className="md:col-span-10 flex items-center justify-end sticky top-0 z-30 pb-3 w-full font-geist border-b border-black/10 transition duration-200 ease-in-out md:bg-transparent animate-header-slide-down-fade dark:border-white/10 md:backdrop-blur-md">
|
||||
<ul className="md:flex items-center divide-x w-max border-r hidden shrink-0">
|
||||
{navMenu.map((menu, i) => (
|
||||
<NavLink key={menu.name} href={menu.path}>
|
||||
{menu.name}
|
||||
</NavLink>
|
||||
))}
|
||||
</ul>
|
||||
<ThemeToggle />
|
||||
<NavbarMobileBtn />
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
export const navMenu = [
|
||||
{
|
||||
name: "helo_",
|
||||
path: "/",
|
||||
},
|
||||
{
|
||||
name: "docs",
|
||||
path: "/docs",
|
||||
},
|
||||
{
|
||||
name: "helo_",
|
||||
path: "/",
|
||||
},
|
||||
{
|
||||
name: "docs",
|
||||
path: "/docs",
|
||||
},
|
||||
|
||||
{
|
||||
name: "changelogs",
|
||||
path: "/changelogs",
|
||||
},
|
||||
{
|
||||
name: "community",
|
||||
path: "https://discord.gg/GYC3W7tZzb",
|
||||
},
|
||||
{
|
||||
name: "changelogs",
|
||||
path: "/changelogs",
|
||||
},
|
||||
{
|
||||
name: "community",
|
||||
path: "https://discord.gg/GYC3W7tZzb",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -1,247 +1,235 @@
|
||||
"use client";
|
||||
import { Menu, X } from "lucide-react";
|
||||
import { Menu, Sun, X } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { Fragment, createContext, useContext, useState } from "react";
|
||||
import {
|
||||
Fragment,
|
||||
createContext,
|
||||
useContext,
|
||||
useEffect,
|
||||
useState,
|
||||
} from "react";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "@/components/ui/accordion";
|
||||
import { AnimatePresence, FadeIn } from "@/components/ui/fade-in";
|
||||
import { contents } from "./sidebar-content";
|
||||
import { MobileThemeToggle, ThemeToggle } from "./theme-toggler";
|
||||
|
||||
interface NavbarMobileContextProps {
|
||||
isOpen: boolean;
|
||||
toggleNavbar: () => void;
|
||||
isDocsOpen: boolean;
|
||||
toggleDocsNavbar: () => void;
|
||||
isOpen: boolean;
|
||||
toggleNavbar: () => void;
|
||||
isDocsOpen: boolean;
|
||||
toggleDocsNavbar: () => void;
|
||||
}
|
||||
|
||||
const NavbarContext = createContext<NavbarMobileContextProps | undefined>(
|
||||
undefined,
|
||||
undefined
|
||||
);
|
||||
|
||||
export const NavbarProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [isDocsOpen, setIsDocsOpen] = useState(false);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [isDocsOpen, setIsDocsOpen] = useState(false);
|
||||
|
||||
const toggleNavbar = () => {
|
||||
setIsOpen((prevIsOpen) => !prevIsOpen);
|
||||
};
|
||||
const toggleDocsNavbar = () => {
|
||||
setIsDocsOpen((prevIsOpen) => !prevIsOpen);
|
||||
};
|
||||
// @ts-ignore
|
||||
return (
|
||||
<NavbarContext.Provider
|
||||
value={{ isOpen, toggleNavbar, isDocsOpen, toggleDocsNavbar }}
|
||||
>
|
||||
{children}
|
||||
</NavbarContext.Provider>
|
||||
);
|
||||
const toggleNavbar = () => {
|
||||
setIsOpen((prevIsOpen) => !prevIsOpen);
|
||||
};
|
||||
const toggleDocsNavbar = () => {
|
||||
setIsDocsOpen((prevIsOpen) => !prevIsOpen);
|
||||
};
|
||||
// @ts-ignore
|
||||
return (
|
||||
<NavbarContext.Provider
|
||||
value={{ isOpen, toggleNavbar, isDocsOpen, toggleDocsNavbar }}
|
||||
>
|
||||
{children}
|
||||
</NavbarContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useNavbarMobile = (): NavbarMobileContextProps => {
|
||||
const context = useContext(NavbarContext);
|
||||
if (!context) {
|
||||
throw new Error(
|
||||
"useNavbarMobile must be used within a NavbarMobileProvider",
|
||||
);
|
||||
}
|
||||
return context;
|
||||
const context = useContext(NavbarContext);
|
||||
if (!context) {
|
||||
throw new Error(
|
||||
"useNavbarMobile must be used within a NavbarMobileProvider"
|
||||
);
|
||||
}
|
||||
return context;
|
||||
};
|
||||
|
||||
export const NavbarMobileBtn: React.FC = () => {
|
||||
const { toggleNavbar } = useNavbarMobile();
|
||||
const { toggleNavbar } = useNavbarMobile();
|
||||
|
||||
return (
|
||||
<button
|
||||
className="text-muted-foreground ml-auto px-2.5 block md:hidden"
|
||||
onClick={() => {
|
||||
toggleNavbar();
|
||||
}}
|
||||
>
|
||||
<Menu />
|
||||
</button>
|
||||
);
|
||||
return (
|
||||
<div className="flex pt-2 items-center">
|
||||
<MobileThemeToggle />
|
||||
<button
|
||||
className="text-muted-foreground overflow-hidden px-2.5 block md:hidden"
|
||||
onClick={() => {
|
||||
toggleNavbar();
|
||||
}}
|
||||
>
|
||||
<Menu />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const NavbarMobile = () => {
|
||||
const { isOpen, toggleNavbar } = useNavbarMobile();
|
||||
const { isOpen, toggleNavbar } = useNavbarMobile();
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
document.body.classList.add("overflow-hidden");
|
||||
} else {
|
||||
document.body.classList.remove("overflow-hidden");
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.body.classList.remove("overflow-hidden");
|
||||
};
|
||||
}, [isOpen]);
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<FadeIn
|
||||
fromTopToBottom
|
||||
className="bg-background h-[calc(100vh)] w-full z-[1000] p-5 divide-y overflow-y-auto "
|
||||
>
|
||||
{navMenu.map((menu, i) => (
|
||||
<Fragment key={menu.name}>
|
||||
{menu.child ? (
|
||||
<Accordion type="single" collapsible>
|
||||
<AccordionItem value={menu.name}>
|
||||
<AccordionTrigger className="text-2xl font-normal text-foreground">
|
||||
{menu.name}
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="pl-5 divide-y">
|
||||
{menu.child.map((child, j) => (
|
||||
<Link
|
||||
href={child.path}
|
||||
key={child.name}
|
||||
className="block text-xl py-2 first:pt-0 last:pb-0 border-b last:border-0 text-muted-foreground"
|
||||
onClick={toggleNavbar}
|
||||
>
|
||||
{child.name}
|
||||
</Link>
|
||||
))}
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
) : (
|
||||
<Link
|
||||
href={menu.path}
|
||||
className="block text-2xl py-4 first:pt-0 last:pb-0"
|
||||
onClick={toggleNavbar}
|
||||
>
|
||||
{menu.name}
|
||||
</Link>
|
||||
)}
|
||||
</Fragment>
|
||||
))}
|
||||
</FadeIn>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
return (
|
||||
<div className="fixed top-[50px] left-0 z-30 px-4 mx-auto w-full h-auto backdrop-blur-lg dark:bg-black md:hidden transform-gpu [border:1px_solid_rgba(255,255,255,.1)] [box-shadow:0_-40px_80px_-20px_#8686f01f_inset]">
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<FadeIn
|
||||
fromTopToBottom
|
||||
className="bg-transparent p-5 divide-y overflow-y-auto"
|
||||
>
|
||||
{navMenu.map((menu, i) => (
|
||||
<Fragment key={menu.name}>
|
||||
{menu.child ? (
|
||||
<Accordion type="single" collapsible>
|
||||
<AccordionItem value={menu.name}>
|
||||
<AccordionTrigger className="text-2xl font-normal text-foreground">
|
||||
{menu.name}
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="pl-5 divide-y">
|
||||
{menu.child.map((child, j) => (
|
||||
<Link
|
||||
href={child.path}
|
||||
key={child.name}
|
||||
className="block text-xl py-2 first:pt-0 last:pb-0 border-b last:border-0 text-muted-foreground"
|
||||
onClick={toggleNavbar}
|
||||
>
|
||||
{child.name}
|
||||
</Link>
|
||||
))}
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
) : (
|
||||
<Link
|
||||
href={menu.path}
|
||||
className="block text-2xl py-4 first:pt-0 last:pb-0"
|
||||
onClick={toggleNavbar}
|
||||
>
|
||||
{menu.name}
|
||||
</Link>
|
||||
)}
|
||||
</Fragment>
|
||||
))}
|
||||
</FadeIn>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const DocsNavbarMobileBtn: React.FC = () => {
|
||||
const { toggleDocsNavbar: toggleNavbar } = useNavbarMobile();
|
||||
const { toggleDocsNavbar: toggleNavbar } = useNavbarMobile();
|
||||
|
||||
return (
|
||||
<button
|
||||
className="text-muted-foreground ml-auto block md:hidden"
|
||||
onClick={() => {
|
||||
toggleNavbar();
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1.4em"
|
||||
height="1.4em"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
d="M2.25 6A.75.75 0 0 1 3 5.25h18a.75.75 0 0 1 0 1.5H3A.75.75 0 0 1 2.25 6m0 4A.75.75 0 0 1 3 9.25h18a.75.75 0 0 1 0 1.5H3a.75.75 0 0 1-.75-.75m0 4a.75.75 0 0 1 .75-.75h7a.75.75 0 0 1 0 1.5H3a.75.75 0 0 1-.75-.75m0 4a.75.75 0 0 1 .75-.75h7a.75.75 0 0 1 0 1.5H3a.75.75 0 0 1-.75-.75"
|
||||
clipRule="evenodd"
|
||||
opacity=".5"
|
||||
></path>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M13.43 14.512a.75.75 0 0 1 1.058-.081l3.012 2.581l3.012-2.581a.75.75 0 1 1 .976 1.139l-3.5 3a.75.75 0 0 1-.976 0l-3.5-3a.75.75 0 0 1-.081-1.058"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
);
|
||||
return (
|
||||
<button
|
||||
className="text-muted-foreground ml-auto block md:hidden"
|
||||
onClick={() => {
|
||||
toggleNavbar();
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1.4em"
|
||||
height="1.4em"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
d="M2.25 6A.75.75 0 0 1 3 5.25h18a.75.75 0 0 1 0 1.5H3A.75.75 0 0 1 2.25 6m0 4A.75.75 0 0 1 3 9.25h18a.75.75 0 0 1 0 1.5H3a.75.75 0 0 1-.75-.75m0 4a.75.75 0 0 1 .75-.75h7a.75.75 0 0 1 0 1.5H3a.75.75 0 0 1-.75-.75m0 4a.75.75 0 0 1 .75-.75h7a.75.75 0 0 1 0 1.5H3a.75.75 0 0 1-.75-.75"
|
||||
clipRule="evenodd"
|
||||
opacity=".5"
|
||||
></path>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M13.43 14.512a.75.75 0 0 1 1.058-.081l3.012 2.581l3.012-2.581a.75.75 0 1 1 .976 1.139l-3.5 3a.75.75 0 0 1-.976 0l-3.5-3a.75.75 0 0 1-.081-1.058"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export const DocsNavBarMobile = () => {
|
||||
const { isDocsOpen: isOpen, toggleDocsNavbar: toggleNavbar } =
|
||||
useNavbarMobile();
|
||||
const { isDocsOpen: isOpen, toggleDocsNavbar: toggleNavbar } =
|
||||
useNavbarMobile();
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<FadeIn
|
||||
fromTopToBottom
|
||||
className="absolute top-[100px] left-0 bg-background h-[calc(100%-57px-27px)] w-full z-[1000] p-5 divide-y overflow-y-auto"
|
||||
>
|
||||
{contents.map((menu, i) => (
|
||||
<Accordion type="single" collapsible key={menu.title}>
|
||||
<AccordionItem value={menu.title}>
|
||||
<AccordionTrigger className=" font-normal text-foreground ">
|
||||
<div className="flex items-center gap-2">
|
||||
{!!menu.Icon && <menu.Icon className="w-5 h-5" />}
|
||||
{menu.title}
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="pl-5 divide-y">
|
||||
{menu.list.map((child, j) => (
|
||||
<Link
|
||||
href={child.href}
|
||||
key={child.title}
|
||||
className="block text-sm py-2 first:pt-0 last:pb-0 border-b last:border-0 text-muted-foreground"
|
||||
onClick={toggleNavbar}
|
||||
>
|
||||
{child.group ? (
|
||||
<div className="flex flex-row gap-2 items-center ">
|
||||
<line className="flex-grow h-px bg-gradient-to-r from-stone-800/90 to-stone-800/60" />
|
||||
<p className="text-sm bg-gradient-to-tr dark:from-gray-100 dark:to-stone-200 bg-clip-text text-transparent from-gray-900 to-stone-900">
|
||||
{child.title}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<child.icon />
|
||||
{child.title}
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
))}
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
))}
|
||||
</FadeIn>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<FadeIn
|
||||
fromTopToBottom
|
||||
className="absolute top-[100px] left-0 bg-background h-[calc(100%-57px-27px)] w-full z-[1000] p-5 divide-y overflow-y-auto"
|
||||
>
|
||||
{contents.map((menu, i) => (
|
||||
<Accordion type="single" collapsible key={menu.title}>
|
||||
<AccordionItem value={menu.title}>
|
||||
<AccordionTrigger className=" font-normal text-foreground ">
|
||||
<div className="flex items-center gap-2">
|
||||
{!!menu.Icon && <menu.Icon className="w-5 h-5" />}
|
||||
{menu.title}
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="pl-5 divide-y">
|
||||
{menu.list.map((child, j) => (
|
||||
<Link
|
||||
href={child.href}
|
||||
key={child.title}
|
||||
className="block text-sm py-2 first:pt-0 last:pb-0 border-b last:border-0 text-muted-foreground"
|
||||
onClick={toggleNavbar}
|
||||
>
|
||||
{child.group ? (
|
||||
<div className="flex flex-row gap-2 items-center ">
|
||||
<line className="flex-grow h-px bg-gradient-to-r from-stone-800/90 to-stone-800/60" />
|
||||
<p className="text-sm bg-gradient-to-tr dark:from-gray-100 dark:to-stone-200 bg-clip-text text-transparent from-gray-900 to-stone-900">
|
||||
{child.title}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<child.icon />
|
||||
{child.title}
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
))}
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
))}
|
||||
</FadeIn>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
};
|
||||
|
||||
export const navMenu: {
|
||||
name: string;
|
||||
path: string;
|
||||
child?: {
|
||||
name: string;
|
||||
path: string;
|
||||
}[];
|
||||
name: string;
|
||||
path: string;
|
||||
child?: {
|
||||
name: string;
|
||||
path: string;
|
||||
}[];
|
||||
}[] = [
|
||||
{
|
||||
name: "_helo",
|
||||
path: "/",
|
||||
},
|
||||
{
|
||||
name: "_helo",
|
||||
path: "/",
|
||||
},
|
||||
|
||||
{
|
||||
name: "_docs",
|
||||
path: "/docs",
|
||||
},
|
||||
{
|
||||
name: "_changelogs",
|
||||
path: "/changelogs",
|
||||
},
|
||||
{
|
||||
name: "_community",
|
||||
path: "https://discord.gg/GYC3W7tZzb",
|
||||
},
|
||||
{
|
||||
name: "_docs",
|
||||
path: "/docs",
|
||||
},
|
||||
{
|
||||
name: "_changelogs",
|
||||
path: "/changelogs",
|
||||
},
|
||||
{
|
||||
name: "_community",
|
||||
path: "https://discord.gg/GYC3W7tZzb",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -1,52 +1,78 @@
|
||||
"use client";
|
||||
|
||||
import { Moon, Sun } from "lucide-react";
|
||||
import { Moon, MoonIcon, Sun } from "lucide-react";
|
||||
import { useTheme } from "next-themes";
|
||||
import * as React from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
|
||||
export function ThemeToggle() {
|
||||
const { setTheme } = useTheme();
|
||||
const { setTheme } = useTheme();
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="border-l ring-0 rounded-none h-14 w-14 hidden md:flex shrink-0"
|
||||
>
|
||||
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
||||
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
||||
<span className="sr-only">Toggle theme</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem
|
||||
data-umami-event="theme-toggle-light"
|
||||
onClick={() => setTheme("light")}
|
||||
>
|
||||
Light
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
data-umami-event="theme-toggle-dark"
|
||||
onClick={() => setTheme("dark")}
|
||||
>
|
||||
Dark
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
data-umami-event="theme-toggle-system"
|
||||
onClick={() => setTheme("system")}
|
||||
>
|
||||
System
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="border-l ring-0 rounded-none h-14 w-14 hidden md:flex shrink-0"
|
||||
>
|
||||
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
||||
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
||||
<span className="sr-only">Toggle theme</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem
|
||||
data-umami-event="theme-toggle-light"
|
||||
onClick={() => setTheme("light")}
|
||||
>
|
||||
Light
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
data-umami-event="theme-toggle-dark"
|
||||
onClick={() => setTheme("dark")}
|
||||
>
|
||||
Dark
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
data-umami-event="theme-toggle-system"
|
||||
onClick={() => setTheme("system")}
|
||||
>
|
||||
System
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
export function MobileThemeToggle() {
|
||||
const { theme, setTheme } = useTheme();
|
||||
return (
|
||||
<div className="">
|
||||
{theme === "dark" ? (
|
||||
<Button
|
||||
onClick={() => {
|
||||
setTheme("light");
|
||||
}}
|
||||
variant={"ghost"}
|
||||
>
|
||||
<Sun className="w-4 h-4" />
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
onClick={() => {
|
||||
setTheme("dark");
|
||||
}}
|
||||
variant={"ghost"}
|
||||
>
|
||||
<MoonIcon className="w-4 h-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
5
studio/next-env.d.ts
vendored
Normal file
5
studio/next-env.d.ts
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
|
||||
Reference in New Issue
Block a user