Feature/sidebar refactor

src/components/Button.tsx

@@ -37,7 +37,7 @@ const button = cva(
           "bg-base-200",
           "border-base-100",
           "hover:bg-base-100",
-          "focus:bg-neutral-content",
+          "active:bg-neutral-content",
           "disabled:text-neutral-focus",
           "disabled:bg-neutral-content",
         ],
@@ -73,7 +73,7 @@ const button = cva(
       size: "md",
       outline: false,
     },
-  },
+  }
 );
 
 export interface ButtonProps

src/components/sidebar/PageButton.tsx

@@ -43,28 +43,28 @@ export default function PageButton({
             : ""
         }
       >
-        <Button
-          type="button"
-          size="lg"
-          variant="neutral"
-          data-tip={element.name}
-          className={`${buttonStyles} ${getButtonBackgroundStyle(
-            element.link,
-          )} ${element.marginBottom} flex items-center`}
-          onMouseEnter={() => setHoveredButton(element.name)}
-          onMouseLeave={() => setHoveredButton(null)}
-          onClick={() => onClick(element)}
+        <Tooltip
+          content={element.name}
+          position="right"
+          tooltipWidth="small"
+          isDisplay={!isOpen}
         >
-          <Tooltip
-            content={element.name}
-            position="right"
-            tooltipWidth="small"
-            isDisplay={!isOpen}
+          <Button
+            type="button"
+            size="lg"
+            variant="neutral"
+            data-tip={element.name}
+            className={`${buttonStyles} ${getButtonBackgroundStyle(
+              element.link
+            )} ${element.marginBottom} flex items-center`}
+            onMouseEnter={() => setHoveredButton(element.name)}
+            onMouseLeave={() => setHoveredButton(null)}
+            onClick={() => onClick(element)}
           >
             {element.icon}
-          </Tooltip>
-          {getButtonText(element.name)}
-        </Button>
+            {getButtonText(element.name)}
+          </Button>
+        </Tooltip>
       </Link>
     </li>
   );

src/components/sidebar/VoyagePageButton.tsx

@@ -43,7 +43,7 @@ export default function VoyagePageButton({
         <button
           type="button"
           className={`bg-transparent hover:bg-transparent w-[9.375rem] h-[1.1875rem] min-h-0 mb-2.5 flex justify-start ${
-            isVoyageStarted ? "pl-11" : "pl-6 pointer-events-none"
+            isVoyageStarted ? "pl-11" : "pl-6"
           } text-neutral-focus capitalize border-none relative`}
           onMouseEnter={() => setHoveredButton(element.link)}
           onMouseLeave={() => setHoveredButton(null)}