upd: tampilan dark dan light

src/frontend/components/DashboardLayout.tsx

@@ -1,5 +1,6 @@
 import { APP_CONFIGS } from '@/frontend/config/appMenus'
 import {
+  ActionIcon,
   AppShell,
   Avatar,
   Box,
@@ -14,6 +15,7 @@ import {
   ThemeIcon
 } from '@mantine/core'
 import { useDisclosure } from '@mantine/hooks'
+import { useMantineColorScheme, useComputedColorScheme } from '@mantine/core'
 import { Link, useLocation, useMatches, useNavigate, useParams } from '@tanstack/react-router'
 import {
   TbApps,
@@ -23,7 +25,9 @@ import {
   TbDeviceMobile,
   TbLogout,
   TbSettings,
-  TbUserCircle
+  TbUserCircle,
+  TbSun,
+  TbMoon
 } from 'react-icons/tb'
 
 interface DashboardLayoutProps {
@@ -31,7 +35,10 @@ interface DashboardLayoutProps {
 }
 
 export function DashboardLayout({ children }: DashboardLayoutProps) {
-  const [opened, { toggle }] = useDisclosure()
+  const [mobileOpened, { toggle: toggleMobile }] = useDisclosure()
+  const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true)
+  const { toggleColorScheme } = useMantineColorScheme()
+  const computedColorScheme = useComputedColorScheme('light', { getInitialValueInEffect: true })
   const location = useLocation()
   const navigate = useNavigate()
   const { appId } = useParams({ strict: false }) as { appId?: string }
@@ -54,19 +61,21 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
       navbar={{
         width: 260,
         breakpoint: 'sm',
-        collapsed: { mobile: !opened },
+        collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },
       }}
       padding="xl"
       styles={(theme) => ({
         main: {
-          backgroundColor: theme.colors.dark[7], // Dark mode background
+          backgroundColor: computedColorScheme === 'dark' ? theme.colors.dark[9] : theme.colors.gray[0],
+          transition: 'background-color 0.2s ease',
         },
       })}
     >
       <AppShell.Header px="xl">
         <Group h="100%" justify="space-between">
           <Group>
-            <Burger opened={opened} onClick={toggle} hiddenFrom="sm" size="sm" />
+            <Burger opened={mobileOpened} onClick={toggleMobile} hiddenFrom="sm" size="sm" />
+            <Burger opened={desktopOpened} onClick={toggleDesktop} visibleFrom="sm" size="sm" />
             <Group gap="xs">
               <ThemeIcon
                 size={34}
@@ -88,6 +97,14 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
           </Group>
 
           <Group gap="md">
+            <ActionIcon
+              onClick={() => toggleColorScheme()}
+              variant="default"
+              size="lg"
+              aria-label="Toggle color scheme"
+            >
+              {computedColorScheme === 'dark' ? <TbSun size={18} /> : <TbMoon size={18} />}
+            </ActionIcon>
             <Menu shadow="md" width={200} position="bottom-end">
               <Menu.Target>
                 <Avatar