From adf189dab994d6a0d5c4f8ef2d5ddc85e9360b1a Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Tue, 12 Aug 2025 14:03:07 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix=20(sidebar):=20fix=20sidebar?=
 =?UTF-8?q?=20user=20info=20when=20user=20is=20not=20logged=20in?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/layout/SidebarNavFooter.vue | 112 +++++++++++----------
 1 file changed, 57 insertions(+), 55 deletions(-)

diff --git a/app/components/layout/SidebarNavFooter.vue b/app/components/layout/SidebarNavFooter.vue
index d3b4552e..0e07e822 100644
--- a/app/components/layout/SidebarNavFooter.vue
+++ b/app/components/layout/SidebarNavFooter.vue
@@ -22,73 +22,75 @@ const showModalTheme = ref(false)
 </script>
 
 <template>
-  <SidebarMenu>
-    <SidebarMenuItem>
-      <DropdownMenu>
-        <DropdownMenuTrigger as-child>
-          <SidebarMenuButton
-            size="lg"
-            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-          >
-            <Avatar class="h-8 w-8 rounded-lg">
-              <AvatarImage src="" :alt="userStore?.user_name" />
-              <AvatarFallback class="rounded-lg">
-                {{
-                  userStore?.user_name
-                    ?.split(' ')
-                    .map((n) => n[0])
-                    .join('')
-                }}
-              </AvatarFallback>
-            </Avatar>
-            <div class="grid flex-1 text-left text-sm leading-tight">
-              <span class="truncate font-semibold">{{ userStore?.user_name }}</span>
-              <span class="truncate text-xs">{{ userStore?.user_email }}</span>
-            </div>
-            <Icon name="i-lucide-chevrons-up-down" class="ml-auto size-4" />
-          </SidebarMenuButton>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent
-          class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
-          :side="isMobile ? 'bottom' : 'right'"
-          align="end"
-        >
-          <DropdownMenuLabel class="p-0 font-normal">
-            <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+  <ClientOnly>
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <SidebarMenuButton
+              size="lg"
+              class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
               <Avatar class="h-8 w-8 rounded-lg">
-                <AvatarImage src="" :alt="userStore?.user_name" />
+                <AvatarImage src="" :alt="userStore?.user_name || 'system'" />
                 <AvatarFallback class="rounded-lg">
                   {{
                     userStore?.user_name
                       ?.split(' ')
                       .map((n) => n[0])
-                      .join('')
+                      .join('') || ''
                   }}
                 </AvatarFallback>
               </Avatar>
               <div class="grid flex-1 text-left text-sm leading-tight">
-                <span class="truncate font-semibold">{{ userStore?.user_name }}</span>
-                <span class="truncate text-xs">{{ userStore?.user_email }}</span>
+                <span class="truncate font-semibold">{{ userStore?.user_name || '' }}</span>
+                <span class="truncate text-xs">{{ userStore?.user_email || '' }}</span>
               </div>
-            </div>
-          </DropdownMenuLabel>
-          <DropdownMenuSeparator />
-          <DropdownMenuSeparator />
-          <DropdownMenuGroup>
-            <DropdownMenuItem @click="showModalTheme = true">
-              <Icon name="i-lucide-user" />
-              Profile
+              <Icon name="i-lucide-chevrons-up-down" class="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            :side="isMobile ? 'bottom' : 'right'"
+            align="end"
+          >
+            <DropdownMenuLabel class="p-0 font-normal">
+              <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar class="h-8 w-8 rounded-lg">
+                  <AvatarImage src="" :alt="userStore?.user_name || 'system'" />
+                  <AvatarFallback class="rounded-lg">
+                    {{
+                      userStore?.user_name
+                        ?.split(' ')
+                        .map((n) => n[0])
+                        .join('') || ''
+                    }}
+                  </AvatarFallback>
+                </Avatar>
+                <div class="grid flex-1 text-left text-sm leading-tight">
+                  <span class="truncate font-semibold">{{ userStore?.user_name || '' }}</span>
+                  <span class="truncate text-xs">{{ userStore?.user_email || '' }}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem @click="showModalTheme = true">
+                <Icon name="i-lucide-user" />
+                Profile
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem @click="handleLogout">
+              <Icon name="i-lucide-log-out" />
+              Log out
             </DropdownMenuItem>
-          </DropdownMenuGroup>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem @click="handleLogout">
-            <Icon name="i-lucide-log-out" />
-            Log out
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </SidebarMenuItem>
-  </SidebarMenu>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  </ClientOnly>
 </template>
 
 <style scoped></style>