Update Shadcn Sidebar (#73)

Migrated Sidebar to use Shadcn UI's
This commit is contained in:
Giancarlo Buomprisco
2024-10-25 09:43:34 +02:00
committed by GitHub
parent df944bb1e5
commit 14c2220904
48 changed files with 1863 additions and 543 deletions

View File

@@ -86,7 +86,7 @@ export function AccountSelector({
pictureUrl ? (
<UserAvatar pictureUrl={pictureUrl} />
) : (
<PersonIcon className="h-4 min-h-4 w-4 min-w-4" />
<PersonIcon className="h-5 min-h-5 w-5 min-w-5" />
);
return (
@@ -103,7 +103,7 @@ export function AccountSelector({
'dark:shadow-primary/10 group w-full min-w-0 px-2 lg:w-auto lg:max-w-fit',
{
'justify-start': !collapsed,
'm-auto justify-center px-4 lg:w-full': collapsed,
'm-auto justify-center px-2 lg:w-full': collapsed,
},
className,
)}
@@ -111,7 +111,7 @@ export function AccountSelector({
<If
condition={selected}
fallback={
<span className={'flex max-w-full items-center space-x-2'}>
<span className={'flex max-w-full items-center space-x-4'}>
<PersonalAccountAvatar />
<span
@@ -125,11 +125,11 @@ export function AccountSelector({
}
>
{(account) => (
<span className={'flex max-w-full items-center space-x-2'}>
<Avatar className={'h-5 w-5'}>
<span className={'flex max-w-full items-center space-x-4'}>
<Avatar className={'h-6 w-6 rounded-sm'}>
<AvatarImage src={account.image ?? undefined} />
<AvatarFallback className={'group-hover:bg-background'}>
<AvatarFallback className={'group-hover:bg-background rounded-sm'}>
{account.label ? account.label[0] : ''}
</AvatarFallback>
</Avatar>
@@ -210,11 +210,11 @@ export function AccountSelector({
}}
>
<div className={'flex items-center'}>
<Avatar className={'mr-2 h-5 w-5'}>
<Avatar className={'mr-2 h-6 w-6 rounded-sm'}>
<AvatarImage src={account.image ?? undefined} />
<AvatarFallback
className={cn({
className={cn('rounded-sm', {
['bg-background']: value === account.value,
['group-hover:bg-background']:
value !== account.value,
@@ -274,7 +274,7 @@ export function AccountSelector({
function UserAvatar(props: { pictureUrl?: string }) {
return (
<Avatar className={'h-6 w-6'}>
<Avatar className={'h-6 w-6 rounded-sm'}>
<AvatarImage src={props.pictureUrl} />
</Avatar>
);