added theme switcher, fixed themes

app/client/pages/__root.tsx

@@ -1,10 +1,12 @@
-import { Icon, Stack, Text } from '@chakra-ui/react';
+import { Separator, Icon, Menu, Stack, Text } from '@chakra-ui/react';
 import { createRootRouteWithContext, Link, Outlet } from '@tanstack/react-router';
 import React from 'react';
+import { Avatar } from '../components/ui/avatar';
 import { Button } from '../components/ui/button';
 import { Tooltip } from '../components/ui/tooltip';
 import { useAuth } from '../hooks/auth';
 import { appName } from '../main';
+import { ColorModeButton } from '../components/ui/color-mode';
 
 const TanStackRouterDevtools =
   process.env.NODE_ENV === 'production'
@@ -41,8 +43,47 @@ export const Route = createRootRouteWithContext<RouterContext>()({
             </Link>
           </Stack>
 
-          <Stack flexDirection="row" alignItems="center">
-            {!isAuthenticated ? (
+          <Stack flexDirection="row" alignItems="center" gap={4}>
+            <ColorModeButton />
+
+            {isAuthenticated ? (
+              <Menu.Root>
+                <Menu.Trigger>
+                  <Avatar
+                    // src={'https://avatars.githubusercontent.com/u/40203084?v=4'}
+                    fallback={'A'}
+                  />
+                </Menu.Trigger>
+                <Menu.Positioner mt={2}>
+                  <Menu.Content>
+                    <>
+                      <Menu.Item value="logout" onClick={async () => logout()}>
+                        <Tooltip content="Log out">
+                          <Stack direction="row">
+                            <Icon color="colorPalette.500" fontSize="xl">
+                              <i className="nf nf-fa-sign_out" />
+                            </Icon>
+                            Log out
+                          </Stack>
+                        </Tooltip>
+                      </Menu.Item>
+                    </>
+                  </Menu.Content>
+                </Menu.Positioner>
+              </Menu.Root>
+            ) : (
+              <>
+                <Separator orientation="vertical" height={5} />
+                <Link to="/login">
+                  <Button>Sign in</Button>
+                </Link>
+                <Link to="/register">
+                  <Button>Sign up</Button>
+                </Link>
+              </>
+            )}
+
+            {/*             {!isAuthenticated ? (
               <>
                 <Link to="/login">
                   <Button>Sign in</Button>
@@ -57,10 +98,10 @@ export const Route = createRootRouteWithContext<RouterContext>()({
                   <i className="nf nf-fa-sign_out" />
                 </Icon>
               </Tooltip>
-            )}
+            )} */}
           </Stack>
         </Stack>
-        <hr style={{ padding: '4px' }} />
+        <Separator style={{ padding: '4px' }} />
         <Outlet />
         <TanStackRouterDevtools />
       </Stack>