update: ui

src/components/wrappers/dashboard/common/logged-in/logged-in-dropdown.tsx

@@ -1,26 +1,36 @@
 "use client";
 
 import {PropsWithChildren, ReactNode, useState} from "react";
+
 import { useRouter } from "next/navigation";
-import { CircleUser, LogOut } from "lucide-react";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+
+import { LogOut, User } from "lucide-react";
+
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+
 import { signOut } from "@/lib/auth/auth-client";
+
 import {ProfileModal} from "@/components/wrappers/dashboard/common/profile/profile-modal";
-import {Account, Session, User} from "@/db/schema/02_user";
+
+import {Account, Session, User as UserType} from "@/db/schema/02_user";
+
 import {AuthProviderConfig} from "../../../../../../portabase.config";
 
 export type LoggedInDropdownProps = PropsWithChildren<{
-    user: User;
+    user: UserType;
     sessions: Session[];
     currentSession: Session;
     accounts: Account[];
     children: ReactNode;
     providers: AuthProviderConfig[]
-
 }>;
 
+
+
 export const LoggedInDropdown = ({ user, sessions, currentSession, accounts, children, providers }: LoggedInDropdownProps) => {
+
     const router = useRouter();
+
     const [isModalOpen, setIsModalOpen] = useState(false);
 
     return (
@@ -34,34 +44,57 @@ export const LoggedInDropdown = ({ user, sessions, currentSession, accounts, chi
                 onOpenChange={setIsModalOpen}
                 providers={providers}
             />
-
-            <DropdownMenu>
-                <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
-                <DropdownMenuContent side="top" className="min-w-[var(--radix-popper-anchor-width)]">
-                    <DropdownMenuItem onClick={() => setIsModalOpen(!isModalOpen)}>
-                        <div className="flex justify-start items-center gap-2">
-                            <CircleUser size={16} />
-                            <span>Account</span>
-                        </div>
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                        onClick={async () => {
-                            await signOut({
-                                fetchOptions: {
-                                    onSuccess: () => {
-                                        router.push("/login");
-                                    },
-                                },
-                            });
-                        }}
-                    >
-                        <div className="flex justify-start items-center gap-2">
-                            <LogOut size={16} className="text-red-500" />
-                            <span className="text-red-500">Logout</span>
-                        </div>
-                    </DropdownMenuItem>
-                </DropdownMenuContent>
-            </DropdownMenu>
+                        <DropdownMenu>
+                            <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
+                            <DropdownMenuContent
+                                className="min-w-[220px] rounded-xl border-2 border-border bg-popover shadow-none p-1"
+                                align="start"
+                                side="top"
+                                sideOffset={8}
+                            >
+                                <div className="flex flex-col space-y-1 p-2 mb-1">
+                                    <p className="text-sm font-semibold leading-none truncate">{user.name}</p>
+                                    <p className="text-xs leading-none text-muted-foreground truncate">
+                                        {user.email}
+                                    </p>
+                                </div>
+                                <DropdownMenuSeparator className="-mx-1 mb-1 bg-border/50" />
+                                <DropdownMenuItem
+                                    onClick={() => setIsModalOpen(!isModalOpen)}
+                                    className="group gap-2 p-1 cursor-pointer rounded-lg mb-1 transition-colors focus:bg-accent hover:bg-accent/50 border border-transparent"
+                                >
+                                    <div className="flex size-9 items-center justify-center rounded-md border border-border bg-muted/50 shadow-sm transition-all group-hover:shadow-md group-hover:bg-background">
+                                        <User size={18} className="text-muted-foreground group-hover:text-foreground transition-colors" />
+                                    </div>
+                                    <div className="flex flex-col">
+                                        <span className="text-sm font-medium leading-none">Account Settings</span>
+                                    </div>
+                                </DropdownMenuItem>
+                                <DropdownMenuItem
+                                    className="group gap-2 p-1 cursor-pointer rounded-lg transition-colors focus:bg-red-50 dark:focus:bg-red-950/20 border border-transparent text-red-600 focus:text-red-600"
+                                    onClick={async () => {
+                                        await signOut({
+                                            fetchOptions: {
+                                                onSuccess: () => {
+                                                    router.push("/login");
+                                                },
+                                            },
+                                        });
+                                    }}
+                                >
+                                    <div className="flex size-9 items-center justify-center rounded-md border border-red-100 bg-red-50/50 dark:border-red-900/30 dark:bg-red-950/20 shadow-sm transition-all group-hover:shadow-md">
+                                        <LogOut size={18} className="text-red-500" />
+                                    </div>
+                                    <div className="flex flex-col">
+                                        <span className="text-sm font-medium leading-none">Logout</span>
+                                    </div>
+                                </DropdownMenuItem>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
         </>
+
     );
+
 };
+
+

src/components/wrappers/dashboard/common/sidebar/app-sidebar.tsx

@@ -1,9 +1,12 @@
 import {
     Sidebar,
     SidebarContent,
+    SidebarFooter,
     SidebarHeader,
     SidebarMenu,
-    SidebarMenuItem
+    SidebarMenuButton,
+    SidebarMenuItem,
+    SidebarSeparator
 } from "@/components/ui/sidebar";
 import {SidebarLogo} from "@/components/wrappers/dashboard/common/sidebar/logo-sidebar";
 import {SidebarMenuCustomMain} from "@/components/wrappers/dashboard/common/sidebar/menu-sidebar-main";
@@ -12,6 +15,7 @@ import {OrganizationCombobox} from "@/components/wrappers/dashboard/organization
 import {env} from "@/env.mjs";
 import {LoggedInButton} from "@/components/wrappers/dashboard/common/logged-in/logged-in-button.server";
 import {UpdateNotification} from "@/features/updates/components/update-notification";
+import {Book} from "lucide-react";
 
 export function AppSidebar() {
     const projectName = env.PROJECT_NAME;
@@ -33,13 +37,28 @@ export function AppSidebar() {
             </SidebarContent>
 
             <UpdateNotification />
-            
-            <SidebarMenu className="mb-2">
-                <SidebarMenuItem className="p-2">
-                    <LoggedInButton/>
-                </SidebarMenuItem>
-            </SidebarMenu>
-            <SideBarFooterCredit/>
+
+            <SidebarFooter>
+                <SidebarSeparator />
+                <div className="flex flex-col gap-1 p-2">
+                    <a
+                        href="https://portabase.io/docs"
+                        target="_blank"
+                        rel="noreferrer"
+                        className="flex items-center gap-2 px-2 py-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors group-data-[collapsible=icon]:justify-center"
+                    >
+                        <Book className="size-4 shrink-0" />
+                        <span className="group-data-[collapsible=icon]:hidden">Documentation</span>
+                    </a>
+                </div>
+
+                <SidebarMenu className="mb-2">
+                    <SidebarMenuItem className="p-2">
+                        <LoggedInButton/>
+                    </SidebarMenuItem>
+                </SidebarMenu>
+                <SideBarFooterCredit/>
+            </SidebarFooter>
         </Sidebar>
     );
 }