Merge pull request #65 from imperial/feat-dark-mode-toggle

feat: dark mode toggle

app/auth/login/page.tsx

@@ -1,15 +1,17 @@
-import { auth, signIn } from "@/auth"
+import { signIn } from "@/auth"
 import Link from "@/components/Link"
-import ThemedLogo from "@/components/ThemedLogo"
 
 import styles from "./page.module.scss"
 
 import { Button, Flex, Separator, Text } from "@radix-ui/themes"
 import { Heading } from "@react-email/components"
 import { AuthError } from "next-auth"
+import dynamic from "next/dynamic"
 import { redirect } from "next/navigation"
 import React from "react"
 
+const ThemedLogo = dynamic(() => import("@/components/ThemedLogo"), { ssr: false })
+
 const LoginPage = async () => {
   const signInEntraID = async () => {
     "use server"

components/DarkModeToggle.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import { IconButton, Tooltip } from "@radix-ui/themes"
+import { useTheme } from "next-themes"
+import { BsFillMoonFill, BsSunFill } from "react-icons/bs"
+
+const DarkModeToggle = ({ fill = "currentColor" }: { fill?: string }) => {
+  const { theme, setTheme } = useTheme()
+
+  return (
+    <Tooltip content={`Switch to ${theme === "dark" ? "light" : "dark"} mode`}>
+      <IconButton
+        variant="ghost"
+        radius="full"
+        size="3"
+        onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+        style={{ width: "fit-content", alignSelf: "center" }}
+      >
+        {theme === "dark" ? <BsSunFill size="1.5em" fill={fill} /> : <BsFillMoonFill size="1.5em" fill={fill} />}
+      </IconButton>
+    </Tooltip>
+  )
+}
+
+export default DarkModeToggle

components/navbar/DesktopNavbar.tsx

@@ -10,9 +10,12 @@ import RestrictedAreaClient from "../rbac/RestrictedAreaClient"
 import { Role } from "@prisma/client"
 import { Flex } from "@radix-ui/themes"
 import { useSession } from "next-auth/react"
+import dynamic from "next/dynamic"
 import Image from "next/image"
 import React from "react"
 
+const DarkModeToggle = dynamic(() => import("@/components/DarkModeToggle"), { ssr: false })
+
 const DesktopNavbar = (props: NavbarProps) => {
   const { data } = useSession()
 
@@ -47,13 +50,16 @@ const DesktopNavbar = (props: NavbarProps) => {
           )}
         </Flex>
 
-        {isSignedIn(data, props) ? (
-          <ProfileDropdown {...props} />
-        ) : (
-          <Link href="/auth/login" className={styles.link}>
-            <span>Log In</span>
-          </Link>
-        )}
+        <Flex align="center" gap="5">
+          <DarkModeToggle fill="white" />
+          {isSignedIn(data, props) ? (
+            <ProfileDropdown {...props} />
+          ) : (
+            <Link href="/auth/login" className={styles.link}>
+              <span>Log In</span>
+            </Link>
+          )}
+        </Flex>
       </nav>
     </Flex>
   )

components/navbar/MobileNavbar.tsx

@@ -7,8 +7,9 @@ import RestrictedAreaClient from "../rbac/RestrictedAreaClient"
 import { CONTENT_ID, FOOTER_ID } from "../util/constants"
 import { Role } from "@prisma/client"
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu"
-import { Button, Flex, Heading, IconButton, Link as RadixLink, Separator, Text } from "@radix-ui/themes"
+import { Button, Flex, Heading, IconButton, Separator, Text } from "@radix-ui/themes"
 import { signOut, useSession } from "next-auth/react"
+import dynamic from "next/dynamic"
 import Image from "next/image"
 import React from "react"
 import {
@@ -23,6 +24,8 @@ import {
 } from "react-icons/bs"
 import { IconType } from "react-icons/lib"
 
+const DarkModeToggle = dynamic(() => import("@/components/DarkModeToggle"), { ssr: false })
+
 const SidebarLink = ({ href, Icon, displayText }: { href: string; Icon: IconType; displayText: string }) => {
   return (
     <Link href={href} className={styles.link} radixProps={{ underline: "none" }}>
@@ -107,7 +110,10 @@ const MobileNavbar = (props: NavbarProps) => {
         </IconButton>
 
         <DropdownMenu.Content className={styles.sidebar} align="start">
-          {isSignedIn(data, props) ? <AuthenticatedContent {...props} /> : <UnauthenticatedContent />}
+          <Flex direction="column" justify="between" height="100%">
+            {isSignedIn(data, props) ? <AuthenticatedContent {...props} /> : <UnauthenticatedContent />}
+            <DarkModeToggle />
+          </Flex>
         </DropdownMenu.Content>
       </DropdownMenu.Root>
       <Link href="/" asChild>

components/navbar/Navbar.tsx

@@ -9,7 +9,7 @@ import { Session } from "next-auth"
 import React from "react"
 import { useMediaQuery } from "react-responsive"
 
-const MOBILE_WIDTH = 910
+const MOBILE_WIDTH = 1000
 
 interface BaseNavbarProps {
   role: Role

styling/globals.scss

@@ -64,5 +64,5 @@ body {
 }
 
 .dark .dim {
-  filter: blur(1px);
+  filter: opacity(0.5) blur(1px);
 }