feat: background of the buttons based on the url path

chingu-x · Sep 21, 2023 · 3969132 · 3969132
1 parent 2a77296
commit 3969132
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/src/components/sidebar/ExpandButton.tsx b/src/components/sidebar/ExpandButton.tsx
@@ -13,7 +13,7 @@ export default function ExpandButton({ isOpen, onClick }: ExpandButtonProps) {
   return (
     <Button
       title="Expand"
-      customClassName="w-[3.125rem] bg-white text-black capitalize hover:bg-white mr-2 border-none"
+      customClassName="w-[3.125rem] bg-base-200 text-black capitalize hover:bg-base-200 mr-2 border-none"
       onClick={() => onClick(!isOpen)}
     >
       {isOpen ? (

diff --git a/src/components/sidebar/PageButton.tsx b/src/components/sidebar/PageButton.tsx
@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { MainPages, PageProperty, voyagePages } from "./Sidebar";
 import { Button } from "@/components";
 
@@ -19,16 +20,18 @@ export default function PageButton({
   link,
   setHoveredButton,
 }: PageButtonProps) {
+  const currentPath = usePathname();
+
   const buttonStyles = `${
     isOpen ? "w-[14.375rem] flex justify-start pl-6" : "w-[3.125rem]"
-  } h-[3.125rem] text-black capitalize border-none`;
+  } h-[3.125rem] text-black capitalize border-none hover:bg-neutral-content`;
 
   const getButtonBackgroundStyle = (page: string) =>
-    selectedButton === page ||
-    ((page as MainPages) === MainPages.myVoyage &&
+    (selectedButton === page && selectedButton === currentPath) ||
+    (page === "" &&
       voyagePages.some((voyagePage) => voyagePage.link === selectedButton))
       ? "bg-neutral-content"
-      : "bg-white";
+      : "bg-base-200";
 
   const getButtonText = (page: string) => (isOpen ? page : "");
 
@@ -38,7 +41,7 @@ export default function PageButton({
         <Button
           title={element.name}
           customClassName={`${buttonStyles} ${getButtonBackgroundStyle(
-            element.name,
+            element.link,
           )} ${element.marginBottom}`}
           onMouseEnter={() => setHoveredButton(element.name)}
           onMouseLeave={() => setHoveredButton(null)}

diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
@@ -113,10 +113,10 @@ export default function Sidebar() {
       setSelectedButton(element);
       setIsOpenSidebar(false);
     } else if ((element.name as MainPages) === MainPages.myVoyage) {
-      setSelectedButton(element.name);
+      setSelectedButton(element.link);
       setIsOpenSidebar(true);
     } else {
-      setSelectedButton(element.name);
+      setSelectedButton(element.link);
       setIsOpenSidebar(false);
     }
   };
@@ -125,7 +125,7 @@ export default function Sidebar() {
     <aside
       className={`sticky top-16 h-[calc(100vh-theme(spacing.16))] ${
         isOpenSidebar ? "w-[18.4375rem]" : "w-[5.8125rem]"
-      } text-center bg-white flex flex-col justify-between`}
+      } text-center bg-base-200 flex flex-col justify-between`}
     >
       <ul
         className={`flex flex-col ${