import clsx from 'clsx';
import React from 'react';
import {CustomMenu} from '../menus/custom-menu';
import {Trans} from '../i18n/trans';
import {useSettings} from '../core/settings/use-settings';
interface Props {
className?: string;
isCompactMode?: boolean;
}
export function AdminSidebar({className, isCompactMode}: Props) {
const {version} = useSettings();
return (
<div
className={clsx(
className,
'relative flex flex-col gap-20 overflow-y-auto border-r bg-alt px-12 pb-16 pt-26 text-sm font-medium text-muted',
)}
>
<CustomMenu
matchDescendants={to => to === '/admin'}
menu="admin-sidebar"
orientation="vertical"
onlyShowIcons={isCompactMode}
itemClassName={({isActive}) =>
clsx(
'block w-full rounded-button py-12 px-16',
isActive
? 'bg-primary/6 text-primary font-semibold'
: 'hover:bg-hover',
)
}
gap="gap-8"
/>
{!isCompactMode && (
<div className="mt-auto gap-14 px-16 text-xs">
<Trans message="Version: :number" values={{number: version}} />
</div>
)}
</div>
);
}