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

Fix mobile menu

Browse source
This commit is contained in:
Arthur Belleville 2025-04-06 18:41:48 +02:00
parent 29babfd38a
commit 85d94c8536
No known key found for this signature in database
2 changed files with 14 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
ui/src/components/Layout.tsx
View file

@ -16,7 +16,10 @@ export function Layout({ children }: LayoutProps) {
<Button
variant="plain"
isIconOnly
className="fixed top-4 left-4 z-50 md:hidden"
className={twMerge(
"fixed z-50 md:hidden",
isMobileMenuOpen ? "top-2 left-15" : "top-2 left-4"
)}
onPress={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
>
<Icon>
@ -32,7 +35,7 @@ export function Layout({ children }: LayoutProps) {
: "-translate-x-full md:translate-x-0"
)}
>
<SideNavigation />
<SideNavigation isMobileMenuOpen={isMobileMenuOpen} />
</div>
<main className="flex-1 overflow-auto p-4 md:p-6">{children}</main>

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

@ -201,7 +201,11 @@ export function ControlledOpenState({ isCollapsed }: { isCollapsed: boolean }) {
);
}
export const SideNavigation = () => {
export const SideNavigation = ({
isMobileMenuOpen,
}: {
isMobileMenuOpen: boolean;
}) => {
const [isCollapsed, setIsCollapsed] = useState(false);
return (
@ -212,7 +216,9 @@ export const SideNavigation = () => {
isCollapsed ? "w-14" : "w-52",
"md:flex",
"transform md:transform-none",
isCollapsed ? "-translate-x-0" : "-translate-x-full md:translate-x-0"
isMobileMenuOpen
? "translate-x-0"
: "-translate-x-full md:translate-x-0"
)}
>
<div className="relative flex flex-col items-center px-3 py-3">
@ -231,7 +237,7 @@ export const SideNavigation = () => {
<h1
className={twMerge(
"text-lg font-bold transition-all duration-300 text-slate-900 dark:text-white whitespace-nowrap",
isCollapsed ? "w-0 opacity-0 h-0" : "w-auto opacity-100"
isCollapsed ? "w-0 h-0 opacity-0" : "w-auto opacity-100"
)}
>
XTablo