Skip to content

Commit 3a14771

Browse files
jsajaljsajal
authored
Merge pull request #109 from FlowTestAI/ui-improvements
Adding functionality to collapse the directory sidebar on click of collapse button in footer
2 parents 67064c3 + aadbd1b commit 3a14771

7 files changed

Lines changed: 72 additions & 28 deletions

File tree

‎.changeset/curvy-files-tie.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"flowtestai": minor
3+
---
4+
5+
Collapse sidebar to give more real estate to canvas

‎src/components/layouts/SplitPane.js‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,33 @@ import 'allotment/dist/style.css';
44
import Workspace from '../organisms/workspace/Workspace';
55
import AppNavBar from 'components/organisms/AppNavBar';
66
import SideBar from 'components/organisms/SideBar';
7+
import useNavigationStore from 'stores/AppNavBarStore';
8+
import { AppNavBarStyles } from 'constants/AppNavBar';
79

810
const SplitPane = () => {
11+
const isNavBarCollapsed = useNavigationStore((state) => state.collapseNavBar);
912
return (
1013
<main className='h-full'>
1114
<Allotment>
12-
<Allotment.Pane preferredSize={'450px'} minSize={450}>
13-
<div className='flex text-xs'>
15+
<Allotment.Pane
16+
preferredSize={isNavBarCollapsed ? AppNavBarStyles.collapsedNavBarWidth.absolute : 450}
17+
minSize={isNavBarCollapsed ? AppNavBarStyles.collapsedNavBarWidth.absolute : 450}
18+
maxSize={isNavBarCollapsed ? AppNavBarStyles.collapsedNavBarWidth.absolute : 600}
19+
separator={isNavBarCollapsed ? false : true}
20+
>
21+
<div className='flex h-full text-xs'>
1422
<AppNavBar />
15-
<SideBar />
23+
{!isNavBarCollapsed ? (
24+
<div className='w-full h-full'>
25+
<Allotment>
26+
<Allotment.Pane>
27+
<SideBar />
28+
</Allotment.Pane>
29+
</Allotment>
30+
</div>
31+
) : (
32+
''
33+
)}
1634
</div>
1735
</Allotment.Pane>
1836
<Allotment.Pane>

‎src/components/molecules/footers/MainFooter.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,24 +6,25 @@ import useCollectionStore from 'stores/CollectionStore';
66

77
const MainFooter = () => {
88
const collections = useCollectionStore((state) => state.collections);
9-
const collapseNavBarValue = useNavigationStore((state) => state.collapseNavBar);
9+
const isNavBarCollapsed = useNavigationStore((state) => state.collapseNavBar);
1010
const updateNavCollapseState = useNavigationStore((state) => state.setNavCollapseState);
1111
return (
1212
<footer className='flex items-center justify-between px-6 py-2 text-xs'>
13-
<label className='py-1 cursor-pointer swap swap-rotate'>
13+
<label className='swap swap-rotate cursor-pointer py-1'>
1414
<input
1515
type='checkbox'
1616
onClick={(event) => {
1717
if (collections.length) {
18-
updateNavCollapseState(!collapseNavBarValue);
18+
// since default is false for isNavBarCollapsed
19+
updateNavCollapseState(!isNavBarCollapsed);
1920
} else {
2021
event.preventDefault();
2122
event.stopPropagation();
2223
}
2324
}}
2425
/>
25-
<ArrowRightStartOnRectangleIcon className='w-6 h-6 swap-on' />
26-
<ArrowLeftEndOnRectangleIcon className='w-6 h-6 swap-off' />
26+
<ArrowRightStartOnRectangleIcon className='swap-on h-6 w-6' />
27+
<ArrowLeftEndOnRectangleIcon className='swap-off h-6 w-6' />
2728
</label>
2829
<div className='flex items-center justify-between gap-4 font-semibold'>
2930
<Tippy content='External Link' placement='top'>

‎src/components/molecules/sidebar/content/Collections.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ const Collections = ({ collections }) => {
5959

6060
return (
6161
<div
62-
className='h-[87vh] flex-auto overflow-auto'
62+
className='h-[87vh] flex-auto overflow-auto pb-14'
6363
onClick={(event) => {
6464
const clickFromElementDataSet = event.target.dataset;
6565
const clickFrom = clickFromElementDataSet?.clickFrom;

‎src/components/molecules/sidebar/content/Environments.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const Environments = ({ collections }) => {
1212

1313
return (
1414
<div
15-
className='h-[87vh] flex-auto overflow-auto'
15+
className='h-[87vh] flex-auto overflow-auto pb-14'
1616
onClick={(event) => {
1717
const clickFromElementDataSet = event.target.dataset;
1818
const clickFrom = clickFromElementDataSet?.clickFrom;
@@ -38,7 +38,7 @@ const Environments = ({ collections }) => {
3838
}
3939
}}
4040
>
41-
<ul className='w-full menu'>
41+
<ul className='menu w-full'>
4242
{collections.map((collection) => (
4343
<Environment key={collection.id} collectionId={collection.id} collection={collection} />
4444
))}

‎src/components/organisms/AppNavBar.js‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { Square3Stack3DIcon, RectangleStackIcon, ClockIcon } from '@heroicons/react/20/solid';
33
import useNavigationStore from 'stores/AppNavBarStore';
4-
import { AppNavBarItems } from 'constants/AppNavBar';
4+
import { AppNavBarItems, AppNavBarStyles } from 'constants/AppNavBar';
55
import Tippy from '@tippyjs/react';
66
import 'tippy.js/dist/tippy.css';
77
import { Transition } from '@headlessui/react';
@@ -10,7 +10,7 @@ import { Transition } from '@headlessui/react';
1010
const AppNavBar = ({ showRightBorder = true }) => {
1111
const navigationSelectedValue = useNavigationStore((state) => state.selectedNavVal);
1212
const updateNavigationSelectedValue = useNavigationStore((state) => state.setNavState);
13-
const collapseNavBarValue = useNavigationStore((state) => state.collapseNavBar);
13+
const isNavBarCollapsed = useNavigationStore((state) => state.collapseNavBar);
1414

1515
const handleOnClick = (event) => {
1616
const dataAttributeValue = event.currentTarget.dataset.navItem;
@@ -19,9 +19,10 @@ const AppNavBar = ({ showRightBorder = true }) => {
1919

2020
const selectedNavItemStyles = 'before:bg-cyan-900 bg-background text-cyan-900';
2121
const nonSelectedNavItemStyles = 'hover:bg-cyan-900 hover:text-white';
22+
const navStyles = 'relative flex h-screen flex-col transition-all delay-150 duration-300';
2223
return (
2324
<nav
24-
className={`relative flex h-screen flex-col transition-all delay-150 duration-300 ${collapseNavBarValue ? 'min-w-14' : 'min-w-28'} ${showRightBorder ? 'border-r border-gray-300' : ''}`}
25+
className={`${navStyles} ${isNavBarCollapsed ? AppNavBarStyles.collapsedNavBarWidth.tailwindValue.min : AppNavBarStyles.expandedNavBarWidth.tailwindValue.min} ${showRightBorder && !isNavBarCollapsed ? 'border-r border-gray-300' : ''}`}
2526
>
2627
<button className='relative' onClick={handleOnClick} data-nav-item={AppNavBarItems.collections.value}>
2728
<div
@@ -31,15 +32,15 @@ const AppNavBar = ({ showRightBorder = true }) => {
3132
: nonSelectedNavItemStyles
3233
} delay-50 flex w-full flex-col items-center px-2 py-4 text-center transition-all duration-100`}
3334
>
34-
{collapseNavBarValue ? (
35+
{isNavBarCollapsed ? (
3536
<Tippy content={AppNavBarItems.collections.displayValue} placement='right'>
36-
<RectangleStackIcon className='w-4 h-4 mb-2' />
37+
<RectangleStackIcon className='mb-2 h-4 w-4' />
3738
</Tippy>
3839
) : (
39-
<RectangleStackIcon className='w-4 h-4 mb-2' />
40+
<RectangleStackIcon className='mb-2 h-4 w-4' />
4041
)}
4142
<Transition
42-
show={!collapseNavBarValue}
43+
show={!isNavBarCollapsed}
4344
enter='transition-all ease-in-out duration-500 delay-[200ms]'
4445
enterFrom='opacity-0 translate-y-6'
4546
enterTo='opacity-100 translate-y-0'
@@ -59,15 +60,15 @@ const AppNavBar = ({ showRightBorder = true }) => {
5960
: nonSelectedNavItemStyles
6061
} delay-50 flex w-full flex-col items-center px-2 py-4 text-center transition-all duration-100`}
6162
>
62-
{collapseNavBarValue ? (
63+
{isNavBarCollapsed ? (
6364
<Tippy content={AppNavBarItems.environments.displayValue} placement='right'>
64-
<Square3Stack3DIcon className='w-4 h-4 mb-2' />
65+
<Square3Stack3DIcon className='mb-2 h-4 w-4' />
6566
</Tippy>
6667
) : (
67-
<Square3Stack3DIcon className='w-4 h-4 mb-2' />
68+
<Square3Stack3DIcon className='mb-2 h-4 w-4' />
6869
)}
6970
<Transition
70-
show={!collapseNavBarValue}
71+
show={!isNavBarCollapsed}
7172
enter='transition-all ease-in-out duration-500 delay-[200ms]'
7273
enterFrom='opacity-0 translate-y-6'
7374
enterTo='opacity-100 translate-y-0'
@@ -79,25 +80,25 @@ const AppNavBar = ({ showRightBorder = true }) => {
7980
</Transition>
8081
</div>
8182
</button>
82-
<button className='px-2 py-4 cursor-not-allowed ' data-nav-item={AppNavBarItems.history.value}>
83+
<button className='cursor-not-allowed px-2 py-4 ' data-nav-item={AppNavBarItems.history.value}>
8384
<div className='text-gray-300'>
84-
{collapseNavBarValue ? (
85-
<div className='transition-all duration-300 delay-150'>
85+
{isNavBarCollapsed ? (
86+
<div className='transition-all delay-150 duration-300'>
8687
<Tippy content={AppNavBarItems.history.displayValue + ': Coming Soon!'} placement='right'>
8788
<div className='flex flex-col items-center text-center '>
88-
<ClockIcon className='w-4 h-4 mb-2' />
89+
<ClockIcon className='mb-2 h-4 w-4' />
8990
</div>
9091
</Tippy>
9192
</div>
9293
) : (
9394
<Tippy content='Coming Soon!' placement='right'>
9495
<div className='flex flex-col items-center text-center '>
95-
<ClockIcon className='w-4 h-4 mb-2' />
96+
<ClockIcon className='mb-2 h-4 w-4' />
9697
</div>
9798
</Tippy>
9899
)}
99100
<Transition
100-
show={!collapseNavBarValue}
101+
show={!isNavBarCollapsed}
101102
enter='transition-all ease-in-out duration-500 delay-[200ms]'
102103
enterFrom='opacity-0 translate-y-6'
103104
enterTo='opacity-100 translate-y-0'

‎src/constants/AppNavBar.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,22 @@ export const AppNavBarItems = {
1919
disable: true,
2020
},
2121
};
22+
23+
export const AppNavBarStyles = {
24+
collapsedNavBarWidth: {
25+
absolute: 56,
26+
pixelInString: '56px',
27+
tailwindValue: {
28+
default: 'w-14',
29+
min: 'min-w-14',
30+
},
31+
},
32+
expandedNavBarWidth: {
33+
absolute: 12,
34+
pixelInString: '12px',
35+
tailwindValue: {
36+
default: 'w-28',
37+
min: 'min-w-28',
38+
},
39+
},
40+
};

0 commit comments

Comments
 (0)