fix: fix active states

chingu-x · Aug 30, 2024 · 5234548 · 5234548
1 parent 4c5773f
commit 5234548
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 33 deletions.
diff --git a/src/components/sidebar/ExpandButton.tsx b/src/components/sidebar/ExpandButton.tsx
@@ -12,7 +12,7 @@ export default function ExpandButton({ isOpen, onClick }: ExpandButtonProps) {
   return (
     <button
       type="button"
-      className="border-none bg-base-200 capitalize text-base-300 hover:bg-base-200"
+      className="border-none bg-base-200 capitalize text-neutral-focus hover:bg-base-200"
       onClick={() => onClick(!isOpen)}
       aria-label={`${isOpen ? "close sidebar" : "open sidebar"}`}
     >

diff --git a/src/components/sidebar/PageButton.tsx b/src/components/sidebar/PageButton.tsx
@@ -1,12 +1,9 @@
 import { useState } from "react";
 import Link from "next/link";
-import {
-  MainPages,
-  type PageProperty,
-  type VoyagePageProperty,
-} from "./Sidebar";
+import { MainPages, type PageProperty } from "./Sidebar";
 import Button from "@/components/Button";
 import Tooltip from "@/components/Tooltip";
+import { cn } from "@/lib/utils";
 
 interface PageButtonProps {
   element: PageProperty;
@@ -15,7 +12,6 @@ interface PageButtonProps {
   isOpen: boolean;
   link: string;
   setHoveredButton: (element: string | null) => void;
-  voyagePages: VoyagePageProperty[];
   ariaLabel: string;
 }
 
@@ -26,19 +22,9 @@ export default function PageButton({
   isOpen,
   link,
   setHoveredButton,
-  voyagePages,
   ariaLabel,
 }: PageButtonProps) {
-  const buttonStyles = `${
-    isOpen ? "flex justify-start w-full" : "h-[3.125rem] w-[3.125rem] p-0"
-  }`;
-
-  const getButtonBackgroundStyle = (page: string) =>
-    selectedButton === page ||
-    (page === "" &&
-      voyagePages.some((voyagePage) => voyagePage.link === selectedButton))
-      ? "bg-neutral-content"
-      : "bg-base-200";
+  const isActive = selectedButton.includes(link);
 
   const getButtonText = (page: string) => (isOpen ? page : "");
 
@@ -67,9 +53,12 @@ export default function PageButton({
             variant="neutral"
             data-tip={element.name}
             aria-label={ariaLabel}
-            className={`${buttonStyles} ${getButtonBackgroundStyle(
-              element.link,
-            )} ${element.marginBottom} flex items-center`}
+            className={cn(
+              "h-[3.125rem] w-[3.125rem] justify-center bg-base-200 p-0 text-neutral-focus",
+              isActive && "bg-primary-content text-base-300",
+              isOpen && "flex w-full justify-start px-6",
+              element.marginBottom,
+            )}
             onMouseEnter={() => {
               setHoveredButton(element.name);
               setTooltipHovered(true);

diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
@@ -48,7 +48,7 @@ const pagesProperties: PageProperty[] = [
     name: MainPages.dashboard,
     marginBottom: "mb-4",
     icon: <RectangleGroupIcon className="h-[1.125rem]" />,
-    link: routePaths.dashboardPage(),
+    link: "/dashboard",
     "aria-label": "Dashboard Page",
   },
   {
@@ -69,7 +69,7 @@ const pagesProperties: PageProperty[] = [
     name: MainPages.myVoyage,
     marginBottom: "mb-4",
     icon: <RocketLaunchIcon className="h-[1.125rem]" />,
-    link: "",
+    link: "/my-voyage",
     "aria-label": "Voyage Main Page",
   },
 ];
@@ -164,7 +164,6 @@ export default function Sidebar() {
               isOpen={isOpenSidebar}
               link={element.link}
               setHoveredButton={setHoveredButton}
-              voyagePages={voyagePages}
               ariaLabel={element["aria-label"]}
             />
           ))}

diff --git a/src/components/sidebar/VoyagePageButton.tsx b/src/components/sidebar/VoyagePageButton.tsx
@@ -2,6 +2,7 @@ import { ArrowRightCircleIcon } from "@heroicons/react/20/solid";
 import { LockClosedIcon } from "@heroicons/react/24/solid";
 import Link from "next/link";
 import { type PageProperty, type VoyagePageProperty } from "./Sidebar";
+import { cn } from "@/lib/utils";
 
 interface VoyagePageButtonProps {
   element: VoyagePageProperty;
@@ -20,13 +21,15 @@ export default function VoyagePageButton({
   isVoyageStarted,
   setHoveredButton,
 }: VoyagePageButtonProps) {
-  const showIcon = (element: string) => {
+  const isActive =
+    isVoyageStarted &&
+    (hoveredButton?.startsWith(element.link) ||
+      selectedButton.startsWith(element.link));
+
+  const showIcon = () => {
     if (!isVoyageStarted) {
       return <LockClosedIcon className="mr-1 h-[1.125rem] self-center" />;
-    } else if (
-      isVoyageStarted &&
-      (hoveredButton?.startsWith(element) || selectedButton.startsWith(element))
-    ) {
+    } else if (isActive) {
       return (
         <>
           <div className="absolute left-[1.4rem] top-[3px]">
@@ -45,14 +48,16 @@ export default function VoyagePageButton({
       >
         <button
           type="button"
-          className={`mb-2.5 flex h-[1.1875rem] min-h-0 w-[9.375rem] justify-start bg-transparent hover:bg-transparent ${
-            isVoyageStarted ? "pl-11" : "pl-6"
-          } relative border-none capitalize text-neutral-focus`}
+          className={cn(
+            "relative mb-2.5 flex h-[1.1875rem] min-h-0 w-[9.375rem] justify-start border-none bg-transparent pl-6 font-semibold capitalize text-neutral hover:bg-transparent",
+            isVoyageStarted && "pl-11",
+            isActive && "text-base-300",
+          )}
           onMouseEnter={() => setHoveredButton(element.link)}
           onMouseLeave={() => setHoveredButton(null)}
           onClick={() => isVoyageStarted && onClick(element.link)}
         >
-          {showIcon(element.link)}
+          {showIcon()}
           {element.name}
         </button>
       </Link>