inventree/InvenTree
2
0
Fork 0
mirror of https://github.com/inventree/InvenTree.git synced 2025-04-29 20:16:44 +00:00
Code

Improved implementation of panel collapse (#5708)

Browse Source 
* Improved implementation of panel collapse

* Slight tweaks
This commit is contained in:
Oliver 2023-10-16 20:34:21 +11:00 committed by GitHub
parent fa39ce8524
commit a9d18ba28f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 39 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/frontend/src/components/nav/PanelGroup.tsx
View File

@ -1,4 +1,8 @@
import { Divider, Group, Paper, Stack, Tabs, Tooltip } from '@mantine/core'; import { Divider, Paper, Stack, Tabs, Tooltip } from '@mantine/core';
import {
IconLayoutSidebarLeftCollapse,
IconLayoutSidebarRightCollapse
} from '@tabler/icons-react';
import { ReactNode } from 'react'; import { ReactNode } from 'react';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
@ -55,7 +59,7 @@ export function PanelGroup({
} }
} }
const [showText, setShowText] = useState<boolean>(true); const [expanded, setExpanded] = useState<boolean>(true);
return ( return (
<Paper p="sm" radius="xs" shadow="xs"> <Paper p="sm" radius="xs" shadow="xs">
@ -65,16 +69,7 @@ export function PanelGroup({
onTabChange={handlePanelChange} onTabChange={handlePanelChange}
keepMounted={false} keepMounted={false}
> >
<Group spacing="xs"> <Tabs.List position="left">
<Divider
size="md"
orientation="vertical"
onClick={() => setShowText(!showText)}
style={{
cursor: 'pointer'
}}
/>
<Tabs.List>
{panels.map( {panels.map(
(panel, idx) => (panel, idx) =>
!panel.hidden && ( !panel.hidden && (
@ -89,13 +84,25 @@ export function PanelGroup({
icon={panel.icon} icon={panel.icon}
hidden={panel.hidden} hidden={panel.hidden}
> >
{showText && panel.label} {expanded && panel.label}
</Tabs.Tab> </Tabs.Tab>
</Tooltip> </Tooltip>
) )
)} )}
<Tabs.Tab
key="panel-tab-collapse-toggle"
p="xs"
value="collapse-toggle"
onClick={() => setExpanded(!expanded)}
icon={
expanded ? (
<IconLayoutSidebarLeftCollapse opacity={0.35} size={18} />
) : (
<IconLayoutSidebarRightCollapse opacity={0.35} size={18} />
)
}
/>
</Tabs.List> </Tabs.List>
</Group>
{panels.map( {panels.map(
(panel, idx) => (panel, idx) =>
!panel.hidden && ( !panel.hidden && (