arthur/xtablo-source
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 5

Improve layout of the navbar

Browse source
This commit is contained in:
Arthur Belleville 2025-04-07 08:50:34 +02:00
parent 50221af006
commit bc115d2e8e
No known key found for this signature in database
1 changed files with 55 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
ui/src/components/NavigationBar.tsx
View file

@ -69,7 +69,7 @@ function NavLink(props: NavLinkProps) {
"[&>[data-ui=notification-badge]]:-translate-y-1/2",
"[&>[data-ui=notification-badge]]:bg-navbar-darker",
"[&>[data-ui=notification-badge]]:p-3",
"[&>[data-ui=notification-badge]]:text-xs/6",
"[&>[data-ui=nxotification-badge]]:text-xs/6",
"[&>[data-ui=notification-badge]]:font-semibold",
isActive
? "bg-navbar-darker font-semibold text-white [&>[data-ui=notification-badge]]:bg-transparent"
@ -98,11 +98,11 @@ export function UserMenuPopover({ isCollapsed }: { isCollapsed: boolean }) {
ref={ref}
isIconOnly={isCollapsed}
className={twMerge(
"flex items-center w-90 justify-start hover:bg-navbar-darker"
"flex items-center justify-start hover:bg-navbar-darker w-full"
)}
>
<Avatar
className="rounded-full"
className={twMerge("rounded-full", isCollapsed ? "size-7" : "size-8")}
src={session?.user?.user_metadata?.avatar_url}
alt="Avatar"
/>
@ -177,9 +177,9 @@ export const SideNavigation = ({
return (
<div
className={twMerge(
"group isolate flex flex-col overflow-y-auto bg-navbar-background transition-all duration-300",
"group isolate flex flex-col overflow-y-auto overflow-x-hidden bg-navbar-background transition-all duration-300",
"fixed md:relative h-screen z-50",
isCollapsed ? "w-20" : "w-52",
isCollapsed ? "w-16" : "w-48",
"md:flex",
"transform md:transform-none",
isMobileMenuOpen
@ -187,18 +187,21 @@ export const SideNavigation = ({
: "-translate-x-full md:translate-x-0"
)}
>
<div className="relative flex flex-col items-center px-3 py-3">
<div className="relative flex flex-col items-center px-2 py-3 w-full">
<RouterLink
to="/"
className={twMerge(
"flex flex-col items-center gap-2",
isCollapsed ? "w-full justify-center" : ""
"flex flex-col items-center gap-2 w-full",
isCollapsed ? "justify-center" : ""
)}
>
<img
src={logo}
alt="Logo XTablo"
className={twMerge(isCollapsed ? "w-8 h-8" : "w-18 h-18")}
className={twMerge(
isCollapsed ? "w-8 h-8" : "w-16 h-16",
"rounded-lg"
)}
/>
<h1
className={twMerge(
@ -230,7 +233,12 @@ export const SideNavigation = ({
)}
</div>
<MainNavigation isCollapsed={isCollapsed} />
<div className="bg-navbar-background sticky bottom-0 left-0 flex mx-3 py-2">
<div
className={twMerge(
"bg-navbar-background flex px-1 pb-1.5 w-full",
isCollapsed ? "pl-2.5 pr-3.5" : ""
)}
>
<UserMenuPopover isCollapsed={isCollapsed} />
</div>
</div>
@ -242,43 +250,53 @@ export function MainNavigation({ isCollapsed }: { isCollapsed: boolean }) {
{
path: "/",
label: "Tableau de Bord",
icon: <TableIcon className="w-4 h-4" />,
icon: <TableIcon className="w-5 h-5" />,
},
{
path: "/devis",
label: "Devis",
icon: <SettingsIcon className="w-4 h-4" />,
icon: <SettingsIcon className="w-5 h-5" />,
},
{
path: "/factures",
label: "Factures",
icon: <SettingsIcon className="w-4 h-4" />,
icon: <SettingsIcon className="w-5 h-5" />,
},
{
path: "/planning",
label: "Planning",
icon: <SettingsIcon className="w-4 h-4" />,
icon: <SettingsIcon className="w-5 h-5" />,
},
{
path: "/chantiers",
label: "Chantiers",
icon: <ConstructionIcon className="w-4 h-4" />,
icon: <ConstructionIcon className="w-5 h-5" />,
},
];
return (
<nav className="flex flex-1 flex-col">
<ul className="grid gap-y-0.5 px-2 py-3">
<ul
className={twMerge(
"grid gap-y-1 py-3",
isCollapsed ? "pl-2.5 pr-3" : ""
)}
>
{navItems.map(({ path, label, icon }) => (
<li key={label}>
<NavLink>
<RouterLink to={path}>
<div className="flex items-center gap-x-2">
<RouterLink to={path} className="w-full">
<div
className={twMerge(
"flex items-center gap-x-2",
isCollapsed ? "" : "pl-2"
)}
>
<Icon>{icon}</Icon>
<span
className={twMerge(
"text-sm transition-all duration-300",
isCollapsed ? "opacity-0 w-0" : "opacity-100"
isCollapsed ? "opacity-0 w-0 hidden" : "opacity-100"
)}
>
{label}
@ -289,16 +307,24 @@ export function MainNavigation({ isCollapsed }: { isCollapsed: boolean }) {
</li>
))}
</ul>
<ul className="mt-auto grid gap-y-0.5 px-2 py-2">
<ul
className={twMerge(
"mt-auto grid gap-y-1 py-1",
isCollapsed ? "pl-2.5 pr-3" : ""
)}
>
<li>
<NavLink>
<RouterLink to="/">
<RouterLink
to="/"
className={twMerge("w-full", isCollapsed ? "" : "pl-2")}
>
<div className="flex items-center gap-x-2">
<HelpCircleIcon className="w-4 h-4" />
<HelpCircleIcon className="w-5 h-5" />
<span
className={twMerge(
"text-sm transition-all duration-300",
isCollapsed ? "opacity-0 w-0" : "opacity-100"
isCollapsed ? "opacity-0 w-0 hidden" : "opacity-100"
)}
>
Support
@ -309,13 +335,16 @@ export function MainNavigation({ isCollapsed }: { isCollapsed: boolean }) {
</li>
<li>
<NavLink>
<RouterLink to="/">
<RouterLink
to="/"
className={twMerge("w-full", isCollapsed ? "" : "pl-2")}
>
<div className="flex items-center gap-x-2">
<SendIcon className="w-4 h-4" />
<SendIcon className="w-5 h-5" />
<span
className={twMerge(
"text-sm transition-all duration-300",
isCollapsed ? "opacity-0 w-0" : "opacity-100"
isCollapsed ? "opacity-0 w-0 hidden" : "opacity-100"
)}
>
Feedback