toggle drawers instead of opening

src/components/FunctionalArea/NavBar/NavBar.component.tsx

 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>