External/portabase
1
0
Fork 0
mirror of https://github.com/Portabase/portabase.git synced 2026-07-14 11:16:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

Working on the dropdown logged in dashboard.

Browse Source
This commit is contained in:
charles-gauthereau
2024-11-10 09:34:27 +01:00
parent 6d90bb23c1
commit ce0265bd8c
9 changed files with 136 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/wrappers/Dashboard/LoggedInButton/LoggedInButton.tsx
+29
View File
@@ -0,0 +1,29 @@
import {Button} from "@/components/ui/button"
import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar"
import {currentUser} from "@/auth/current-user";
import {LoggedInDropdown} from "@/components/wrappers/Dashboard/LoggedInDropdown/LoggedInDropdown";
import {SidebarMenuButton} from "@/components/ui/sidebar";
import {ChevronUp} from "lucide-react";
export const LoggedInButton = async () => {
const user = await currentUser()
// if (!user) {
// return <SignInButton/>
// }
return (
<LoggedInDropdown>
<SidebarMenuButton>
<Avatar className="size-6">
<AvatarFallback>{user.name?.[0]}</AvatarFallback>
{user.image ? (
<AvatarImage src={user.image} alt={`${user.name ?? "-"}'s profile picture`}/>
) : null}
</Avatar>
<span>{user.name}</span>
<ChevronUp className="ml-auto"/>
</SidebarMenuButton>
</LoggedInDropdown>
)
}
src/components/wrappers/Dashboard/LoggedInDropdown/LoggedInDropdown.tsx
+40
View File
@@ -0,0 +1,40 @@
"use client"
import {PropsWithChildren} from "react";
import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from "@/components/ui/dropdown-menu";
import {signOutAction} from "@/features/auth/auth.action";
import {Home, LogOut, Square, User, Gauge, User2, ChevronUp} from "lucide-react";
import Link from "next/link";
import {useTranslations} from "use-intl";
import {SidebarMenuButton} from "@/components/ui/sidebar";
import {UserAvatar} from "@/components/wrappers/Dashboard/UserAvatar/UserAvatar";
export type LoggedInDropdownProps = PropsWithChildren<{}>
export const LoggedInDropdown = (props: LoggedInDropdownProps) => {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
{props.children}
</DropdownMenuTrigger>
<DropdownMenuContent
side="top"
className="w-[--radix-popper-anchor-width]"
>
<DropdownMenuItem>
<span>Account</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Billing</span>
</DropdownMenuItem>
<DropdownMenuItem onClick={() => {
signOutAction()
}}>
<span>Sign out</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}
src/components/wrappers/Dashboard/SideBar/app-sidebar.tsx
+136
View File
@@ -0,0 +1,136 @@
import {
Sidebar,
SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent,
SidebarGroupLabel,
SidebarHeader,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from "@/components/ui/sidebar"
import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from "@/components/ui/dropdown-menu";
import {Calendar, ChevronDown, ChevronUp, Home, Inbox, Search, Settings, User2} from "lucide-react";
import Link from "next/link";
import {signOutAction} from "@/features/auth/auth.action";
import {UserAvatar} from "@/components/wrappers/Dashboard/UserAvatar/UserAvatar";
import {LoggedInDropdown} from "@/components/wrappers/Dashboard/LoggedInDropdown/LoggedInDropdown";
import {LoggedInButton} from "@/components/wrappers/Dashboard/LoggedInButton/LoggedInButton";
export function AppSidebar() {
const BASE_URL = "/dashboard";
// Menu items.
const items = [
{
title: "Home",
url: "/",
icon: Home,
},
{
title: "Inbox",
url: "/home",
icon: Inbox,
},
{
title: "Calendar",
url: "#",
icon: Calendar,
},
{
title: "Search",
url: "#",
icon: Search,
},
{
title: "Settings",
url: "#",
icon: Settings,
},
]
return (
<Sidebar collapsible="icon">
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<SidebarMenuButton>
Select Workspace
<ChevronDown className="ml-auto" />
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-[--radix-popper-anchor-width]">
<DropdownMenuItem>
<span>Acme Inc</span>
</DropdownMenuItem>
<DropdownMenuItem>
<span>Acme Corp.</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</SidebarMenuItem>
</SidebarMenu>
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Application</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{items.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild>
<Link href={`${BASE_URL}/${item.url}`}>
<item.icon />
<span>{item.title}</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
<SidebarFooter>
<SidebarMenu>
<SidebarMenuItem>
{/*<DropdownMenu>*/}
{/* <DropdownMenuTrigger asChild>*/}
{/* <SidebarMenuButton>*/}
{/* <UserAvatar/>*/}
{/* <User2 /> Username*/}
{/* <ChevronUp className="ml-auto" />*/}
{/* </SidebarMenuButton>*/}
{/* </DropdownMenuTrigger>*/}
{/* <DropdownMenuContent*/}
{/* side="top"*/}
{/* className="w-[--radix-popper-anchor-width]"*/}
{/* >*/}
{/* <DropdownMenuItem>*/}
{/* <span>Account</span>*/}
{/* </DropdownMenuItem>*/}
{/* <DropdownMenuItem>*/}
{/* <span>Billing</span>*/}
{/* </DropdownMenuItem>*/}
{/* /!*<DropdownMenuItem onClick={() => {*!/*/}
{/* /!* signOutAction()*!/*/}
{/* /!*}}>*!/*/}
{/* /!* <span>Sign out</span>*!/*/}
{/* /!*</DropdownMenuItem>*!/*/}
{/* </DropdownMenuContent>*/}
{/*</DropdownMenu>*/}
<LoggedInButton/>
</SidebarMenuItem>
</SidebarMenu>
</SidebarFooter>
</Sidebar>
)
}
src/components/wrappers/Dashboard/UserAvatar/UserAvatar.tsx
+21
View File
@@ -0,0 +1,21 @@
import {currentUser, requiredCurrentUser} from "@/auth/current-user";
import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
export type UserAvatarProps = {}
export const UserAvatar = async () => {
const user = await currentUser()
return (
<div>
<Avatar className="size-6">
<AvatarFallback>{user.name?.[0]}</AvatarFallback>
{user.image ? (
<AvatarImage src={user.image} alt={`${user.name ?? "-"}'s profile picture`}/>
) : null}
</Avatar>
</div>
)
}