Tab fixes

src/components/Tab.tsx

@@ -1,34 +1,56 @@
 import type React from 'react';
 
+import { m } from 'framer-motion';
 import type { Link } from 'type-route';
 
 export interface TabProps {
-  link?: Link;
+  link: Link;
   icon: React.ReactNode;
   title: string;
   active: boolean;
+  activeRight: boolean;
+  activeLeft: boolean;
 }
 
-export const Tab = ({ link, icon, title, active }: TabProps): JSX.Element => {
+export const Tab = ({
+  link,
+  icon,
+  title,
+  active,
+  activeRight,
+  activeLeft,
+}: TabProps): JSX.Element => {
   return (
-    <div className="group relative flex-grow">
+    <div
+      className={`max-w-[10rem] md:flex-grow ${
+        active ? 'bg-primaryDark' : 'bg-secondaryDark'
+      }`}
+    >
       <div
-        className={`peer flex cursor-pointer select-none py-1 dark:text-white ${
+        className={`group flex flex-grow cursor-pointer select-none py-2 hover:underline dark:text-white ${
           active
-            ? 'z-10 -mr-1 rounded-t-lg bg-gray-100 dark:bg-primaryDark'
+            ? 'z-10 rounded-t-lg bg-gray-300 shadow-inner dark:bg-secondaryDark'
-            : 'dark:bg-secondaryDark'
+            : 'bg-gray-100 shadow-md dark:bg-primaryDark'
+        } ${activeRight ? 'rounded-br-lg' : ''} ${
+          activeLeft ? 'rounded-bl-lg' : ''
         }`}
         {...(link && link)}
       >
         <div
-          className={`w-full px-2 ${
+          className={`my-auto w-full px-3 ${
-            active ? '' : 'border-l group-first:border-l-0 dark:border-gray-600'
+            active || activeLeft
+              ? ''
+              : 'border-l border-gray-400 dark:border-gray-600'
           }`}
         >
-          <div className="flex gap-2">
+          <m.div
+            className="flex gap-2"
+            whileHover={{ scale: 1.01 }}
+            whileTap={{ scale: 0.99 }}
+          >
             <div className="my-auto">{icon}</div>
-            {title}
+            <div className="hidden md:flex">{title}</div>
-          </div>
+          </m.div>
         </div>
       </div>
     </div>

src/components/generic/button/IconButton.tsx

@@ -24,29 +24,27 @@ export const IconButton = ({
 }: IconButtonProps): JSX.Element => {
   return (
     <Tooltip disabled={!tooltip} content={tooltip}>
-      <m.div
+      <button
-        whileHover={{ scale: 1.01 }}
+        type="button"
-        whileTap={{ scale: 0.97 }}
+        disabled={disabled}
-        className="my-auto text-gray-500 dark:text-gray-400"
+        className={`rounded-md p-2 hover:bg-gray-300 ${
+          active ? 'bg-gray-300 dark:bg-secondaryDark' : ''
+        } ${
+          nested ? 'dark:hover:bg-primaryDark' : 'dark:hover:bg-secondaryDark'
+        } ${
+          disabled ? 'cursor-not-allowed text-gray-400 dark:text-gray-700' : ''
+        } ${className ?? ''}`}
+        {...props}
       >
-        <button
+        <m.div
-          type="button"
+          whileHover={{ scale: 1.01 }}
-          disabled={disabled}
+          whileTap={{ scale: 0.95 }}
-          className={`rounded-md p-2 hover:bg-gray-200 ${
+          className="my-auto text-gray-600 dark:text-gray-400"
-            active ? 'bg-gray-200 dark:bg-secondaryDark' : ''
-          } ${
-            nested ? 'dark:hover:bg-primaryDark' : 'dark:hover:bg-secondaryDark'
-          } ${
-            disabled
-              ? 'cursor-not-allowed text-gray-400 dark:text-gray-700'
-              : ''
-          } ${className ?? ''}`}
-          {...props}
         >
           {icon}
-          <span className="sr-only">Refresh</span>
+        </m.div>
-        </button>
+        <span className="sr-only">Refresh</span>
-      </m.div>
+      </button>
     </Tooltip>
   );
 };

src/components/layout/index.tsx

@@ -30,6 +30,33 @@ export const Layout = ({
 
   const route = useRoute();
 
+  const tabs = [
+    {
+      title: 'Messages',
+      icon: <FiMessageCircle />,
+      link: routes.messages().link,
+      active: route.name === 'messages',
+    },
+    {
+      title: 'Nodes',
+      icon: <RiMindMap />,
+      link: routes.nodes().link,
+      active: route.name === 'nodes',
+    },
+    {
+      title: 'Map',
+      icon: <RiRoadMapLine />,
+      link: routes.map().link,
+      active: route.name === 'map',
+    },
+    {
+      title: 'Extensions',
+      icon: <VscExtensions />,
+      link: routes.extensions().link,
+      active: route.name === 'extensions',
+    },
+  ];
+
   return (
     <div className="relative flex w-full bg-gray-100 dark:bg-secondaryDark md:overflow-hidden md:shadow-xl">
       <div className="flex flex-grow">
@@ -45,42 +72,28 @@ export const Layout = ({
       </div>
       <ErrorBoundary FallbackComponent={ErrorFallback}>
         <div className="flex h-full w-full flex-col bg-gray-300 dark:bg-secondaryDark">
-          <div className="flex w-full border-b border-gray-300 pr-2 pt-1 dark:border-gray-600">
+          <div className="flex w-full pt-1 dark:bg-primaryDark">
-            <div className="mx-1">
+            <div className="h-8">
               <IconButton
-                className="rounded-b-none"
+                className="mx-1 rounded-b-none p-3"
+                icon={<FiSettings />}
                 onClick={(): void => {
                   setSettingsOpen(!settingsOpen);
                 }}
-                nested
                 active={settingsOpen}
-                icon={<FiSettings />}
               />
             </div>
-            <Tab
+            {tabs.map((tab, index) => (
-              title="Messages"
+              <Tab
-              icon={<FiMessageCircle />}
+                key={index}
-              link={routes.messages().link}
+                link={tab.link}
-              active={route.name === 'messages'}
+                title={tab.title}
-            />
+                icon={tab.icon}
-            <Tab
+                active={tab.active}
-              title="Nodes"
+                activeLeft={tabs[index - 1]?.active}
-              icon={<RiMindMap />}
+                activeRight={tabs[index + 1]?.active}
-              link={routes.nodes().link}
+              />
-              active={route.name === 'nodes'}
+            ))}
-            />
-            <Tab
-              title="Map"
-              icon={<RiRoadMapLine />}
-              link={routes.map().link}
-              active={route.name === 'map'}
-            />
-            <Tab
-              title="Extensions"
-              icon={<VscExtensions />}
-              link={routes.extensions().link}
-              active={route.name === 'extensions'}
-            />
           </div>
           <div className="flex flex-grow">{children}</div>
         </div>