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

fix: reduce mobile sidebar width from w-48 to w-40 and always show expanded on mobile overlay

Browse source 
On mobile, the sidebar was 192px wide (w-48) and could appear collapsed (icons-only)
depending on prior desktop state. This introduces effectivelyCollapsed to always force
expanded mode when the mobile overlay is open, and uses a narrower w-40 (160px) width
to reduce screen coverage on small devices like iPhone SE (375px).

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Arthur Belleville 2026-04-03 08:24:37 +02:00
parent 63cccc4721
commit d209504292
No known key found for this signature in database
1 changed files with 19 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
apps/main/src/components/NavigationBar.tsx
View file

@ -284,7 +284,10 @@ export function UserMenuPopover({ isCollapsed }: { isCollapsed: boolean }) {
export const SideNavigation = ({ isMobileMenuOpen }: { isMobileMenuOpen: boolean }) => {
const isCollapsable = !isMobileMenuOpen;
const [isCollapsed, setIsCollapsed] = useState(!isCollapsable);
const [isCollapsed, setIsCollapsed] = useState(false);
// On mobile overlay, always show expanded (never collapsed)
const effectivelyCollapsed = isMobileMenuOpen ? false : isCollapsed;
return (
<nav
@ -292,7 +295,11 @@ export const SideNavigation = ({ isMobileMenuOpen }: { isMobileMenuOpen: boolean
className={twMerge(
"group isolate flex flex-col overflow-y-auto overflow-x-hidden bg-navbar-background transition-all duration-300",
"h-full md:h-screen",
isCollapsed ? "w-16" : "w-48",
isMobileMenuOpen
? "w-40"
: effectivelyCollapsed
? "w-16"
: "w-48",
"md:flex",
// On mobile in standalone mode, respect safe area insets
"pl-[env(safe-area-inset-left,0px)] pt-[env(safe-area-inset-top,0px)] pb-[env(safe-area-inset-bottom,0px)]"
@ -303,19 +310,19 @@ export const SideNavigation = ({ isMobileMenuOpen }: { isMobileMenuOpen: boolean
to="/"
className={twMerge(
"flex flex-col items-center gap-2 w-full",
isCollapsed ? "justify-center" : ""
effectivelyCollapsed ? "justify-center" : ""
)}
aria-label="Home"
>
<img
src={getXtabloIcon()}
alt="Logo XTablo"
className={twMerge(isCollapsed ? "w-8 h-8" : "w-16 h-16", "rounded-lg")}
className={twMerge(effectivelyCollapsed ? "w-8 h-8" : "w-16 h-16", "rounded-lg")}
/>
<h1
className={twMerge(
"text-lg font-bold transition-all duration-300 text-gray-900 dark:text-white whitespace-nowrap",
isCollapsed ? "w-0 h-0 opacity-0" : "w-auto opacity-100"
effectivelyCollapsed ? "w-0 h-0 opacity-0" : "w-auto opacity-100"
)}
>
XTablo {isProd ? "" : isStaging ? "Staging" : "Dev"}
@ -326,10 +333,10 @@ export const SideNavigation = ({ isMobileMenuOpen }: { isMobileMenuOpen: boolean
variant="ghost"
size="icon"
onClick={() => setIsCollapsed(!isCollapsed)}
aria-label={isCollapsed ? "Expand navigation" : "Collapse navigation"}
aria-expanded={!isCollapsed}
aria-label={effectivelyCollapsed ? "Expand navigation" : "Collapse navigation"}
aria-expanded={!effectivelyCollapsed}
className={twMerge(
isCollapsed ? "relative" : "absolute top-2 right-2",
effectivelyCollapsed ? "relative" : "absolute top-2 right-2",
"size-5 p-1",
"text-gray-500 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white",
"transition-all duration-300",
@ -339,18 +346,18 @@ export const SideNavigation = ({ isMobileMenuOpen }: { isMobileMenuOpen: boolean
"hover:scale-110"
)}
>
{isCollapsed ? <PlusIcon aria-hidden="true" /> : <MinusIcon aria-hidden="true" />}
{effectivelyCollapsed ? <PlusIcon aria-hidden="true" /> : <MinusIcon aria-hidden="true" />}
</Button>
)}
</div>
<MainNavigation isCollapsed={isCollapsed} />
<MainNavigation isCollapsed={effectivelyCollapsed} />
<div
className={twMerge(
"bg-navbar-background flex flex-col px-1 pb-1.5 w-full mt-auto gap-1",
isCollapsed ? "pl-2.5 pr-3.5" : ""
effectivelyCollapsed ? "pl-2.5 pr-3.5" : ""
)}
>
<UserMenuPopover isCollapsed={isCollapsed} />
<UserMenuPopover isCollapsed={effectivelyCollapsed} />
</div>
</nav>
);