inventree/InvenTree
2
0
Fork 0
mirror of https://github.com/inventree/InvenTree.git synced 2025-04-29 12:06: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

71
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,37 +69,40 @@ export function PanelGroup({
onTabChange={handlePanelChange} onTabChange={handlePanelChange}
keepMounted={false} keepMounted={false}
> >
<Group spacing="xs"> <Tabs.List position="left">
<Divider {panels.map(
size="md" (panel, idx) =>
orientation="vertical" !panel.hidden && (
onClick={() => setShowText(!showText)} <Tooltip
style={{ label={panel.label}
cursor: 'pointer' key={`panel-tab-tooltip-${panel.name}`}
}} >
/> <Tabs.Tab
<Tabs.List> key={`panel-tab-${panel.name}`}
{panels.map( p="xs"
(panel, idx) => value={panel.name}
!panel.hidden && ( icon={panel.icon}
<Tooltip hidden={panel.hidden}
label={panel.label}
key={`panel-tab-tooltip-${panel.name}`}
> >
<Tabs.Tab {expanded && panel.label}
key={`panel-tab-${panel.name}`} </Tabs.Tab>
p="xs" </Tooltip>
value={panel.name} )
icon={panel.icon} )}
hidden={panel.hidden} <Tabs.Tab
> key="panel-tab-collapse-toggle"
{showText && panel.label} p="xs"
</Tabs.Tab> value="collapse-toggle"
</Tooltip> onClick={() => setExpanded(!expanded)}
) icon={
)} expanded ? (
</Tabs.List> <IconLayoutSidebarLeftCollapse opacity={0.35} size={18} />
</Group> ) : (
<IconLayoutSidebarRightCollapse opacity={0.35} size={18} />
)
}
/>
</Tabs.List>
{panels.map( {panels.map(
(panel, idx) => (panel, idx) =>
!panel.hidden && ( !panel.hidden && (