feat(drawer): add drawer functionality to store

Objective:

Add drawer functionality to store.

What has been done:

• Added drawer reducers, selectors, slice and types files in redux folder
• Added openDrawer function to buttons in NavBar
• Added closeDrawer function to close button in the Drawer component
• Added selector to Drawer component
• tests for reducer
• first tests for Drawer component
• added root selector
• added util function called renderComponentWithProvider for tests
• added src/utils/*.{ts,tsx} in devDependencies for import/no-extraneous-dependencies

Additionally:

• added shadow and changed bg color in the map nav bar
• added example button in the map nav bar
• added shadow map-navigation-bar to tailwind.config.ts file

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

@@ -2,34 +2,60 @@ import Image from 'next/image';
 import { IconButton } from '@/shared/IconButton';
 import logoImg from '@/assets/images/logo.png';
 import luxembourgLogoImg from '@/assets/images/luxembourg-logo.png';
+import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
+import { openDrawer } from '@/redux/drawer/drawer.slice';
 
-export const NavBar = (): JSX.Element => (
-  <div className="flex items-center justify-between flex-col w-[88px] min-h-100 bg-cultured py-8">
-    <div data-testid="nav-buttons">
-      <div className="flex flex-col mb-8 gap-[10px]">
-        <IconButton icon="info" />
-        <IconButton icon="page" />
-        <IconButton icon="plugin" />
-        <IconButton icon="export" />
-      </div>
-      <div className="flex flex-col gap-[10px]">
-        <IconButton icon="admin" />
-        <IconButton icon="legend" />
+export const NavBar = (): JSX.Element => {
+  const dispatch = useAppDispatch();
+
+  const openDrawerInfo = (): void => {
+    // eslint-disable-next-line prefer-template
+    dispatch(openDrawer('project-info'));
+  };
+
+  const openDrawerPlugins = (): void => {
+    // eslint-disable-next-line prefer-template
+    dispatch(openDrawer('plugins'));
+  };
+
+  const openDrawerExport = (): void => {
+    // eslint-disable-next-line prefer-template
+    dispatch(openDrawer('export'));
+  };
+
+  const openDrawerLegend = (): void => {
+    // eslint-disable-next-line prefer-template
+    dispatch(openDrawer('legend'));
+  };
+
+  return (
+    <div className="flex items-center justify-between flex-col w-[88px] min-h-100 bg-cultured py-8">
+      <div data-testid="nav-buttons">
+        <div className="flex flex-col mb-8 gap-[10px]">
+          <IconButton icon="info" onClick={openDrawerInfo} />
+          <IconButton icon="page" />
+          <IconButton icon="plugin" onClick={openDrawerPlugins} />
+          <IconButton icon="export" onClick={openDrawerExport} />
+        </div>
+        <div className="flex flex-col gap-[10px]">
+          <IconButton icon="admin" />
+          <IconButton icon="legend" onClick={openDrawerLegend} />
+        </div>
       </div>
-    </div>
 
-    <div className="flex flex-col items-center gap-[20px]" data-testid="nav-logos-and-powered-by">
-      <Image
-        className="bg-white-pearl rounded-s rounded-m pb-[7px]"
-        src={luxembourgLogoImg}
-        alt="luxembourg logo"
-        height={41}
-        width={48}
-      />
-      <Image src={logoImg} alt="logo" height={48} width={48} />
-      <span className="w-14 h-16 text-[8px] leading-4 text-center">
-        Powered by: MINERVA Platform (v16.0.8)
-      </span>
+      <div className="flex flex-col items-center gap-[20px]" data-testid="nav-logos-and-powered-by">
+        <Image
+          className="bg-white-pearl rounded-s rounded-m pb-[7px]"
+          src={luxembourgLogoImg}
+          alt="luxembourg logo"
+          height={41}
+          width={48}
+        />
+        <Image src={logoImg} alt="logo" height={48} width={48} />
+        <span className="w-14 h-16 text-[8px] leading-4 text-center">
+          Powered by: MINERVA Platform (v16.0.8)
+        </span>
+      </div>
     </div>
-  </div>
-);
+  );
+};