feat: add mode toggle

soyricardodev · Jul 24, 2024 · a1628b8 · a1628b8
1 parent 81e4f9c
commit a1628b8
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 17 deletions.
diff --git a/apps/gifting-concierge/src/app/page.tsx b/apps/gifting-concierge/src/app/page.tsx
@@ -7,7 +7,7 @@ import { Hero } from "./components/hero";
 export default function Home() {
 	return (
 		<>
-			<Header />
+			<Header showModeToggle={false} />
 			<main className="antialiased overflow-x-hidden absolute top-0 left-0 w-full h-full z-30">
 				<div className="max-w-7xl mx-auto px-4 flex min-h-screen flex-col items-center justify-between">
 					<Hero />

diff --git a/apps/gifting-concierge/src/components/header.tsx b/apps/gifting-concierge/src/components/header.tsx
@@ -4,7 +4,7 @@ import Link from "next/link";
 import { createClient } from "~/supabase/server";
 import { HeaderNavigation } from "./header/navigation";
 
-export function Header() {
+export function Header({ showModeToggle }: { showModeToggle?: boolean }) {
 	return (
 		<div className="sticky top-0 z-50">
 			<header className="flex w-full flex-col gap-3 p-3 md:h-16 md:flex-row md:items-center lg:px-4 bg-black/70 backdrop-blur-3xl supports-[backdrop-filter]:bg-white/30 shadow-sm">
@@ -31,22 +31,25 @@ export function Header() {
 						<Link href="/login" className="">
 							<UserRoundIcon className="size-5 text-gray-500 dark:text-gray-400" />
 						</Link>
-						<HeaderUser />
+						<HeaderUser showModeToggle={showModeToggle} />
 					</div>
 				</div>
 			</header>
 		</div>
 	);
 }
 
-async function HeaderUser() {
+async function HeaderUser({ showModeToggle }: { showModeToggle?: boolean }) {
 	const supabase = createClient();
 	const {
 		data: { user },
 		error,
 	} = await supabase.auth.getUser();
 
-	if (!user || error) return <HeaderNavigation isLoggedIn={false} />;
+	if (!user || error)
+		return (
+			<HeaderNavigation isLoggedIn={false} showModeToggle={showModeToggle} />
+		);
 
-	return <HeaderNavigation isLoggedIn={true} />;
+	return <HeaderNavigation isLoggedIn={true} showModeToggle={showModeToggle} />;
 }
diff --git a/apps/gifting-concierge/src/components/header/navigation.tsx b/apps/gifting-concierge/src/components/header/navigation.tsx
@@ -88,6 +88,7 @@ const menuItemsLoggedIn = [
 interface HeaderNavigationProps {
 	isLoggedIn: boolean;
 	isDarkMode?: boolean;
+	showModeToggle?: boolean;
 }
 
 export function HeaderNavigation(props: HeaderNavigationProps) {
@@ -168,10 +169,14 @@ export function HeaderNavigation(props: HeaderNavigationProps) {
 						</DropdownMenuItem>
 					))}
 				</DropdownMenuGroup>
-				<DropdownMenuSeparator />
-				<DropdownMenuItem asChild>
-					<ChangeTheme />
-				</DropdownMenuItem>
+				{props.showModeToggle && (
+					<>
+						<DropdownMenuSeparator />
+						<DropdownMenuItem asChild>
+							<ChangeTheme />
+						</DropdownMenuItem>
+					</>
+				)}
 				<DropdownMenuSeparator />
 				<DropdownMenuItem asChild>
 					<form
@@ -192,7 +197,10 @@ export function HeaderNavigation(props: HeaderNavigationProps) {
 	);
 }
 
-function HeaderNavigationLoggedOut({ isDarkMode }: { isDarkMode?: boolean }) {
+function HeaderNavigationLoggedOut({
+	isDarkMode,
+	showModeToggle,
+}: { isDarkMode?: boolean; showModeToggle?: boolean }) {
 	return (
 		<DropdownMenu>
 			<DropdownMenuTrigger asChild>
@@ -264,12 +272,16 @@ function HeaderNavigationLoggedOut({ isDarkMode }: { isDarkMode?: boolean }) {
 						</Link>
 					</DropdownMenuItem>
 				</DropdownMenuGroup>
-				<Separator className="h-px" />
-				<DropdownMenuGroup className="p-2">
-					<DropdownMenuItem asChild>
-						<ChangeTheme />
-					</DropdownMenuItem>
-				</DropdownMenuGroup>
+				{showModeToggle && (
+					<>
+						<Separator className="h-px" />
+						<DropdownMenuGroup className="p-2">
+							<DropdownMenuItem asChild>
+								<ChangeTheme />
+							</DropdownMenuItem>
+						</DropdownMenuGroup>
+					</>
+				)}
 			</DropdownMenuContent>
 		</DropdownMenu>
 	);