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

Improve navbar

Browse source
This commit is contained in:
Arthur Belleville 2025-04-06 18:47:55 +02:00
parent 85d94c8536
commit 9ab6dfe53e
No known key found for this signature in database
2 changed files with 24 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -11,6 +11,7 @@ interface LayoutProps {
export function Layout({ children }: LayoutProps) {
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
return (
<div className="flex h-screen">
<Button
@ -18,7 +19,7 @@ export function Layout({ children }: LayoutProps) {
isIconOnly
className={twMerge(
"fixed z-50 md:hidden",
isMobileMenuOpen ? "top-2 left-15" : "top-2 left-4"
isMobileMenuOpen ? "top-2 left-55" : "top-2 left-4"
)}
onPress={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
>

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

@ -206,7 +206,9 @@ export const SideNavigation = ({
}: {
isMobileMenuOpen: boolean;
}) => {
const [isCollapsed, setIsCollapsed] = useState(false);
const isCollapsable = !isMobileMenuOpen;
const [isCollapsed, setIsCollapsed] = useState(isCollapsable ? true : false);
return (
<div
@ -243,23 +245,25 @@ export const SideNavigation = ({
XTablo
</h1>
</RouterLink>
<Button
variant="plain"
isIconOnly
onPress={() => setIsCollapsed(!isCollapsed)}
className={twMerge(
isCollapsed ? "relative" : "absolute top-2 right-2",
"size-5 p-1",
"text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100",
"transition-all duration-300",
"bg-gray-200 dark:bg-gray-900",
"rounded-full shadow-md",
"opacity-0 group-hover:opacity-100",
"hover:scale-110"
)}
>
<Icon>{isCollapsed ? <PlusIcon /> : <MinusIcon />}</Icon>
</Button>
{isCollapsable && (
<Button
variant="plain"
isIconOnly
onPress={() => setIsCollapsed(!isCollapsed)}
className={twMerge(
isCollapsed ? "relative" : "absolute top-2 right-2",
"size-5 p-1",
"text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100",
"transition-all duration-300",
"bg-gray-200 dark:bg-gray-900",
"rounded-full shadow-md",
"opacity-0 group-hover:opacity-100",
"hover:scale-110"
)}
>
<Icon>{isCollapsed ? <PlusIcon /> : <MinusIcon />}</Icon>
</Button>
)}
</div>
<MainNavigation isCollapsed={isCollapsed} />