Added Auth

src/components/sidebar/nav-user.tsx

@@ -0,0 +1,142 @@
+import { HugeiconsIcon } from '@hugeicons/react'
+import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu'
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '../ui/sidebar'
+import {
+  LoginSquare01Icon,
+  Logout01FreeIcons,
+  MoreVerticalIcon,
+  UserAccountIcon,
+} from '@hugeicons/core-free-icons'
+import { toast } from 'sonner'
+import { Link, useNavigate } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+import { useAuth } from '../auth/auth-provider'
+import { authClient } from '@/lib/auth-client'
+import { useQueryClient } from '@tanstack/react-query'
+
+const NavUser = () => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const { isMobile } = useSidebar()
+  const queryClient = useQueryClient()
+  const { data: session, isLoading } = useAuth()
+
+  const signout = async () => {
+    await authClient.signOut({
+      fetchOptions: {
+        onSuccess: () => {
+          navigate({ to: '/' })
+          queryClient.invalidateQueries({ queryKey: ['session'] })
+          toast.success(t('loginPage.messages.logout_success'))
+        },
+        onError: (ctx) => {
+          toast.error(t(`backend.${ctx.error.code}` as any))
+        },
+      },
+    })
+  }
+
+  if (isLoading) return null
+  if (!session?.user)
+    return (
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton tooltip="Sign In">
+            <Link to="/sign-in" className="flex items-center gap-2 w-full">
+              <HugeiconsIcon icon={LoginSquare01Icon} />
+              {t('ui.login_btn')}
+            </Link>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    )
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <SidebarMenuButton
+                size="lg"
+                className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+              />
+            }
+          >
+            <Avatar className="h-8 w-8">
+              <AvatarImage src={session?.user?.image ?? undefined} />
+              <AvatarFallback className="bg-cyan-400 text-white">
+                S
+              </AvatarFallback>
+            </Avatar>
+            <div className="grid flex-1 text-left text-sm leading-tight">
+              <span className="truncate font-medium">
+                {session?.user?.name}
+              </span>
+              <span className="truncate text-xs">{session?.user?.email}</span>
+            </div>
+            <HugeiconsIcon icon={MoreVerticalIcon} />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side={isMobile ? 'bottom' : 'right'}
+            align="end"
+            sideOffset={4}
+          >
+            {/* Dropdown menu content */}
+            <DropdownMenuGroup>
+              <DropdownMenuLabel className="p-0 font-normal">
+                <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                  <Avatar className="h-9 w-9">
+                    <AvatarImage src={session?.user?.image ?? undefined} />
+                    <AvatarFallback className="bg-cyan-400 text-white">
+                      S
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="grid flex-1 text-left text-sm leading-tight">
+                    <span className="truncate font-medium">
+                      {session?.user?.name}
+                    </span>
+                    <span className="truncate text-xs">
+                      {session?.user?.email}
+                    </span>
+                  </div>
+                </div>
+              </DropdownMenuLabel>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <HugeiconsIcon icon={UserAccountIcon} />
+                {t('nav.account')}
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem onClick={signout}>
+                <HugeiconsIcon icon={Logout01FreeIcons} />
+                {t('ui.logout_btn')}
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
+
+export default NavUser