Merge pull request #26 from chingu-x/fix-sidebar

Better solution to handle sidebar
chingu-x · Sep 23, 2023 · 7487145 · 7487145
2 parents ec3810d + f5b7d10
commit 7487145
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 58 deletions.
diff --git 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
@@ -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
@@ -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/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
@@ -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);
@@ -125,9 +120,9 @@ export default function Sidebar() {
 
   return (
     <aside
-      className={`sticky top-16 h-[calc(100vh-theme(spacing.16))] ${
-        isOpenSidebar ? "w-[18.4375rem]" : "w-[5.8125rem]"
-      } text-center bg-base-200 flex flex-col justify-between`}
+      className={`overflow-y-auto ${
+        isOpenSidebar ? "w-[18.438rem]" : "w-[5.813rem]"
+      } text-center bg-base-200 flex flex-col justify-between border-r border-neutral-content`}
     >
       <ul
         className={`flex flex-col ${
@@ -161,15 +156,7 @@ 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 h-20">
+      <div className="flex flex-col items-end justify-start border-t border-neutral-content">
         <ExpandButton isOpen={isOpenSidebar} onClick={setIsOpenSidebar} />
       </div>
     </aside>