Mirrored_Repos/InvenTree
1
0
Fork 0
mirror of https://github.com/inventree/InvenTree synced 2024-08-30 18:33:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

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 { useEffect, useState } from 'react';
@ -55,7 +59,7 @@ export function PanelGroup({
}
}
const [showText, setShowText] = useState<boolean>(true);
const [expanded, setExpanded] = useState<boolean>(true);
return (
<Paper p="sm" radius="xs" shadow="xs">
@ -65,37 +69,40 @@ export function PanelGroup({
onTabChange={handlePanelChange}
keepMounted={false}
>
<Group spacing="xs">
<Divider
size="md"
orientation="vertical"
onClick={() => setShowText(!showText)}
style={{
cursor: 'pointer'
}}
/>
<Tabs.List>
{panels.map(
(panel, idx) =>
!panel.hidden && (
<Tooltip
label={panel.label}
key={`panel-tab-tooltip-${panel.name}`}
<Tabs.List position="left">
{panels.map(
(panel, idx) =>
!panel.hidden && (
<Tooltip
label={panel.label}
key={`panel-tab-tooltip-${panel.name}`}
>
<Tabs.Tab
key={`panel-tab-${panel.name}`}
p="xs"
value={panel.name}
icon={panel.icon}
hidden={panel.hidden}
>
<Tabs.Tab
key={`panel-tab-${panel.name}`}
p="xs"
value={panel.name}
icon={panel.icon}
hidden={panel.hidden}
>
{showText && panel.label}
</Tabs.Tab>
</Tooltip>
)
)}
</Tabs.List>
</Group>
{expanded && panel.label}
</Tabs.Tab>
</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>
{panels.map(
(panel, idx) =>
!panel.hidden && (