From 270560244c0bf14a10092d10236e0bc4984bb092 Mon Sep 17 00:00:00 2001
From: timothyrusso <russotimothy@live.it>
Date: Thu, 4 Jan 2024 11:41:48 +0100
Subject: [PATCH 01/25] fix: ui problems

---
 src/components/navbar/Navbar.tsx        |  2 +-
 src/components/sidebar/ExpandButton.tsx |  2 +-
 src/components/sidebar/PageButton.tsx   |  2 +-
 src/components/sidebar/Sidebar.tsx      | 25 ++++++++++++++-----------
 4 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
index 69cbf40f8..4542642b1 100644
--- a/src/components/navbar/Navbar.tsx
+++ b/src/components/navbar/Navbar.tsx
@@ -13,7 +13,7 @@ interface NavbarProps {
 
 export default function Navbar({ isAuthPage = false }: NavbarProps) {
   return (
-    <nav className="navbar bg-base-100">
+    <nav className="navbar flex bg-base-100 h-[75px]">
       <div className="flex-1 pl-2">
         <ChinguMenu />
       </div>
diff --git a/src/components/sidebar/ExpandButton.tsx b/src/components/sidebar/ExpandButton.tsx
index eb0480f80..cfe402dc2 100644
--- 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-base-200 text-base-300 capitalize hover:bg-base-200 mr-2 border-none"
+      customClassName="bg-base-200 text-base-300 capitalize hover:bg-base-200 mr-6 border-none mt-4 flex items-center"
       onClick={() => onClick(!isOpen)}
     >
       {isOpen ? (
diff --git a/src/components/sidebar/PageButton.tsx b/src/components/sidebar/PageButton.tsx
index 58be15dc1..f87d63b4a 100644
--- a/src/components/sidebar/PageButton.tsx
+++ b/src/components/sidebar/PageButton.tsx
@@ -51,7 +51,7 @@ export default function PageButton({
           data-tip={element.name}
           customClassName={`${buttonStyles} ${getButtonBackgroundStyle(
             element.link,
-          )} ${element.marginBottom}`}
+          )} ${element.marginBottom} flex items-center`}
           onMouseEnter={() => setHoveredButton(element.name)}
           onMouseLeave={() => setHoveredButton(null)}
           onClick={() => onClick(element)}
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index dabd182e0..399b06459 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import type React from "react";
 import { usePathname } from "next/navigation";
 import {
@@ -106,15 +106,18 @@ export default function Sidebar() {
   const [selectedButton, setSelectedButton] = useState<string>(currentPath);
   const [hoveredButton, setHoveredButton] = useState<string | null>(null);
 
-  const handlePageClick = (element: PageProperty | string) => {
-    if (typeof element === "string") {
-      setSelectedButton(element);
-    } else if (element.name === MainPages.myVoyage) {
-      setIsOpenSidebar(true);
-    } else {
-      setSelectedButton(element.link);
-    }
-  };
+  const handlePageClick = useCallback(
+    (element: PageProperty | string) => {
+      if (typeof element === "string") {
+        setSelectedButton(element);
+      } else if (element.name === MainPages.myVoyage) {
+        setIsOpenSidebar(true);
+      } else {
+        setSelectedButton(element.link);
+      }
+    },
+    [setSelectedButton, setIsOpenSidebar],
+  );
 
   return (
     <aside
@@ -154,7 +157,7 @@ export default function Sidebar() {
           </ul>
         )}
       </ul>
-      <div className="flex flex-col items-end justify-start border-t border-neutral-content">
+      <div className="flex flex-col items-end justify-start border-t border-neutral-content min-h-[80px]">
         <ExpandButton isOpen={isOpenSidebar} onClick={setIsOpenSidebar} />
       </div>
     </aside>

From 161ed16ed34701210efdec79dfc1067e6c4e9a62 Mon Sep 17 00:00:00 2001
From: timothyrusso <russotimothy@live.it>
Date: Thu, 4 Jan 2024 12:41:35 +0100
Subject: [PATCH 02/25] feat: add sidebar to storybook

---
 .storybook/main.ts                         | 11 +++++++++++
 .storybook/preview.ts                      |  1 +
 src/components/sidebar/Sidebar.tsx         |  2 +-
 src/stories/components/Sidebar.stories.tsx | 23 ++++++++++++++++++++++
 4 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 src/stories/components/Sidebar.stories.tsx

diff --git a/.storybook/main.ts b/.storybook/main.ts
index 54ccd9f2d..8a8975745 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,4 +1,5 @@
 import type { StorybookConfig } from "@storybook/nextjs";
+import path from "path";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
@@ -15,5 +16,15 @@ const config: StorybookConfig = {
   docs: {
     autodocs: "tag",
   },
+  webpackFinal: async (config) => {
+    if (!config.resolve) {
+      return config;
+    }
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      "@": path.resolve(__dirname, "../src"),
+    };
+    return config;
+  },
 };
 export default config;
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index ff58bbda2..f2b62a09d 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,4 +1,5 @@
 import type { Preview } from "@storybook/react";
+import "../src/app/globals.css";
 
 const preview: Preview = {
   parameters: {
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index 399b06459..02fb34a16 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -123,7 +123,7 @@ export default function Sidebar() {
     <aside
       className={`${
         isOpenSidebar ? "w-[18.438rem]" : "w-[5.813rem]"
-      } text-center bg-base-200 flex flex-col justify-between border-r border-neutral-content shadow-[4px_4px_4px_0] shadow-neutral-focus/5`}
+      } text-center bg-base-200 flex flex-col justify-between border-r border-neutral-content shadow-[4px_4px_4px_0] shadow-neutral-focus/5 h-full`}
     >
       <ul
         className={`flex flex-col ${
diff --git a/src/stories/components/Sidebar.stories.tsx b/src/stories/components/Sidebar.stories.tsx
new file mode 100644
index 000000000..b6ed64ace
--- /dev/null
+++ b/src/stories/components/Sidebar.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Sidebar from "@/components/sidebar/Sidebar";
+
+const meta: Meta<typeof Sidebar> = {
+  title: "Example/Sidebar",
+  component: Sidebar,
+  decorators: [
+    (Story) => (
+      <div style={{ height: 700 }}>
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

From 9edfefedafcea9cf91120d1d4745baaa75e07150 Mon Sep 17 00:00:00 2001
From: Timothy Russo <timothy.russo@MacBook-Pro-di-Costim-2.local>
Date: Fri, 12 Jan 2024 18:57:49 +0100
Subject: [PATCH 03/25] feat: add custom button to the sidebar

---
 src/components/modals/Example2Modal.tsx | 2 +-
 src/components/sidebar/ExpandButton.tsx | 4 ++--
 src/components/sidebar/PageButton.tsx   | 5 +++--
 src/components/sidebar/Sidebar.tsx      | 2 +-
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/modals/Example2Modal.tsx b/src/components/modals/Example2Modal.tsx
index e10bb93c5..a72a2f6b8 100644
--- a/src/components/modals/Example2Modal.tsx
+++ b/src/components/modals/Example2Modal.tsx
@@ -46,7 +46,7 @@ export default function Example2Modal() {
       onOpen({
         context: "success",
         message: "Your information has been updated",
-      })
+      }),
     );
     handleClose();
   };
diff --git a/src/components/sidebar/ExpandButton.tsx b/src/components/sidebar/ExpandButton.tsx
index c0b00189c..cde22edd7 100644
--- a/src/components/sidebar/ExpandButton.tsx
+++ b/src/components/sidebar/ExpandButton.tsx
@@ -1,7 +1,7 @@
 import {
   ArrowLeftOnRectangleIcon,
   ArrowRightOnRectangleIcon,
-} from '@heroicons/react/24/solid';
+} from "@heroicons/react/24/solid";
 
 interface ExpandButtonProps {
   isOpen: boolean;
@@ -12,7 +12,7 @@ export default function ExpandButton({ isOpen, onClick }: ExpandButtonProps) {
   return (
     <button
       type="button"
-      className="w-[3.125rem] bg-base-200 text-base-300 capitalize hover:bg-base-200 mr-2 border-none"
+      className="bg-base-200 text-base-300 capitalize hover:bg-base-200 border-none"
       onClick={() => onClick(!isOpen)}
     >
       {isOpen ? (
diff --git a/src/components/sidebar/PageButton.tsx b/src/components/sidebar/PageButton.tsx
index dd92da64b..e421e2d59 100644
--- a/src/components/sidebar/PageButton.tsx
+++ b/src/components/sidebar/PageButton.tsx
@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { MainPages, PageProperty, voyagePages } from "./Sidebar";
+import Button from "../Button";
 
 interface PageButtonProps {
   element: PageProperty;
@@ -45,7 +46,7 @@ export default function PageButton({
             : ""
         }
       >
-        <button
+        <Button
           type="button"
           data-tip={element.name}
           className={`${buttonStyles} ${getButtonBackgroundStyle(
@@ -57,7 +58,7 @@ export default function PageButton({
         >
           {element.icon}
           {getButtonText(element.name)}
-        </button>
+        </Button>
       </Link>
     </li>
   );
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index 02fb34a16..445872086 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -157,7 +157,7 @@ export default function Sidebar() {
           </ul>
         )}
       </ul>
-      <div className="flex flex-col items-end justify-start border-t border-neutral-content min-h-[80px]">
+      <div className="flex flex-col items-end justify-start border-t border-neutral-content min-h-[80px] pt-4 pr-6">
         <ExpandButton isOpen={isOpenSidebar} onClick={setIsOpenSidebar} />
       </div>
     </aside>

From 24627a218b07bb82a5ce5e5eecad1d3bac67b710 Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Fri, 12 Jan 2024 23:45:10 +0100
Subject: [PATCH 04/25] fix button ui problem

---
 src/components/Button.tsx             | 5 ++++-
 src/components/sidebar/PageButton.tsx | 6 +++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index b08265920..9506aed3e 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -85,6 +85,7 @@ export default function Button({
   variant,
   size,
   outline,
+  children,
   ...props
 }: ButtonProps) {
   return (
@@ -92,6 +93,8 @@ export default function Button({
       type="button"
       className={cn(button({ variant, size, outline, className }))}
       {...props}
-    />
+    >
+      {children}
+    </button>
   );
 }
diff --git a/src/components/sidebar/PageButton.tsx b/src/components/sidebar/PageButton.tsx
index e421e2d59..1c6789b1f 100644
--- a/src/components/sidebar/PageButton.tsx
+++ b/src/components/sidebar/PageButton.tsx
@@ -1,7 +1,7 @@
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { MainPages, PageProperty, voyagePages } from "./Sidebar";
 import Button from "../Button";
+import { MainPages, PageProperty, voyagePages } from "./Sidebar";
 
 interface PageButtonProps {
   element: PageProperty;
@@ -24,8 +24,8 @@ export default function PageButton({
   const buttonStyles = `${
     isOpen
       ? "w-[14.375rem] flex justify-start pl-6"
-      : "w-[3.125rem] tooltip hover:tooltip-open tooltip-right before:bg-base-100 before:text-base-300 after:border-r-base-100 overflow:false"
-  } h-[3.125rem] text-base-300 capitalize border-none hover:bg-base-100`;
+      : "w-[3.125rem] tooltip hover:tooltip-open tooltip-right before:bg-base-100 before:text-base-300 after:border-r-base-100 overflow:false px-0"
+  } h-[3.125rem] text-base-300 capitalize border-none hover:bg-base-100 active:bg-neutral-content focus:bg-neutral-content focus:text-base-300`;
 
   const getButtonBackgroundStyle = (page: string) =>
     (selectedButton === page && selectedButton === currentPath) ||

From 724d285cd9940e77bf80f725dd35dd142da7818a Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Sat, 13 Jan 2024 15:24:20 +0100
Subject: [PATCH 05/25] fix: import issue

---
 src/components/sidebar/PageButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/sidebar/PageButton.tsx b/src/components/sidebar/PageButton.tsx
index 1c6789b1f..2b0d4d316 100644
--- a/src/components/sidebar/PageButton.tsx
+++ b/src/components/sidebar/PageButton.tsx
@@ -1,7 +1,7 @@
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import Button from "../Button";
 import { MainPages, PageProperty, voyagePages } from "./Sidebar";
+import Button from "@/components/Button";
 
 interface PageButtonProps {
   element: PageProperty;

From 851e7483bfbeb36186f06e1d1d13b31a6d04167c Mon Sep 17 00:00:00 2001
From: timothyrusso <russotimothy@live.it>
Date: Mon, 15 Jan 2024 07:45:57 +0100
Subject: [PATCH 06/25] feat: update user check for my voyage pages

---
 next.config.js                              |  3 +++
 src/components/sidebar/PageButton.tsx       |  2 +-
 src/components/sidebar/Sidebar.tsx          | 18 ++++++++++++++----
 src/components/sidebar/VoyagePageButton.tsx |  2 ++
 src/store/features/user/userSlice.ts        |  2 +-
 5 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/next.config.js b/next.config.js
index 220b106b5..1fbe5f128 100644
--- a/next.config.js
+++ b/next.config.js
@@ -15,6 +15,9 @@ const nextConfig = {
                 hostname: "gravatar.com"
             }
         ]
+    },
+    experimental: {
+        serverActions: true
     }
 };
 
diff --git a/src/components/sidebar/PageButton.tsx b/src/components/sidebar/PageButton.tsx
index 2b0d4d316..1ebc9e201 100644
--- a/src/components/sidebar/PageButton.tsx
+++ b/src/components/sidebar/PageButton.tsx
@@ -39,7 +39,7 @@ export default function PageButton({
   return (
     <li>
       <Link
-        href={element.name !== MainPages.myVoyage ? link : ""}
+        href={element.name !== MainPages.myVoyage ? link : "#"}
         className={
           element.name === MainPages.myVoyage && isOpen
             ? "cursor-default pointer-events-none"
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index c849f2661..dfbf0855c 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -12,6 +12,9 @@ import {
 import PageButton from "./PageButton";
 import VoyagePageButton from "./VoyagePageButton";
 import ExpandButton from "./ExpandButton";
+import { useAppSelector } from "@/store/hooks";
+import { VoyageTeamMembers } from "@/store/features/user/userSlice";
+import { RootState } from "@/store/store";
 
 export enum MainPages {
   dashboard = "Dashboard",
@@ -95,10 +98,6 @@ const pagesProperties: PageProperty[] = [
   },
 ];
 
-//-- Mocked fake data just for testing purpose --//
-const isVoyageStarted: boolean = true;
-//-- --//
-
 export default function Sidebar() {
   const currentPath = usePathname();
 
@@ -106,6 +105,17 @@ export default function Sidebar() {
   const [selectedButton, setSelectedButton] = useState<string>(currentPath);
   const [hoveredButton, setHoveredButton] = useState<string | null>(null);
 
+  const { isAuthenticated } = useAppSelector(
+    (state: RootState): { isAuthenticated: boolean } => state.auth,
+  );
+  const { voyageTeamMembers } = useAppSelector(
+    (state: RootState): { voyageTeamMembers: VoyageTeamMembers[] } =>
+      state.user,
+  );
+
+  const isVoyageStarted: boolean =
+    isAuthenticated && !!voyageTeamMembers[0]?.id;
+
   const handlePageClick = useCallback(
     (element: PageProperty | string) => {
       if (typeof element === "string") {
diff --git a/src/components/sidebar/VoyagePageButton.tsx b/src/components/sidebar/VoyagePageButton.tsx
index 74ba0b91d..c8bedcce3 100644
--- a/src/components/sidebar/VoyagePageButton.tsx
+++ b/src/components/sidebar/VoyagePageButton.tsx
@@ -2,6 +2,8 @@ import { ArrowRightCircleIcon } from "@heroicons/react/20/solid";
 import { LockClosedIcon } from "@heroicons/react/24/solid";
 import Link from "next/link";
 import { VoyagePageProperty } from "./Sidebar";
+import { useAppSelector } from "@/store/hooks";
+import { VoyageTeamMembers } from "@/store/features/user/userSlice";
 
 interface VoyagePageButtonProps {
   element: VoyagePageProperty;
diff --git a/src/store/features/user/userSlice.ts b/src/store/features/user/userSlice.ts
index 8b72bcde7..0b4cdd88f 100644
--- a/src/store/features/user/userSlice.ts
+++ b/src/store/features/user/userSlice.ts
@@ -1,6 +1,6 @@
 import { PayloadAction, createSlice } from "@reduxjs/toolkit";
 
-interface VoyageTeamMembers {
+export interface VoyageTeamMembers {
   id: number;
   voyageTeamId: number;
   voyageTeam: {

From 81496d141f7b3ec869028dd23e4d4ad3628d0d65 Mon Sep 17 00:00:00 2001
From: timothyrusso <russotimothy@live.it>
Date: Mon, 15 Jan 2024 21:25:07 +0100
Subject: [PATCH 07/25] fix: lint errors

---
 src/components/sidebar/VoyagePageButton.tsx | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/sidebar/VoyagePageButton.tsx b/src/components/sidebar/VoyagePageButton.tsx
index c8bedcce3..37872bc75 100644
--- a/src/components/sidebar/VoyagePageButton.tsx
+++ b/src/components/sidebar/VoyagePageButton.tsx
@@ -1,9 +1,7 @@
-import { ArrowRightCircleIcon } from "@heroicons/react/20/solid";
-import { LockClosedIcon } from "@heroicons/react/24/solid";
-import Link from "next/link";
-import { VoyagePageProperty } from "./Sidebar";
-import { useAppSelector } from "@/store/hooks";
-import { VoyageTeamMembers } from "@/store/features/user/userSlice";
+import { ArrowRightCircleIcon } from '@heroicons/react/20/solid';
+import { LockClosedIcon } from '@heroicons/react/24/solid';
+import Link from 'next/link';
+import { VoyagePageProperty } from './Sidebar';
 
 interface VoyagePageButtonProps {
   element: VoyagePageProperty;
@@ -41,11 +39,11 @@ export default function VoyagePageButton({
 
   return (
     <li className="h-7">
-      <Link href={isVoyageStarted ? element.link : "#"}>
+      <Link href={isVoyageStarted ? element.link : '#'}>
         <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 pointer-events-none'
           } text-neutral-focus capitalize border-none relative`}
           onMouseEnter={() => setHoveredButton(element.link)}
           onMouseLeave={() => setHoveredButton(null)}

From b810ce68a18c3932ff49794f78e9d811f6f1d3bc Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Tue, 16 Jan 2024 09:19:33 +0100
Subject: [PATCH 08/25] fix: prettier

---
 src/components/sidebar/VoyagePageButton.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/sidebar/VoyagePageButton.tsx b/src/components/sidebar/VoyagePageButton.tsx
index 37872bc75..74ba0b91d 100644
--- a/src/components/sidebar/VoyagePageButton.tsx
+++ b/src/components/sidebar/VoyagePageButton.tsx
@@ -1,7 +1,7 @@
-import { ArrowRightCircleIcon } from '@heroicons/react/20/solid';
-import { LockClosedIcon } from '@heroicons/react/24/solid';
-import Link from 'next/link';
-import { VoyagePageProperty } from './Sidebar';
+import { ArrowRightCircleIcon } from "@heroicons/react/20/solid";
+import { LockClosedIcon } from "@heroicons/react/24/solid";
+import Link from "next/link";
+import { VoyagePageProperty } from "./Sidebar";
 
 interface VoyagePageButtonProps {
   element: VoyagePageProperty;
@@ -39,11 +39,11 @@ export default function VoyagePageButton({
 
   return (
     <li className="h-7">
-      <Link href={isVoyageStarted ? element.link : '#'}>
+      <Link href={isVoyageStarted ? element.link : "#"}>
         <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 pointer-events-none"
           } text-neutral-focus capitalize border-none relative`}
           onMouseEnter={() => setHoveredButton(element.link)}
           onMouseLeave={() => setHoveredButton(null)}

From 1b32fc38749818ab8e5fea5b3cd5b06d1f6d6d8a Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Sun, 21 Jan 2024 12:30:16 +0100
Subject: [PATCH 09/25] feat: use neutral variant and remove unused classnames

---
 next.config.js                        | 3 ---
 src/components/sidebar/PageButton.tsx | 6 ++++--
 src/components/sidebar/Sidebar.tsx    | 7 +------
 3 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/next.config.js b/next.config.js
index 1fbe5f128..9d36a57d9 100644
--- a/next.config.js
+++ b/next.config.js
@@ -16,9 +16,6 @@ const nextConfig = {
             }
         ]
     },
-    experimental: {
-        serverActions: true
-    }
 };
 
 module.exports = nextConfig;
diff --git a/src/components/sidebar/PageButton.tsx b/src/components/sidebar/PageButton.tsx
index 1ebc9e201..8949a6b13 100644
--- a/src/components/sidebar/PageButton.tsx
+++ b/src/components/sidebar/PageButton.tsx
@@ -24,8 +24,8 @@ export default function PageButton({
   const buttonStyles = `${
     isOpen
       ? "w-[14.375rem] flex justify-start pl-6"
-      : "w-[3.125rem] tooltip hover:tooltip-open tooltip-right before:bg-base-100 before:text-base-300 after:border-r-base-100 overflow:false px-0"
-  } h-[3.125rem] text-base-300 capitalize border-none hover:bg-base-100 active:bg-neutral-content focus:bg-neutral-content focus:text-base-300`;
+      : "w-[3.125rem] tooltip hover:tooltip-open tooltip-right overflow:false px-0"
+  }`;
 
   const getButtonBackgroundStyle = (page: string) =>
     (selectedButton === page && selectedButton === currentPath) ||
@@ -48,6 +48,8 @@ export default function PageButton({
       >
         <Button
           type="button"
+          size="lg"
+          variant="neutral"
           data-tip={element.name}
           className={`${buttonStyles} ${getButtonBackgroundStyle(
             element.link,
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index dfbf0855c..5b161f69b 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -108,13 +108,8 @@ export default function Sidebar() {
   const { isAuthenticated } = useAppSelector(
     (state: RootState): { isAuthenticated: boolean } => state.auth,
   );
-  const { voyageTeamMembers } = useAppSelector(
-    (state: RootState): { voyageTeamMembers: VoyageTeamMembers[] } =>
-      state.user,
-  );
 
-  const isVoyageStarted: boolean =
-    isAuthenticated && !!voyageTeamMembers[0]?.id;
+  const isVoyageStarted: boolean = isAuthenticated;
 
   const handlePageClick = useCallback(
     (element: PageProperty | string) => {

From e448dae2f5058edc280a99c860dd7f1f253059cf Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Sun, 21 Jan 2024 12:33:35 +0100
Subject: [PATCH 10/25] fix: lint errors

---
 src/components/sidebar/Sidebar.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index 5b161f69b..b7394c92d 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -13,7 +13,6 @@ import PageButton from "./PageButton";
 import VoyagePageButton from "./VoyagePageButton";
 import ExpandButton from "./ExpandButton";
 import { useAppSelector } from "@/store/hooks";
-import { VoyageTeamMembers } from "@/store/features/user/userSlice";
 import { RootState } from "@/store/store";
 
 export enum MainPages {

From 84477ac44eebc1c7a5e3a477ae7a8ae544c8b970 Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Sun, 21 Jan 2024 12:45:44 +0100
Subject: [PATCH 11/25] feat: voyage icons alignment

---
 src/components/sidebar/VoyagePageButton.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/sidebar/VoyagePageButton.tsx b/src/components/sidebar/VoyagePageButton.tsx
index 74ba0b91d..98695480b 100644
--- a/src/components/sidebar/VoyagePageButton.tsx
+++ b/src/components/sidebar/VoyagePageButton.tsx
@@ -22,14 +22,14 @@ export default function VoyagePageButton({
 }: VoyagePageButtonProps) {
   const showIcon = (element: string) => {
     if (!isVoyageStarted) {
-      return <LockClosedIcon className="h-[1.125rem]" />;
+      return <LockClosedIcon className="h-[1.125rem] self-center mr-1" />;
     } else if (
       isVoyageStarted &&
       (hoveredButton === element || selectedButton === element)
     ) {
       return (
         <>
-          <div className="absolute left-[1.4rem]">
+          <div className="absolute left-[1.4rem] top-[3px]">
             <ArrowRightCircleIcon className="h-[1.125rem] text-primary" />
           </div>
         </>

From 89b8710d39670f210312c0be274993a72c837bf5 Mon Sep 17 00:00:00 2001
From: Dan Ko <danko56666@gmail.com>
Date: Sun, 21 Jan 2024 16:40:49 -0300
Subject: [PATCH 12/25] update colors for neutral variant in button component

---
 src/components/Button.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 9506aed3e..404e8cd3f 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -34,10 +34,10 @@ const button = cva(
           "disabled:bg-accent-focus",
         ],
         neutral: [
-          "bg-base-100",
+          "bg-base-200",
           "border-base-100",
-          "hover:bg-neutral-content",
-          "focus:bg-neutral-focus",
+          "hover:bg-base-100",
+          "focus: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

From 67931a1cfc8c0ec98a40d23ba0963a07c32860d6 Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Tue, 23 Jan 2024 18:25:44 +0100
Subject: [PATCH 13/25] fix: selected button when current path change

---
 .gitignore                         |  3 +++
 src/components/sidebar/Sidebar.tsx | 10 +++++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/.gitignore b/.gitignore
index a0731096c..c5eb4a8fc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -37,3 +37,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# vscode settings
+.vscode/settings.json
\ No newline at end of file
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index b7394c92d..d9f469f28 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import type React from "react";
 import { usePathname } from "next/navigation";
 import {
@@ -105,11 +105,15 @@ export default function Sidebar() {
   const [hoveredButton, setHoveredButton] = useState<string | null>(null);
 
   const { isAuthenticated } = useAppSelector(
-    (state: RootState): { isAuthenticated: boolean } => state.auth,
+    (state: RootState): { isAuthenticated: boolean } => state.auth
   );
 
   const isVoyageStarted: boolean = isAuthenticated;
 
+  useEffect(() => {
+    setSelectedButton(currentPath);
+  }, [currentPath]);
+
   const handlePageClick = useCallback(
     (element: PageProperty | string) => {
       if (typeof element === "string") {
@@ -120,7 +124,7 @@ export default function Sidebar() {
         setSelectedButton(element.link);
       }
     },
-    [setSelectedButton, setIsOpenSidebar],
+    [setSelectedButton, setIsOpenSidebar]
   );
 
   return (

From 7e9e5e8a036299bc304726c225a8de7931191899 Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Thu, 25 Jan 2024 18:24:34 +0100
Subject: [PATCH 14/25] fix: remove unused classes

---
 src/components/Button.tsx             | 2 +-
 src/components/Tooltip.tsx            | 2 +-
 src/components/sidebar/PageButton.tsx | 4 +---
 src/components/sidebar/Sidebar.tsx    | 4 ++--
 4 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index ac6a312d9..9ea58aaa5 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -73,7 +73,7 @@ const button = cva(
       size: "md",
       outline: false,
     },
-  }
+  },
 );
 
 export interface ButtonProps
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
index a3fd41ce8..a51acb406 100644
--- a/src/components/Tooltip.tsx
+++ b/src/components/Tooltip.tsx
@@ -60,7 +60,7 @@ export default function Tooltip({
           position === "right" &&
             "top-1/2 left-full translate-x-3 after:right-full after:border-l-transparent",
           position === "left" &&
-            "top-1/2 right-full -translate-x-3 after:left-full after:border-r-transparent"
+            "top-1/2 right-full -translate-x-3 after:left-full after:border-r-transparent",
         )}
       >
         <div className={`${supportText && "mb-2"}`}>{content}</div>
diff --git a/src/components/sidebar/PageButton.tsx b/src/components/sidebar/PageButton.tsx
index 0ed031c64..8a688ecc7 100644
--- a/src/components/sidebar/PageButton.tsx
+++ b/src/components/sidebar/PageButton.tsx
@@ -23,9 +23,7 @@ export default function PageButton({
 }: PageButtonProps) {
   const currentPath = usePathname();
   const buttonStyles = `${
-    isOpen
-      ? "w-[14.375rem] flex justify-start pl-6"
-      : "w-[3.125rem] tooltip hover:tooltip-open tooltip-right overflow:false px-0"
+    isOpen ? "w-[14.375rem] flex justify-start pl-6" : "w-[3.125rem] px-0"
   }`;
 
   const getButtonBackgroundStyle = (page: string) =>
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index 2e8d1245d..d9f469f28 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -105,7 +105,7 @@ export default function Sidebar() {
   const [hoveredButton, setHoveredButton] = useState<string | null>(null);
 
   const { isAuthenticated } = useAppSelector(
-    (state: RootState): { isAuthenticated: boolean } => state.auth,
+    (state: RootState): { isAuthenticated: boolean } => state.auth
   );
 
   const isVoyageStarted: boolean = isAuthenticated;
@@ -124,7 +124,7 @@ export default function Sidebar() {
         setSelectedButton(element.link);
       }
     },
-    [setSelectedButton, setIsOpenSidebar],
+    [setSelectedButton, setIsOpenSidebar]
   );
 
   return (

From 253452c155894869ff2f0583f1939385a940c374 Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Thu, 25 Jan 2024 18:34:11 +0100
Subject: [PATCH 15/25] feat: remove unused hook

---
 src/components/sidebar/PageButton.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/sidebar/PageButton.tsx b/src/components/sidebar/PageButton.tsx
index 8a688ecc7..b2931e0d4 100644
--- a/src/components/sidebar/PageButton.tsx
+++ b/src/components/sidebar/PageButton.tsx
@@ -21,13 +21,12 @@ export default function PageButton({
   link,
   setHoveredButton,
 }: PageButtonProps) {
-  const currentPath = usePathname();
   const buttonStyles = `${
     isOpen ? "w-[14.375rem] flex justify-start pl-6" : "w-[3.125rem] px-0"
   }`;
 
   const getButtonBackgroundStyle = (page: string) =>
-    (selectedButton === page && selectedButton === currentPath) ||
+    selectedButton === page ||
     (page === "" &&
       voyagePages.some((voyagePage) => voyagePage.link === selectedButton))
       ? "bg-neutral-content"

From f48ae24b171108093162af60433befb4d0a2528d Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Thu, 25 Jan 2024 18:35:27 +0100
Subject: [PATCH 16/25] fix: lint errors

---
 src/components/sidebar/PageButton.tsx | 1 -
 src/components/sidebar/Sidebar.tsx    | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/sidebar/PageButton.tsx b/src/components/sidebar/PageButton.tsx
index b2931e0d4..3ef93a97e 100644
--- a/src/components/sidebar/PageButton.tsx
+++ b/src/components/sidebar/PageButton.tsx
@@ -1,5 +1,4 @@
 import Link from "next/link";
-import { usePathname } from "next/navigation";
 import { MainPages, PageProperty, voyagePages } from "./Sidebar";
 import Button from "@/components/Button";
 import Tooltip from "@/components/Tooltip";
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index d9f469f28..2e8d1245d 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -105,7 +105,7 @@ export default function Sidebar() {
   const [hoveredButton, setHoveredButton] = useState<string | null>(null);
 
   const { isAuthenticated } = useAppSelector(
-    (state: RootState): { isAuthenticated: boolean } => state.auth
+    (state: RootState): { isAuthenticated: boolean } => state.auth,
   );
 
   const isVoyageStarted: boolean = isAuthenticated;
@@ -124,7 +124,7 @@ export default function Sidebar() {
         setSelectedButton(element.link);
       }
     },
-    [setSelectedButton, setIsOpenSidebar]
+    [setSelectedButton, setIsOpenSidebar],
   );
 
   return (

From f46a0b455855be644c059829941afe44804b9dff Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Thu, 25 Jan 2024 18:43:02 +0100
Subject: [PATCH 17/25] feat: remove usless check on sidebar page

---
 src/components/sidebar/PageButton.tsx       |  2 +-
 src/components/sidebar/Sidebar.tsx          | 10 ++++------
 src/components/sidebar/VoyagePageButton.tsx |  4 ++--
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/sidebar/PageButton.tsx b/src/components/sidebar/PageButton.tsx
index 3ef93a97e..81c71c7ba 100644
--- a/src/components/sidebar/PageButton.tsx
+++ b/src/components/sidebar/PageButton.tsx
@@ -5,7 +5,7 @@ import Tooltip from "@/components/Tooltip";
 
 interface PageButtonProps {
   element: PageProperty;
-  onClick: (element: string | PageProperty) => void;
+  onClick: (element: PageProperty) => void;
   selectedButton: string;
   isOpen: boolean;
   link: string;
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index 2e8d1245d..356d0199d 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -105,7 +105,7 @@ export default function Sidebar() {
   const [hoveredButton, setHoveredButton] = useState<string | null>(null);
 
   const { isAuthenticated } = useAppSelector(
-    (state: RootState): { isAuthenticated: boolean } => state.auth,
+    (state: RootState): { isAuthenticated: boolean } => state.auth
   );
 
   const isVoyageStarted: boolean = isAuthenticated;
@@ -116,15 +116,13 @@ export default function Sidebar() {
 
   const handlePageClick = useCallback(
     (element: PageProperty | string) => {
-      if (typeof element === "string") {
-        setSelectedButton(element);
-      } else if (element.name === MainPages.myVoyage) {
+      if (typeof element !== "string" && element.name === MainPages.myVoyage) {
         setIsOpenSidebar(true);
-      } else {
+      } else if (typeof element !== "string") {
         setSelectedButton(element.link);
       }
     },
-    [setSelectedButton, setIsOpenSidebar],
+    [setSelectedButton, setIsOpenSidebar]
   );
 
   return (
diff --git a/src/components/sidebar/VoyagePageButton.tsx b/src/components/sidebar/VoyagePageButton.tsx
index 98695480b..e0e1f40d4 100644
--- a/src/components/sidebar/VoyagePageButton.tsx
+++ b/src/components/sidebar/VoyagePageButton.tsx
@@ -1,11 +1,11 @@
 import { ArrowRightCircleIcon } from "@heroicons/react/20/solid";
 import { LockClosedIcon } from "@heroicons/react/24/solid";
 import Link from "next/link";
-import { VoyagePageProperty } from "./Sidebar";
+import { PageProperty, VoyagePageProperty } from "./Sidebar";
 
 interface VoyagePageButtonProps {
   element: VoyagePageProperty;
-  onClick: (element: string) => void;
+  onClick: (element: string | PageProperty) => void;
   hoveredButton: string | null;
   selectedButton: string;
   isVoyageStarted: boolean;

From becba8964d47a4648f9baf1f309f044b60a55a53 Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Fri, 26 Jan 2024 18:45:44 +0100
Subject: [PATCH 18/25] feat: add check for the voyage status

---
 src/components/sidebar/PageButton.tsx |  2 +-
 src/components/sidebar/Sidebar.tsx    | 16 ++++++++++++--
 src/store/features/user/userSlice.ts  | 31 +++++++++++++++++++--------
 3 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/src/components/sidebar/PageButton.tsx b/src/components/sidebar/PageButton.tsx
index 81c71c7ba..1527b3a21 100644
--- a/src/components/sidebar/PageButton.tsx
+++ b/src/components/sidebar/PageButton.tsx
@@ -49,7 +49,7 @@ export default function PageButton({
           variant="neutral"
           data-tip={element.name}
           className={`${buttonStyles} ${getButtonBackgroundStyle(
-            element.link
+            element.link,
           )} ${element.marginBottom} flex items-center`}
           onMouseEnter={() => setHoveredButton(element.name)}
           onMouseLeave={() => setHoveredButton(null)}
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index 356d0199d..c583d27b5 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import type React from "react";
 import { usePathname } from "next/navigation";
 import {
@@ -14,6 +14,7 @@ import VoyagePageButton from "./VoyagePageButton";
 import ExpandButton from "./ExpandButton";
 import { useAppSelector } from "@/store/hooks";
 import { RootState } from "@/store/store";
+import { VoyageTeamMember } from "@/store/features/user/userSlice";
 
 export enum MainPages {
   dashboard = "Dashboard",
@@ -107,8 +108,19 @@ export default function Sidebar() {
   const { isAuthenticated } = useAppSelector(
     (state: RootState): { isAuthenticated: boolean } => state.auth
   );
+  const { voyageTeamMembers } = useAppSelector(
+    (state: RootState) => state.user
+  );
 
-  const isVoyageStarted: boolean = isAuthenticated;
+  const isActive = useMemo(() => {
+    if (voyageTeamMembers.length === 0) {
+      return false;
+    }
+    const lastVoyageTeamMember: VoyageTeamMember =
+      voyageTeamMembers[voyageTeamMembers.length - 1];
+    return lastVoyageTeamMember?.voyageTeam?.voyage?.status?.name === "Active";
+  }, [voyageTeamMembers]);
+  const isVoyageStarted: boolean = isAuthenticated && isActive;
 
   useEffect(() => {
     setSelectedButton(currentPath);
diff --git a/src/store/features/user/userSlice.ts b/src/store/features/user/userSlice.ts
index 0b4cdd88f..e06e738f3 100644
--- a/src/store/features/user/userSlice.ts
+++ b/src/store/features/user/userSlice.ts
@@ -1,15 +1,28 @@
 import { PayloadAction, createSlice } from "@reduxjs/toolkit";
 
-export interface VoyageTeamMembers {
+type VoyageStatus = {
+  name: string;
+};
+
+type Voyage = {
+  status: VoyageStatus;
+};
+
+type VoyageTeam = {
+  name: string;
+  voyage: Voyage;
+};
+
+type VoyageRole = {
+  name: string;
+};
+
+export type VoyageTeamMember = {
   id: number;
   voyageTeamId: number;
-  voyageTeam: {
-    name: string;
-  };
-  voyageRole: {
-    name: string;
-  };
-}
+  voyageTeam: VoyageTeam;
+  voyageRole: VoyageRole;
+};
 
 export interface User {
   id: string;
@@ -22,7 +35,7 @@ export interface User {
   linkedinId: string;
   email: string;
   timezone: string;
-  voyageTeamMembers: VoyageTeamMembers[];
+  voyageTeamMembers: VoyageTeamMember[];
 }
 
 const initialState: User = {

From 9fea9a327483a921931be765eb67c53cd66ef984 Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Fri, 26 Jan 2024 19:00:24 +0100
Subject: [PATCH 19/25] fix: storybook error

---
 src/stories/components/Sidebar.stories.tsx | 38 ++++++++++++++++++++--
 1 file changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/stories/components/Sidebar.stories.tsx b/src/stories/components/Sidebar.stories.tsx
index b6ed64ace..f4a726742 100644
--- a/src/stories/components/Sidebar.stories.tsx
+++ b/src/stories/components/Sidebar.stories.tsx
@@ -1,14 +1,46 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { Provider } from "react-redux";
+import { configureStore } from "@reduxjs/toolkit";
 import Sidebar from "@/components/sidebar/Sidebar";
+import userReducer from "@/store/features/user/userSlice";
+import authReducer from "@/store/features/auth/authSlice";
+
+const mockStore = configureStore({
+  reducer: {
+    user: userReducer,
+    auth: authReducer,
+  },
+  preloadedState: {
+    auth: {
+      isAuthenticated: true,
+    },
+    user: {
+      voyageTeamMembers: [
+        {
+          // @ts-expect-error - This is a mock object
+          voyageTeam: {
+            voyage: {
+              status: {
+                name: "Active",
+              },
+            },
+          },
+        },
+      ],
+    },
+  },
+});
 
 const meta: Meta<typeof Sidebar> = {
   title: "Example/Sidebar",
   component: Sidebar,
   decorators: [
     (Story) => (
-      <div style={{ height: 700 }}>
-        <Story />
-      </div>
+      <Provider store={mockStore}>
+        <div style={{ height: 700 }}>
+          <Story />
+        </div>
+      </Provider>
     ),
   ],
   parameters: {

From c803874289e005c8a8e6b8cf36779b2c96a4452e Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Fri, 26 Jan 2024 19:05:07 +0100
Subject: [PATCH 20/25] fix: push error

---
 src/stories/components/Sidebar.stories.tsx | 59 +++++++++++-----------
 1 file changed, 30 insertions(+), 29 deletions(-)

diff --git a/src/stories/components/Sidebar.stories.tsx b/src/stories/components/Sidebar.stories.tsx
index f4a726742..4786e27e7 100644
--- a/src/stories/components/Sidebar.stories.tsx
+++ b/src/stories/components/Sidebar.stories.tsx
@@ -1,42 +1,43 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Provider } from "react-redux";
-import { configureStore } from "@reduxjs/toolkit";
 import Sidebar from "@/components/sidebar/Sidebar";
-import userReducer from "@/store/features/user/userSlice";
-import authReducer from "@/store/features/auth/authSlice";
+import { store } from "@/store/store";
+// import { configureStore } from "@reduxjs/toolkit";
+// import userReducer from "@/store/features/user/userSlice";
+// import authReducer from "@/store/features/auth/authSlice";
 
-const mockStore = configureStore({
-  reducer: {
-    user: userReducer,
-    auth: authReducer,
-  },
-  preloadedState: {
-    auth: {
-      isAuthenticated: true,
-    },
-    user: {
-      voyageTeamMembers: [
-        {
-          // @ts-expect-error - This is a mock object
-          voyageTeam: {
-            voyage: {
-              status: {
-                name: "Active",
-              },
-            },
-          },
-        },
-      ],
-    },
-  },
-});
+// const mockStore = configureStore({
+//   reducer: {
+//     user: userReducer,
+//     auth: authReducer,
+//   },
+//   preloadedState: {
+//     auth: {
+//       isAuthenticated: true,
+//     },
+//     user: {
+//       voyageTeamMembers: [
+//         {
+//           // @ts-expect-error - This is a mock object
+//           voyageTeam: {
+//             voyage: {
+//               status: {
+//                 name: "Active",
+//               },
+//             },
+//           },
+//         },
+//       ],
+//     },
+//   },
+// });
 
 const meta: Meta<typeof Sidebar> = {
   title: "Example/Sidebar",
   component: Sidebar,
   decorators: [
     (Story) => (
-      <Provider store={mockStore}>
+      <Provider store={store}>
         <div style={{ height: 700 }}>
           <Story />
         </div>

From 344d45ff4c99203b49286047ffd7f6e9f0e30cd7 Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Fri, 26 Jan 2024 19:06:44 +0100
Subject: [PATCH 21/25] style: remove unused comments

---
 src/components/sidebar/Sidebar.tsx         |  6 ++---
 src/stories/components/Sidebar.stories.tsx | 29 ----------------------
 2 files changed, 3 insertions(+), 32 deletions(-)

diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index c583d27b5..ebc7118bf 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -106,10 +106,10 @@ export default function Sidebar() {
   const [hoveredButton, setHoveredButton] = useState<string | null>(null);
 
   const { isAuthenticated } = useAppSelector(
-    (state: RootState): { isAuthenticated: boolean } => state.auth
+    (state: RootState): { isAuthenticated: boolean } => state.auth,
   );
   const { voyageTeamMembers } = useAppSelector(
-    (state: RootState) => state.user
+    (state: RootState) => state.user,
   );
 
   const isActive = useMemo(() => {
@@ -134,7 +134,7 @@ export default function Sidebar() {
         setSelectedButton(element.link);
       }
     },
-    [setSelectedButton, setIsOpenSidebar]
+    [setSelectedButton, setIsOpenSidebar],
   );
 
   return (
diff --git a/src/stories/components/Sidebar.stories.tsx b/src/stories/components/Sidebar.stories.tsx
index 4786e27e7..91763426c 100644
--- a/src/stories/components/Sidebar.stories.tsx
+++ b/src/stories/components/Sidebar.stories.tsx
@@ -2,35 +2,6 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Provider } from "react-redux";
 import Sidebar from "@/components/sidebar/Sidebar";
 import { store } from "@/store/store";
-// import { configureStore } from "@reduxjs/toolkit";
-// import userReducer from "@/store/features/user/userSlice";
-// import authReducer from "@/store/features/auth/authSlice";
-
-// const mockStore = configureStore({
-//   reducer: {
-//     user: userReducer,
-//     auth: authReducer,
-//   },
-//   preloadedState: {
-//     auth: {
-//       isAuthenticated: true,
-//     },
-//     user: {
-//       voyageTeamMembers: [
-//         {
-//           // @ts-expect-error - This is a mock object
-//           voyageTeam: {
-//             voyage: {
-//               status: {
-//                 name: "Active",
-//               },
-//             },
-//           },
-//         },
-//       ],
-//     },
-//   },
-// });
 
 const meta: Meta<typeof Sidebar> = {
   title: "Example/Sidebar",

From 84d6e6c4def51e4467c10806852179d705069c59 Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Sun, 28 Jan 2024 18:42:37 +0100
Subject: [PATCH 22/25] fix: pr comments

---
 src/components/Button.tsx                   |  4 +--
 src/components/sidebar/PageButton.tsx       | 38 ++++++++++-----------
 src/components/sidebar/VoyagePageButton.tsx |  2 +-
 3 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 9ea58aaa5..c1ae45ac0 100644
--- a/src/components/Button.tsx
+++ b/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
diff --git a/src/components/sidebar/PageButton.tsx b/src/components/sidebar/PageButton.tsx
index 1527b3a21..febf6ad62 100644
--- a/src/components/sidebar/PageButton.tsx
+++ b/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>
   );
diff --git a/src/components/sidebar/VoyagePageButton.tsx b/src/components/sidebar/VoyagePageButton.tsx
index e0e1f40d4..db08f9c9a 100644
--- a/src/components/sidebar/VoyagePageButton.tsx
+++ b/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)}

From 5ee4162bf08078406b3e8fcf476f80edab5a2b5d Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Mon, 29 Jan 2024 18:33:52 +0100
Subject: [PATCH 23/25] fix: pr comments

---
 src/components/Button.tsx                   |  2 +-
 src/components/sidebar/PageButton.tsx       |  2 +-
 src/components/sidebar/Sidebar.tsx          | 13 +++++++------
 src/components/sidebar/VoyagePageButton.tsx |  5 ++++-
 4 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index c1ae45ac0..4ccc1bd58 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -73,7 +73,7 @@ const button = cva(
       size: "md",
       outline: false,
     },
-  }
+  },
 );
 
 export interface ButtonProps
diff --git a/src/components/sidebar/PageButton.tsx b/src/components/sidebar/PageButton.tsx
index febf6ad62..2c4bcf2c2 100644
--- a/src/components/sidebar/PageButton.tsx
+++ b/src/components/sidebar/PageButton.tsx
@@ -55,7 +55,7 @@ export default function PageButton({
             variant="neutral"
             data-tip={element.name}
             className={`${buttonStyles} ${getButtonBackgroundStyle(
-              element.link
+              element.link,
             )} ${element.marginBottom} flex items-center`}
             onMouseEnter={() => setHoveredButton(element.name)}
             onMouseLeave={() => setHoveredButton(null)}
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index ebc7118bf..c9ae75895 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -106,20 +106,21 @@ export default function Sidebar() {
   const [hoveredButton, setHoveredButton] = useState<string | null>(null);
 
   const { isAuthenticated } = useAppSelector(
-    (state: RootState): { isAuthenticated: boolean } => state.auth,
+    (state: RootState): { isAuthenticated: boolean } => state.auth
   );
   const { voyageTeamMembers } = useAppSelector(
-    (state: RootState) => state.user,
+    (state: RootState) => state.user
   );
 
   const isActive = useMemo(() => {
     if (voyageTeamMembers.length === 0) {
       return false;
     }
-    const lastVoyageTeamMember: VoyageTeamMember =
-      voyageTeamMembers[voyageTeamMembers.length - 1];
-    return lastVoyageTeamMember?.voyageTeam?.voyage?.status?.name === "Active";
+    return voyageTeamMembers.some(
+      (member) => member.voyageTeam.voyage.status.name === "Active"
+    );
   }, [voyageTeamMembers]);
+
   const isVoyageStarted: boolean = isAuthenticated && isActive;
 
   useEffect(() => {
@@ -134,7 +135,7 @@ export default function Sidebar() {
         setSelectedButton(element.link);
       }
     },
-    [setSelectedButton, setIsOpenSidebar],
+    [setSelectedButton, setIsOpenSidebar]
   );
 
   return (
diff --git a/src/components/sidebar/VoyagePageButton.tsx b/src/components/sidebar/VoyagePageButton.tsx
index db08f9c9a..08ee22dd4 100644
--- a/src/components/sidebar/VoyagePageButton.tsx
+++ b/src/components/sidebar/VoyagePageButton.tsx
@@ -39,7 +39,10 @@ export default function VoyagePageButton({
 
   return (
     <li className="h-7">
-      <Link href={isVoyageStarted ? element.link : "#"}>
+      <Link
+        href={isVoyageStarted ? element.link : "#"}
+        className={!isVoyageStarted ? "pointer-events-none" : ""}
+      >
         <button
           type="button"
           className={`bg-transparent hover:bg-transparent w-[9.375rem] h-[1.1875rem] min-h-0 mb-2.5 flex justify-start ${

From 6417bd627bc838d8ab3ea1d9232abca46b95d64c Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Tue, 30 Jan 2024 06:48:50 +0100
Subject: [PATCH 24/25] fix: pr comments

---
 src/components/sidebar/Sidebar.tsx          | 1 -
 src/components/sidebar/VoyagePageButton.tsx | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index c9ae75895..7508f338c 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -14,7 +14,6 @@ import VoyagePageButton from "./VoyagePageButton";
 import ExpandButton from "./ExpandButton";
 import { useAppSelector } from "@/store/hooks";
 import { RootState } from "@/store/store";
-import { VoyageTeamMember } from "@/store/features/user/userSlice";
 
 export enum MainPages {
   dashboard = "Dashboard",
diff --git a/src/components/sidebar/VoyagePageButton.tsx b/src/components/sidebar/VoyagePageButton.tsx
index 08ee22dd4..c10efb21f 100644
--- a/src/components/sidebar/VoyagePageButton.tsx
+++ b/src/components/sidebar/VoyagePageButton.tsx
@@ -41,7 +41,7 @@ export default function VoyagePageButton({
     <li className="h-7">
       <Link
         href={isVoyageStarted ? element.link : "#"}
-        className={!isVoyageStarted ? "pointer-events-none" : ""}
+        className={isVoyageStarted ? "" : "pointer-events-none"}
       >
         <button
           type="button"

From 8f8b9d991adcd890fe485a82411d3bd3e37bd2cd Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Tue, 30 Jan 2024 06:51:17 +0100
Subject: [PATCH 25/25] style: lint formatting

---
 src/components/sidebar/Sidebar.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index 7508f338c..8bb79adad 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -105,10 +105,10 @@ export default function Sidebar() {
   const [hoveredButton, setHoveredButton] = useState<string | null>(null);
 
   const { isAuthenticated } = useAppSelector(
-    (state: RootState): { isAuthenticated: boolean } => state.auth
+    (state: RootState): { isAuthenticated: boolean } => state.auth,
   );
   const { voyageTeamMembers } = useAppSelector(
-    (state: RootState) => state.user
+    (state: RootState) => state.user,
   );
 
   const isActive = useMemo(() => {
@@ -116,7 +116,7 @@ export default function Sidebar() {
       return false;
     }
     return voyageTeamMembers.some(
-      (member) => member.voyageTeam.voyage.status.name === "Active"
+      (member) => member.voyageTeam.voyage.status.name === "Active",
     );
   }, [voyageTeamMembers]);
 
@@ -134,7 +134,7 @@ export default function Sidebar() {
         setSelectedButton(element.link);
       }
     },
-    [setSelectedButton, setIsOpenSidebar]
+    [setSelectedButton, setIsOpenSidebar],
   );
 
   return (