Feature/sidebar refactor

next.config.js

@@ -15,6 +15,9 @@ const nextConfig = {
                 hostname: "gravatar.com"
             }
         ]
+    },
+    experimental: {
+        serverActions: true
     }
 };
 

src/components/Button.tsx

@@ -85,13 +85,16 @@ export default function Button({
   variant,
   size,
   outline,
+  children,
   ...props
 }: ButtonProps) {
   return (
     <button
       type="button"
       className={cn(button({ variant, size, outline, className }))}
       {...props}
-    />
+    >
+      {children}
+    </button>
   );
 }

src/components/navbar/Navbar.tsx

@@ -6,7 +6,7 @@ interface NavbarProps {
 
 export default function Navbar({ children }: 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>

src/components/sidebar/ExpandButton.tsx

@@ -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 ? (

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 "@/components/Button";
 
 interface PageButtonProps {
   element: PageProperty;
@@ -23,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) ||
@@ -38,26 +39,26 @@ 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"
             : ""
         }
       >
-        <button
+        <Button
           type="button"
           data-tip={element.name}
           className={`${buttonStyles} ${getButtonBackgroundStyle(
             element.link,
-          )} ${element.marginBottom}`}
+          )} ${element.marginBottom} flex items-center`}
           onMouseEnter={() => setHoveredButton(element.name)}
           onMouseLeave={() => setHoveredButton(null)}
           onClick={() => onClick(element)}
         >
           {element.icon}
           {getButtonText(element.name)}
-        </button>
+        </Button>
       </Link>
     </li>
   );

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 {
@@ -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,32 +98,42 @@ const pagesProperties: PageProperty[] = [
   },
 ];
 
-//-- Mocked fake data just for testing purpose --//
-const isVoyageStarted: boolean = true;
-//-- --//
-
 export default function Sidebar() {
   const currentPath = usePathname();
 
   const [isOpenSidebar, setIsOpenSidebar] = useState<boolean>(true);
   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 { 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") {
+        setSelectedButton(element);
+      } else if (element.name === MainPages.myVoyage) {
+        setIsOpenSidebar(true);
+      } else {
+        setSelectedButton(element.link);
+      }
+    },
+    [setSelectedButton, setIsOpenSidebar],
+  );
 
   return (
     <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 ${
@@ -154,7 +167,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] pt-4 pr-6">
         <ExpandButton isOpen={isOpenSidebar} onClick={setIsOpenSidebar} />
       </div>
     </aside>

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: {

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 = {};