Merge remote-tracking branch 'origin' into feature/sidebar-shadow

src/app/directory/components/TeamTable.tsx

@@ -6,7 +6,7 @@ const currentUserId = "1";
 
 function TeamTable() {
   return (
-    <div className="overflow-x-auto">
+    <div className="w-full">
       <table
         className={`table px-6 pb-10 border-separate border-none bg-primary-content pt-7 ${styles["table"]}`}
       >

src/app/directory/page.tsx

@@ -1,7 +1,18 @@
 import { TeamTable } from ".";
+import { Banner } from "@/components";
 
 function DirectoryPage() {
-  return <TeamTable />;
+  return (
+    <>
+      <Banner
+        image="/img/directory_banner.png"
+        alt="directory_banner"
+        title="Directory"
+        description="Behold, your mighty band of teammates! If you want them to plan with precision and prowess, make sure your deets are up to date, or else prepare for some serious spreadsheet confusion!"
+      />
+      <TeamTable />;
+    </>
+  );
 }
 
 export default DirectoryPage;

src/app/ideation/components/CreateIdeationContainer.tsx

@@ -3,7 +3,7 @@ import { Button } from "@/components";
 
 function CreateIdeationContainer() {
   return (
-    <div className="card w-[1280px] h-[190px] bg-base-100 text-neutral-content flex flex-row items-center px-10">
+    <div className="card w-full h-[190px] bg-base-100 text-neutral-content flex flex-row items-center px-10">
       <VoteDescriptionCard />
       <section className="card-body gap-y-7 px-20">
         <h2 className="text-xl font-semibold text-neutral-focus">

src/app/ideation/components/IdeationContainer.tsx

@@ -10,7 +10,7 @@ function IdeationContainer({
   contributed_by,
 }: Ideation) {
   return (
-    <div className="card w-[1280px] h-[457px] bg-primary-content text-neutral-content flex flex-row items-start p-10 gap-x-20">
+    <div className="card w-full h-[457px] bg-primary-content text-neutral-content flex flex-row items-start p-10 gap-x-20">
       <VoteCard users={users} voted={voted} />
       <section className="card-body gap-y-7 p-0 w-[1000px] h-[377px] overflow-y-auto pr-5">
         <h2 className="text-xl font-semibold text-neutral-focus">{title}</h2>

src/app/ideation/page.tsx

@@ -3,29 +3,27 @@ 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!"
+    <>
+      <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>
+      ))}
+    </>
   );
 }
 

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 gap-y-9 p-10 w-full">
+                  {children}
+                </main>
+              </div>
             </StoreProvider>
           </div>
         </ThemeProvider>

src/app/tech-stack/components/TechStackContainer.tsx

@@ -1,4 +1,3 @@
-import styles from "./TechStackContainer.module.css";
 import { TechStackCard, techStack } from ".";
 
 export default function TechStackContainer() {
@@ -12,9 +11,7 @@ export default function TechStackContainer() {
     }
   }
   return (
-    <div
-      className={`card bg-primary-content p-10 ${styles["tech-container-width"]}`}
-    >
+    <div className="card bg-primary-content p-10 w-full">
       <ul className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-y-20 justify-items-stretch">
         {Object.keys(techStack).map((cardType, index) => (
           <li

src/app/tech-stack/page.tsx

@@ -1,5 +1,16 @@
 import { TechStackContainer } from ".";
+import { Banner } from "@/components";
 
 export default function TeckStackPage() {
-  return <TechStackContainer />;
+  return (
+    <>
+      <Banner
+        image="/img/tech_stack_banner.png"
+        alt="teck_stack_banner"
+        title="Tech Stack"
+        description="Alright, let's get down to business. We need to figure out which tech stack we're going to use to power this bad boy. Are you a JavaScript junkie, a Python pro, a Java genius, or a Ruby rockstar? Let's vote"
+      />
+      <TechStackContainer />;
+    </>
+  );
 }

src/components/Banner.tsx

@@ -9,8 +9,8 @@ interface BannerProps {
 
 function Banner({ image, alt, title, description }: BannerProps) {
   return (
-    <div className="card w-[1280px] h-[320px] bg-accent-content flex flex-row px-20">
-      <Image src={image} alt={alt} width={454} height={300} priority={false} />
+    <div className="card w-full max-h-[320px] bg-accent-content flex flex-row px-20 py-10 box-border">
+      <Image src={image} alt={alt} width={454} height={200} priority={false} />
       <div className="flex flex-col justify-center pl-24 gap-y-3.5">
         <h3 className="text-3xl font-bold text-black">{title}</h3>
         <p className="text-lg font-medium text-black">{description}</p>

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>

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(

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,
@@ -11,21 +12,8 @@ import {
 import { useTheme } from "next-themes";
 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",
@@ -42,6 +30,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,
@@ -98,11 +98,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() {
@@ -117,7 +112,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);
@@ -129,9 +124,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 ${
         isDark ? "sidebar-shadow-dark" : "sidebar-shadow-light"
       }`}
     >
@@ -167,15 +162,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>