diff --git a/src/components/sidebar/PageButton.tsx b/src/components/sidebar/PageButton.tsx index 9a179a9e..08a9dd0e 100644 --- a/src/components/sidebar/PageButton.tsx +++ b/src/components/sidebar/PageButton.tsx @@ -21,7 +21,6 @@ export default function PageButton({ setHoveredButton, }: PageButtonProps) { const currentPath = usePathname(); - const buttonStyles = `${ isOpen ? "w-[14.375rem] flex justify-start pl-6" : "w-[3.125rem]" } h-[3.125rem] text-base-300 capitalize border-none hover:bg-base-100`; @@ -37,7 +36,7 @@ export default function PageButton({ return ( <li> - <Link href={element.name !== String(MainPages.myVoyage) ? link : ""}> + <Link href={element.name !== MainPages.myVoyage ? link : ""}> <Button title={element.name} customClassName={`${buttonStyles} ${getButtonBackgroundStyle( diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index c1954451..7545f449 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/src/components/sidebar/Sidebar.tsx @@ -1,6 +1,7 @@ "use client"; import { useState } from "react"; +import type React from "react"; import { usePathname } from "next/navigation"; import { RectangleGroupIcon, @@ -10,21 +11,8 @@ import { } from "@heroicons/react/24/solid"; import PageButton from "./PageButton"; import VoyagePageButton from "./VoyagePageButton"; -import VoyageStatus from "./VoyageStatus"; import ExpandButton from "./ExpandButton"; -export type PageProperty = { - name: string; - marginBottom: string; - icon: JSX.Element; - link: string; -}; - -export type VoyagePageProperty = { - name: string; - link: string; -}; - export enum MainPages { dashboard = "Dashboard", assessment = "Assessment", @@ -41,6 +29,18 @@ export enum VoyagePages { resources = "Resources", } +export type VoyagePageProperty = { + name: string; + link: string; +}; + +export type PageProperty = { + name: MainPages; + marginBottom: string; + icon: React.JSX.Element; + link: string; +}; + export const voyagePages: VoyagePageProperty[] = [ { name: VoyagePages.directory, @@ -97,11 +97,6 @@ const pagesProperties: PageProperty[] = [ //-- Mocked fake data just for testing purpose --// const isVoyageStarted: boolean = true; -const voyageData = { - tier: "Tier 3", - team: "Team", - voyage: "V29", -}; //-- --// export default function Sidebar() { @@ -115,7 +110,7 @@ export default function Sidebar() { if (typeof element === "string") { setSelectedButton(element); setIsOpenSidebar(false); - } else if ((element.name as MainPages) === MainPages.myVoyage) { + } else if (element.name === MainPages.myVoyage) { setIsOpenSidebar(true); } else { setSelectedButton(element.link); @@ -127,7 +122,7 @@ export default function Sidebar() { <aside className={`overflow-y-auto ${ isOpenSidebar ? "w-[18.438rem]" : "w-[5.813rem]" - } text-center bg-base-200 flex flex-col justify-between`} + } text-center bg-base-200 flex flex-col justify-between border-r border-neutral-content`} > <ul className={`flex flex-col ${ @@ -161,14 +156,6 @@ export default function Sidebar() { </ul> )} </ul> - <div className="flex-grow flex flex-col justify-end"> - {isOpenSidebar && ( - <VoyageStatus - isVoyageStarted={isVoyageStarted} - voyageData={voyageData} - /> - )} - </div> <div className="flex flex-col items-end justify-start border-t border-neutral-content"> <ExpandButton isOpen={isOpenSidebar} onClick={setIsOpenSidebar} /> </div>