From 0f32e682face02145a923862d67caad3ee851d44 Mon Sep 17 00:00:00 2001
From: Piotr Gawron <p.gawron@atcomp.pl>
Date: Thu, 9 May 2024 12:34:09 +0200
Subject: [PATCH] toggle drawers instead of opening
---
.../NavBar/NavBar.component.tsx | 47 +++++++++++++------
1 file changed, 33 insertions(+), 14 deletions(-)
diff --git a/src/components/FunctionalArea/NavBar/NavBar.component.tsx b/src/components/FunctionalArea/NavBar/NavBar.component.tsx
index 71785c29..592aec74 100644
--- a/src/components/FunctionalArea/NavBar/NavBar.component.tsx
+++ b/src/components/FunctionalArea/NavBar/NavBar.component.tsx
@@ -1,9 +1,9 @@
import logoImg from '@/assets/vectors/branding/logo.svg';
import luxembourgLogoImg from '@/assets/vectors/branding/luxembourg-logo.svg';
import { API_DOCS_URL, MINERVA_WEBSITE_URL } from '@/constants';
-import { openDrawer } from '@/redux/drawer/drawer.slice';
+import { closeDrawer, openDrawer } from '@/redux/drawer/drawer.slice';
import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
-import { openLegend } from '@/redux/legend/legend.slice';
+import { closeLegend, openLegend } from '@/redux/legend/legend.slice';
import { openPluginsDrawer } from '@/redux/plugins/plugins.slice';
import { IconButton } from '@/shared/IconButton';
import { store } from '@/redux/store';
@@ -13,21 +13,40 @@ import Image from 'next/image';
export const NavBar = (): JSX.Element => {
const dispatch = useAppDispatch();
- const openDrawerInfo = (): void => {
- dispatch(openDrawer('project-info'));
+ const toggleDrawerInfo = (): void => {
+ if (store.getState().drawer.isOpen && store.getState().drawer.drawerName === 'project-info') {
+ dispatch(closeDrawer());
+ } else {
+ dispatch(openDrawer('project-info'));
+ }
};
- const openDrawerPlugins = (): void => {
- dispatch(openDrawer('available-plugins'));
+ const toggleDrawerPlugins = (): void => {
+ if (
+ store.getState().drawer.isOpen &&
+ store.getState().drawer.drawerName === 'available-plugins'
+ ) {
+ dispatch(closeDrawer());
+ } else {
+ dispatch(openDrawer('available-plugins'));
+ }
dispatch(openPluginsDrawer());
};
- const openDrawerExport = (): void => {
- dispatch(openDrawer('export'));
+ const toggleDrawerExport = (): void => {
+ if (store.getState().drawer.isOpen && store.getState().drawer.drawerName === 'export') {
+ dispatch(closeDrawer());
+ } else {
+ dispatch(openDrawer('export'));
+ }
};
- const openDrawerLegend = (): void => {
- dispatch(openLegend());
+ const toggleDrawerLegend = (): void => {
+ if (store.getState().legend.isOpen) {
+ dispatch(closeLegend());
+ } else {
+ dispatch(openLegend());
+ }
};
const configuration = store.getState().configuration.main.data;
@@ -37,15 +56,15 @@ export const NavBar = (): JSX.Element => {
<div className="flex min-h-full w-[88px] flex-col items-center justify-between overflow-y-auto bg-cultured py-8">
<div data-testid="nav-buttons">
<div className="mb-8 flex flex-col gap-[10px]">
- <IconButton icon="info" onClick={openDrawerInfo} title="Project info" />
+ <IconButton icon="info" onClick={toggleDrawerInfo} title="Project info" />
<a href={API_DOCS_URL} target="_blank">
<IconButton icon="page" title="API Doc" />
</a>
- <IconButton icon="plugin" onClick={openDrawerPlugins} title="Available plugins" />
- <IconButton icon="export" onClick={openDrawerExport} title="Export" />
+ <IconButton icon="plugin" onClick={toggleDrawerPlugins} title="Available plugins" />
+ <IconButton icon="export" onClick={toggleDrawerExport} title="Export" />
</div>
<div className="flex flex-col gap-[10px]">
- <IconButton icon="legend" onClick={openDrawerLegend} title="Legend" />
+ <IconButton icon="legend" onClick={toggleDrawerLegend} title="Legend" />
</div>
</div>
--
GitLab