feat: move theme toggle to bottom of page (#105)

* feat: move theme swither to bottom of page * feat: change theme switcher name and move it outside navbar folder
Skolaczk · May 28, 2024 · 0b0547c · 0b0547c
1 parent 2af1c69
commit 0b0547c
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 5 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -7,6 +7,7 @@ import type { Metadata } from 'next';
 import { Footer } from '@/components/footer';
 import { Navbar } from '@/components/navbar/navbar';
 import { ThemeProvider } from '@/components/theme-provider';
+import { ThemeSwitcher } from '@/components/theme-switcher';
 import { Toaster } from '@/components/ui/toaster';
 import { siteConfig } from '@/lib/constant';
 import { fonts } from '@/lib/fonts';
@@ -55,6 +56,7 @@ const RootLayout = ({ children }: PropsWithChildren) => {
           <ThemeProvider attribute="class">
             <Navbar />
             {children}
+            <ThemeSwitcher className="absolute bottom-5 right-5 z-10" />
             <Footer />
             <Toaster />
           </ThemeProvider>

diff --git a/src/components/navbar/navbar.tsx b/src/components/navbar/navbar.tsx
@@ -4,7 +4,6 @@ import { LanguageSwitcher } from './language-switcher';
 
 import { authOptions } from '@/app/api/auth/[...nextauth]/auth-options';
 import { SignInButton } from '@/components/navbar/sign-in-button';
-import { ThemeToggle } from '@/components/navbar/theme-toggle';
 import { UserDropdown } from '@/components/navbar/user-dropdown';
 import { Link } from '@/lib/i18n';
 import * as m from '@/paraglide/messages';
@@ -19,7 +18,6 @@ export const Navbar = async () => {
           {m.app_name()}
         </Link>
         <div className="flex items-center gap-2">
-          <ThemeToggle />
           {session ? <UserDropdown session={session} /> : <SignInButton />}
           <LanguageSwitcher />
         </div>

diff --git a/src/components/navbar/theme-toggle.tsx → src/components/theme-switcher.tsx b/src/components/navbar/theme-toggle.tsx → src/components/theme-switcher.tsx
@@ -1,17 +1,23 @@
 'use client';
 
+import { ComponentProps } from 'react';
 import { useTheme } from 'next-themes';
 
 import { Icons } from '@/components/icons';
 import { Button } from '@/components/ui/button';
 import * as m from '@/paraglide/messages';
 
-export const ThemeToggle = () => {
+type ThemeSwitcherProps = {
+  className?: ComponentProps<'button'>['className'];
+};
+
+export const ThemeSwitcher = ({ className }: ThemeSwitcherProps) => {
   const { theme, setTheme } = useTheme();
 
   return (
     <Button
-      variant="ghost"
+      className={className}
+      variant="secondary"
       size="icon"
       aria-label={m.theme_toggle_label()}
       onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}

diff --git a/src/components/ui/toast.tsx b/src/components/ui/toast.tsx
@@ -14,7 +14,7 @@ const ToastViewport = React.forwardRef<
   <ToastPrimitives.Viewport
     ref={ref}
     className={cn(
-      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
+      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:right-0 sm:top-0 sm:flex-col md:max-w-[420px]',
       className
     )}
     {...props}