From 3b8ceee576f2acf0441db1899c48140677372230 Mon Sep 17 00:00:00 2001
From: Dan Ko <danko56666@gmail.com>
Date: Thu, 21 Sep 2023 16:44:07 -0400
Subject: [PATCH 1/5] replace with better solution to handle sidebar

---
 src/app/ideation/page.tsx          | 40 ++++++++++++++----------------
 src/app/layout.tsx                 | 10 +++++---
 src/components/navbar/Navbar.tsx   |  2 +-
 src/components/sidebar/Sidebar.tsx |  6 ++---
 4 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/src/app/ideation/page.tsx b/src/app/ideation/page.tsx
index 4dc3fe39..2840478f 100644
--- a/src/app/ideation/page.tsx
+++ b/src/app/ideation/page.tsx
@@ -3,28 +3,26 @@ import { Banner } from "@/components";
 
 function IdeationPage() {
   return (
-    <div className="flex flex-row justify-center">
-      <div className="flex flex-col gap-y-9 p-3">
-        <Banner
-          image="/img/ideation_banner.png"
-          alt="ideation_banner"
-          title="Ideation"
-          description="Okay, time to put on your thinking caps and channel your inner creativity! What kind of amazing, mind-blowing project idea do you have that will make SpaceX jealous? Let's hear it!"
+    <div className="flex flex-col gap-y-9 p-3">
+      <Banner
+        image="/img/ideation_banner.png"
+        alt="ideation_banner"
+        title="Ideation"
+        description="Okay, time to put on your thinking caps and channel your inner creativity! What kind of amazing, mind-blowing project idea do you have that will make SpaceX jealous? Let's hear it!"
+      />
+      <CreateIdeationContainer />
+      {ideation.map((i) => (
+        <IdeationContainer
+          key={i.id}
+          title={i.title}
+          project_idea={i.project_idea}
+          vision_statement={i.vision_statement}
+          users={i.users}
+          voted={i.voted}
+          own_idea={i.own_idea}
+          contributed_by={i.contributed_by}
         />
-        <CreateIdeationContainer />
-        {ideation.map((i) => (
-          <IdeationContainer
-            key={i.id}
-            title={i.title}
-            project_idea={i.project_idea}
-            vision_statement={i.vision_statement}
-            users={i.users}
-            voted={i.voted}
-            own_idea={i.own_idea}
-            contributed_by={i.contributed_by}
-          />
-        ))}
-      </div>
+      ))}
     </div>
   );
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index df6e3344..fc3d2073 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -33,11 +33,15 @@ export default function RootLayout({
           storageKey="chingu-theme"
           disableTransitionOnChange
         >
-          <div className="flex min-h-screen">
+          <div className="flex flex-col h-screen">
             <Navbar />
             <StoreProvider>
-              <Sidebar />
-              <main className="mt-16 flex-1">{children}</main>
+              <div className="flex flex-1 overflow-hidden">
+                <Sidebar />
+                <main className="flex flex-col flex-1 overflow-y-auto items-center">
+                  {children}
+                </main>
+              </div>
             </StoreProvider>
           </div>
         </ThemeProvider>
diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
index 36510344..139a8556 100644
--- a/src/components/navbar/Navbar.tsx
+++ b/src/components/navbar/Navbar.tsx
@@ -5,7 +5,7 @@ const notificationCount = 4;
 
 export default function Navbar() {
   return (
-    <nav className="navbar fixed bg-primary h-8 z-10">
+    <nav className="navbar bg-primary">
       <div className="flex-1 pl-2">
         <ChinguMenu />
       </div>
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index 393e3a66..c1954451 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -125,8 +125,8 @@ export default function Sidebar() {
 
   return (
     <aside
-      className={`sticky top-16 h-[calc(100vh-theme(spacing.16))] ${
-        isOpenSidebar ? "w-[18.4375rem]" : "w-[5.8125rem]"
+      className={`overflow-y-auto ${
+        isOpenSidebar ? "w-[18.438rem]" : "w-[5.813rem]"
       } text-center bg-base-200 flex flex-col justify-between`}
     >
       <ul
@@ -169,7 +169,7 @@ export default function Sidebar() {
           />
         )}
       </div>
-      <div className="flex flex-col items-end justify-start border-t border-neutral-content h-20">
+      <div className="flex flex-col items-end justify-start border-t border-neutral-content">
         <ExpandButton isOpen={isOpenSidebar} onClick={setIsOpenSidebar} />
       </div>
     </aside>

From f49ac3e2b69946b15ceef96587121656f2e8fd4e Mon Sep 17 00:00:00 2001
From: Dan Ko <danko56666@gmail.com>
Date: Fri, 22 Sep 2023 16:36:24 -0400
Subject: [PATCH 2/5] add border to sidebar

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

diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index c1954451..4d2fe625 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -127,7 +127,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 ${

From 4db724a552be007f06c3a3ebadf0c0b29aa8643c Mon Sep 17 00:00:00 2001
From: Dan Ko <danko56666@gmail.com>
Date: Fri, 22 Sep 2023 16:38:31 -0400
Subject: [PATCH 3/5] remove voyage status container from sidebar

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

diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index 4d2fe625..004cb0ee 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -161,14 +161,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>

From 4b6d7e54148ed3759e234654159e6fa81c6d459e Mon Sep 17 00:00:00 2001
From: Dan Ko <danko56666@gmail.com>
Date: Fri, 22 Sep 2023 16:39:17 -0400
Subject: [PATCH 4/5] fix linter errors

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

diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index 004cb0ee..52bdb07e 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -10,7 +10,6 @@ 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 = {
@@ -97,11 +96,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() {

From bd7e5896e3669f4d6def218696d2ee9d5f323dde Mon Sep 17 00:00:00 2001
From: Mark Linn <marktlinn@gmail.com>
Date: Sat, 23 Sep 2023 18:45:56 +0200
Subject: [PATCH 5/5] suggestions: JSX typescript deprecation error + MainPages
 as name type?

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

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 52bdb07e..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,
@@ -12,18 +13,6 @@ import PageButton from "./PageButton";
 import VoyagePageButton from "./VoyagePageButton";
 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",
@@ -40,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,
@@ -109,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);