✨ Auth check

🐛 Fix auth related bugs

src/components/CapAppBar.tsx

@@ -1,12 +1,17 @@
-import { AppBar, Box, IconButton, Toolbar, Typography } from '@mui/material'
+import { useUserStore } from '@/services/user'
+import { AppBar, Avatar, Box, IconButton, Toolbar, Typography, useTheme } from '@mui/material'
 import MenuIcon from '@mui/icons-material/Menu'
 import AccountCircle from '@mui/icons-material/AccountCircle'
 import Link from 'next/link'
+import { getAttachmentUrl } from '@/services/network'
 
 export function CapAppBar() {
+  const userStore = useUserStore()
+  const theme = useTheme()
+
   return (
     <Box sx={{ flexGrow: 1 }}>
-      <AppBar position="static" elevation={0} color="transparent">
+      <AppBar position="static" elevation={0} color={'transparent'}>
         <Toolbar>
           <IconButton size="large" edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }}>
             <MenuIcon />
@@ -17,7 +22,7 @@ export function CapAppBar() {
             </Typography>
           </Link>
 
-          <Link href="/auth/login" passHref>
+          <Link href={userStore.account ? '/users/me' : '/auth/login'} passHref>
             <IconButton
               size="large"
               aria-label="account of current user"
@@ -25,7 +30,13 @@ export function CapAppBar() {
               aria-haspopup="true"
               color="inherit"
             >
-              <AccountCircle />
+              {userStore.account ? (
+                <Avatar sx={{ backgroundColor: 'transparent' }} src={getAttachmentUrl(userStore.account.avatar)} />
+              ) : (
+                <Avatar sx={{ backgroundColor: 'transparent' }}>
+                  <AccountCircle sx={{ color: theme.palette.text.primary }} />
+                </Avatar>
+              )}
             </IconButton>
           </Link>
         </Toolbar>