Start work on tab layout

src/components/layout/Sidebar/ButtonNav.tsx

@@ -1,78 +0,0 @@
-import type React from 'react';
-
-import { FiMessageCircle, FiSettings } from 'react-icons/fi';
-import { RiMindMap, RiRoadMapLine } from 'react-icons/ri';
-import { VscExtensions } from 'react-icons/vsc';
-
-import { NavLinkButton } from '@components/layout/Sidebar/NavLinkButton';
-import { routes, useRoute } from '@core/router';
-import { toggleMobileNav } from '@core/slices/appSlice';
-import { useAppDispatch } from '@hooks/useAppDispatch';
-
-export interface ButtonNavProps {
-  toggleSettingsOpen: () => void;
-}
-
-export const ButtonNav = ({
-  toggleSettingsOpen,
-}: ButtonNavProps): JSX.Element => {
-  const route = useRoute();
-  const dispatch = useAppDispatch();
-
-  return (
-    <div className="z-30 flex justify-between border-t border-gray-300 bg-white px-6 py-2 dark:border-gray-600 dark:bg-primaryDark">
-      <div
-        onClick={(): void => {
-          dispatch(toggleMobileNav());
-        }}
-      >
-        <NavLinkButton
-          active={route.name === 'messages'}
-          link={routes.messages().link}
-        >
-          <FiMessageCircle className="h-5 w-5" />
-        </NavLinkButton>
-      </div>
-      <div
-        onClick={(): void => {
-          dispatch(toggleMobileNav());
-        }}
-      >
-        <NavLinkButton
-          active={route.name === 'nodes'}
-          link={routes.nodes().link}
-        >
-          <RiMindMap className="h-5 w-5" />
-        </NavLinkButton>
-      </div>
-      <div
-        onClick={(): void => {
-          dispatch(toggleMobileNav());
-        }}
-      >
-        <NavLinkButton active={route.name === 'map'} link={routes.map().link}>
-          <RiRoadMapLine className="h-5 w-5" />
-        </NavLinkButton>
-      </div>
-      <div
-        onClick={(): void => {
-          dispatch(toggleMobileNav());
-        }}
-      >
-        <NavLinkButton
-          active={route.name === 'extensions'}
-          link={routes.extensions().link}
-        >
-          <VscExtensions className="h-5 w-5" />
-        </NavLinkButton>
-      </div>
-      <NavLinkButton
-        action={(): void => {
-          toggleSettingsOpen();
-        }}
-      >
-        <FiSettings className="h-5 w-5" />
-      </NavLinkButton>
-    </div>
-  );
-};

src/components/layout/Sidebar/NavLinkButton.tsx

@@ -1,38 +0,0 @@
-import type React from 'react';
-
-import { m } from 'framer-motion';
-import type { Link } from 'type-route';
-
-export interface NavLinkButtonProps {
-  link?: Link;
-  active?: boolean;
-  action?: () => void;
-  children: React.ReactNode;
-}
-
-export const NavLinkButton = ({
-  link,
-  active,
-  action,
-  children,
-}: NavLinkButtonProps): JSX.Element => {
-  return (
-    <m.div
-      whileHover={{ scale: 1.01 }}
-      whileTap={{ scale: 0.99 }}
-      animate={active ? 'selected' : 'deselected'}
-      initial={{ borderColor: '#1C1D23' }}
-      variants={{
-        selected: { borderColor: '#67ea94' },
-        deselected: { borderColor: '#1C1D23' },
-      }}
-      className="cursor-pointer rounded-full border-2 p-3 hover:bg-opacity-80 hover:shadow-md dark:bg-secondaryDark dark:text-white"
-      onClick={(): void => {
-        action && action();
-      }}
-      {...(link && link)}
-    >
-      {children}
-    </m.div>
-  );
-};

src/components/layout/Sidebar/index.tsx

@@ -1,17 +1,19 @@
 import type React from 'react';
-import { useState } from 'react';
 
-import { ButtonNav } from '@components/layout/Sidebar/ButtonNav';
 import { Settings } from '@components/layout/Sidebar/Settings/Index';
 import { useAppSelector } from '@hooks/useAppSelector';
 
 export interface SidebarProps {
   children: React.ReactNode;
+  setSettingsOpen: (settingsOpen: boolean) => void;
+  settingsOpen: boolean;
 }
 
-export const Sidebar = ({ children }: SidebarProps): JSX.Element => {
-  const [settingsOpen, setSettingsOpen] = useState(false);
-
+export const Sidebar = ({
+  settingsOpen,
+  setSettingsOpen,
+  children,
+}: SidebarProps): JSX.Element => {
   const appState = useAppSelector((state) => state.app);
 
   return (
@@ -25,11 +27,6 @@ export const Sidebar = ({ children }: SidebarProps): JSX.Element => {
           <div className="absolute h-full w-full">{children}</div>
           <Settings open={settingsOpen} setOpen={setSettingsOpen} />
         </div>
-        <ButtonNav
-          toggleSettingsOpen={(): void => {
-            setSettingsOpen(!settingsOpen);
-          }}
-        />
       </div>
     </div>
   );