From 17c9486f98ead31b662d0fab7d2575d782783320 Mon Sep 17 00:00:00 2001
From: Celine Choi <celinejwchoiii@gmail.com>
Date: Sat, 7 Dec 2024 16:16:43 -0800
Subject: [PATCH] temp feat: added discover to menu bar

---
 app/(auth)/signup/page.tsx                    |  2 +-
 app/availability/{ => calendar}/page.tsx      |  0
 app/availability/{ => calendar}/styles.ts     |  2 +-
 app/availability/general/styles.ts            | 13 +++-
 app/discover/page.tsx                         | 63 ++++++++-----------
 app/discover/styles.ts                        | 19 +++++-
 app/events/page.tsx                           |  7 ++-
 app/events/styles.ts                          | 25 +++++---
 app/onboarding/additional-info/page.tsx       |  2 +-
 app/onboarding/basic-information/page.tsx     |  3 +-
 app/onboarding/performance/page.tsx           |  2 +-
 app/onboarding/review/page.tsx                |  2 +-
 .../page.tsx                                  |  5 +-
 .../styles.ts                                 |  0
 app/onboarding/show-preference/page.tsx       |  2 +-
 app/onboarding/styles.ts                      |  9 ++-
 components/MenuBar/MenuBar.tsx                | 16 ++++-
 public/images/discover.svg                    |  4 ++
 18 files changed, 107 insertions(+), 69 deletions(-)
 rename app/availability/{ => calendar}/page.tsx (100%)
 rename app/availability/{ => calendar}/styles.ts (97%)
 rename app/onboarding/{volunteer-role-selection => role-selection}/page.tsx (96%)
 rename app/onboarding/{volunteer-role-selection => role-selection}/styles.ts (100%)
 create mode 100644 public/images/discover.svg

diff --git a/app/(auth)/signup/page.tsx b/app/(auth)/signup/page.tsx
index 9011719..08a6f01 100644
--- a/app/(auth)/signup/page.tsx
+++ b/app/(auth)/signup/page.tsx
@@ -44,7 +44,7 @@ export default function SignUp() {
     setIsError(!success);
 
     if (success) {
-      router.push('/onboarding/volunteer-role-selection');
+      router.push('/onboarding/role-selection');
     }
   };
 
diff --git a/app/availability/page.tsx b/app/availability/calendar/page.tsx
similarity index 100%
rename from app/availability/page.tsx
rename to app/availability/calendar/page.tsx
diff --git a/app/availability/styles.ts b/app/availability/calendar/styles.ts
similarity index 97%
rename from app/availability/styles.ts
rename to app/availability/calendar/styles.ts
index 4a360c9..86386f6 100644
--- a/app/availability/styles.ts
+++ b/app/availability/calendar/styles.ts
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import COLORS from '../../styles/colors';
+import COLORS from '@/styles/colors';
 
 export const Container = styled.div`
   width: 500px;
diff --git a/app/availability/general/styles.ts b/app/availability/general/styles.ts
index e219b00..687bcdd 100644
--- a/app/availability/general/styles.ts
+++ b/app/availability/general/styles.ts
@@ -10,15 +10,22 @@ export const Page = styled.main<{ $menuExpanded: boolean }>`
   min-height: 100vh;
   justify-content: center;
   overflow: hidden;
-  margin-left: ${({ $menuExpanded }) =>
-    $menuExpanded ? '10%' : '0'}; /* Fixed margin for the expanded menu */
-  transition: margin-left 0.3s ease; /* Smooth transition */
+
+  @media (min-width: 1024px) {
+    margin-left: ${({ $menuExpanded }) =>
+      $menuExpanded ? '10%' : '0'}; /* Fixed margin for the expanded menu */
+    transition: margin-left 0.3s ease; /* Smooth transition */
+  }
 `;
 
 export const AllAvailabilitiesHolder = styled.main`
   display: flex;
   width: 28.75%;
   flex-direction: column;
+
+  @media (max-width: 900px) {
+    width: 80%;
+  }
 `;
 
 export const TitleContainer = styled.main`
diff --git a/app/discover/page.tsx b/app/discover/page.tsx
index a5a37de..a7d5592 100644
--- a/app/discover/page.tsx
+++ b/app/discover/page.tsx
@@ -7,32 +7,17 @@ import MenuBar from '@/components/MenuBar/MenuBar';
 import { H6, SMALL } from '@/styles/text';
 import { Event } from '@/types/schema';
 import {
-  Container,
   Discover,
+  DiscoverHolder,
   EventListingDiv,
+  Page,
   SearchBar,
   TitleBar,
 } from './styles';
 
-// function MenuBar() {
-//   return (
-//     <svg
-//       width="24"
-//       height="24"
-//       viewBox="0 0 24 24"
-//       fill="none"
-//       xmlns="http://www.w3.org/2000/svg"
-//     >
-//       <path
-//         d="M3 18H21V16H3V18ZM3 13H21V11H3V13ZM3 6V8H21V6H3Z"
-//         fill="#621D1E"
-//       />
-//     </svg>
-//   );
-// }
-
 export default function ActiveEventsPage() {
   const [events, setEvents] = useState<Event[]>([]);
+  const [menuExpanded, setMenuExpanded] = useState(false); // Track the expanded state of the menu
 
   useEffect(() => {
     const getActiveEvents = async () => {
@@ -44,26 +29,28 @@ export default function ActiveEventsPage() {
 
   return (
     <div>
-      <MenuBar />
-      <Container>
-        <Discover $fontWeight="500"> Discover </Discover>
-        <SearchBar>
-          <SMALL> Search... </SMALL>
-        </SearchBar>
-        <TitleBar>
-          <H6 $fontWeight="500"> Near You </H6>
-          <SMALL $color="purple"> show all </SMALL>
-        </TitleBar>
-        <EventListingDiv>
-          {events.map(event => (
-            <EventListingCard
-              key={event.event_id}
-              id={event.event_id}
-              performance_type={event.performance_type}
-            />
-          ))}
-        </EventListingDiv>
-      </Container>
+      <MenuBar setMenuExpanded={setMenuExpanded} />
+      <Page $menuExpanded={menuExpanded}>
+        <DiscoverHolder>
+          <Discover $fontWeight="500"> Discover </Discover>
+          <SearchBar>
+            <SMALL> Search... </SMALL>
+          </SearchBar>
+          <TitleBar>
+            <H6 $fontWeight="500"> Near You </H6>
+            <SMALL $color="purple"> show all </SMALL>
+          </TitleBar>
+          <EventListingDiv>
+            {events.map(event => (
+              <EventListingCard
+                key={event.event_id}
+                id={event.event_id}
+                performance_type={event.performance_type}
+              />
+            ))}
+          </EventListingDiv>
+        </DiscoverHolder>
+      </Page>
     </div>
   );
 }
diff --git a/app/discover/styles.ts b/app/discover/styles.ts
index 632c468..5e6be37 100644
--- a/app/discover/styles.ts
+++ b/app/discover/styles.ts
@@ -30,10 +30,23 @@ export const TitleBar = styled.div`
   margin-bottom: 0.25rem;
 `;
 
-export const Container = styled.div`
-  flex-direction: column;
+export const Page = styled.main<{ $menuExpanded: boolean }>`
+  display: flex;
+  min-width: 90%;
+  min-height: 100vh;
+  justify-content: center;
   overflow: hidden;
-  padding: 3rem;
+  margin-left: ${({ $menuExpanded }) =>
+    $menuExpanded ? '15%' : '0px'}; /* Adjust margin based on menu expansion */
+  transition: margin-left 0.3s ease; /* Smooth transition for menu toggle */
+`;
+
+export const DiscoverHolder = styled.main`
+  display: flex;
+  flex-direction: column;
+  width: 80%;
+  padding: 2rem;
+  box-sizing: border-box;
 `;
 
 export const Discover = styled(H3)`
diff --git a/app/events/page.tsx b/app/events/page.tsx
index ce5c6f9..913de8f 100644
--- a/app/events/page.tsx
+++ b/app/events/page.tsx
@@ -14,6 +14,7 @@ type GroupedEvents = {
 
 export default function EventPage() {
   const [data, setData] = useState<Event[]>([]);
+  const [menuExpanded, setMenuExpanded] = useState(false); // Track the expanded state of the menu
 
   useEffect(() => {
     fetchAcceptedEventsByVolunteer('11d219d9-bf05-4a06-a23e-89fd566c7a04').then(
@@ -61,11 +62,11 @@ export default function EventPage() {
 
   return (
     <div>
-      <MenuBar />
-      <styles.Page>
+      <MenuBar setMenuExpanded={setMenuExpanded} />
+      <styles.Page $menuExpanded={menuExpanded}>
         <styles.AllEventsHolder>
           <styles.Title $fontWeight="500" $color="#000" $align="left">
-            Upcoming Events
+            My Events
           </styles.Title>
           {sortedEntries.map(([month, events]) => (
             <div key={month}>
diff --git a/app/events/styles.ts b/app/events/styles.ts
index 914c0d3..8a71e3d 100644
--- a/app/events/styles.ts
+++ b/app/events/styles.ts
@@ -10,24 +10,33 @@ export const MenuImage = styled(NextImage)`
   margin: 1rem;
 `;
 
-export const Page = styled.main`
-  flex-direction: column;
+export const Page = styled.main<{ $menuExpanded: boolean }>`
+  display: flex;
   min-width: 100%;
-  min-height: 100svh;
+  min-height: 100vh;
+  justify-content: center;
   overflow: hidden;
-  padding: 2rem;
+
+  @media (min-width: 1024px) {
+    margin-left: ${({ $menuExpanded }) =>
+      $menuExpanded ? '10%' : '0'}; /* Fixed margin for the expanded menu */
+    transition: margin-left 0.3s ease; /* Smooth transition */
+  }
 `;
 
 export const AllEventsHolder = styled.main`
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
   display: flex;
+  width: 28.75%;
   flex-direction: column;
-  gap: 1.5rem;
+
+  @media (max-width: 900px) {
+    width: 80%;
+  }
 `;
 
 export const Title = styled(H3)`
-  margin-top: 2rem;
+  margin-top: 4rem;
+  margin-bottom: 2rem;
   font-style: normal;
   line-height: normal;
 `;
diff --git a/app/onboarding/additional-info/page.tsx b/app/onboarding/additional-info/page.tsx
index a6250d6..dcdb1ab 100644
--- a/app/onboarding/additional-info/page.tsx
+++ b/app/onboarding/additional-info/page.tsx
@@ -83,7 +83,7 @@ export default function Onboarding() {
           <SkipButton onClick={handleSubmit}>
             <SkipText>skip</SkipText>
           </SkipButton>
-          <Button onClick={handleSubmit}>
+          <Button onClick={handleSubmit} position="fixed">
             <ContinueText>Continue</ContinueText>
           </Button>
         </ButtonContainer>
diff --git a/app/onboarding/basic-information/page.tsx b/app/onboarding/basic-information/page.tsx
index e73ef47..67eab65 100644
--- a/app/onboarding/basic-information/page.tsx
+++ b/app/onboarding/basic-information/page.tsx
@@ -52,7 +52,7 @@ export default function Onboarding() {
   };
 
   const handleBack = () => {
-    router.push('/onboarding/volunteer-role-selection');
+    router.push('/onboarding/role-selection');
   };
 
   return (
@@ -114,6 +114,7 @@ export default function Onboarding() {
 
         <ButtonContainer>
           <Button
+            position="fixed"
             onClick={handleSubmit}
             disabled={
               !generalInfo.firstName ||
diff --git a/app/onboarding/performance/page.tsx b/app/onboarding/performance/page.tsx
index 3b0a256..2c95ce1 100644
--- a/app/onboarding/performance/page.tsx
+++ b/app/onboarding/performance/page.tsx
@@ -134,7 +134,7 @@ export default function Onboarding() {
           <SkipButton onClick={handleSubmit}>
             <SkipText>skip</SkipText>
           </SkipButton>
-          <Button onClick={handleSubmit}>
+          <Button onClick={handleSubmit} position="fixed">
             <ContinueText>Continue</ContinueText>
           </Button>
         </ButtonContainer>
diff --git a/app/onboarding/review/page.tsx b/app/onboarding/review/page.tsx
index 602ac7c..8ebc357 100644
--- a/app/onboarding/review/page.tsx
+++ b/app/onboarding/review/page.tsx
@@ -88,7 +88,7 @@ export default function Review() {
         </ReviewContainer>
 
         <StyledLink href="/onboarding/finalize">
-          <Button onClick={submitData}>
+          <Button onClick={submitData} position="static">
             <SMALL $fontWeight="400" $color="white">
               Everything looks good!
             </SMALL>
diff --git a/app/onboarding/volunteer-role-selection/page.tsx b/app/onboarding/role-selection/page.tsx
similarity index 96%
rename from app/onboarding/volunteer-role-selection/page.tsx
rename to app/onboarding/role-selection/page.tsx
index 005e897..0154f3d 100644
--- a/app/onboarding/volunteer-role-selection/page.tsx
+++ b/app/onboarding/role-selection/page.tsx
@@ -60,7 +60,7 @@ export default function Onboarding() {
         <RoleContainer>
           <RoleSelector
             isSelected={role.isPerformer}
-            name="isPerformer"
+            name="performer"
             title="Performer"
             description="The star of the show"
             iconSrc={Star}
@@ -68,7 +68,7 @@ export default function Onboarding() {
           />
           <RoleSelector
             isSelected={role.isHost}
-            name="isHost"
+            name="host"
             title="Host"
             description="The organizer of the event"
             iconSrc={Help}
@@ -78,6 +78,7 @@ export default function Onboarding() {
         </RoleContainer>
         <ButtonContainer>
           <Button
+            position="fixed"
             onClick={handleContinue}
             disabled={!role.isHost && !role.isPerformer}
           >
diff --git a/app/onboarding/volunteer-role-selection/styles.ts b/app/onboarding/role-selection/styles.ts
similarity index 100%
rename from app/onboarding/volunteer-role-selection/styles.ts
rename to app/onboarding/role-selection/styles.ts
diff --git a/app/onboarding/show-preference/page.tsx b/app/onboarding/show-preference/page.tsx
index 79bc3c2..411ea67 100644
--- a/app/onboarding/show-preference/page.tsx
+++ b/app/onboarding/show-preference/page.tsx
@@ -120,7 +120,7 @@ export default function Onboarding() {
           <SkipButton onClick={handleSubmit}>
             <SkipText>skip</SkipText>
           </SkipButton>
-          <Button onClick={handleSubmit}>
+          <Button onClick={handleSubmit} position="fixed">
             <ContinueText>Continue</ContinueText>
           </Button>
         </ButtonContainer>
diff --git a/app/onboarding/styles.ts b/app/onboarding/styles.ts
index 3cbf76a..98d97e9 100644
--- a/app/onboarding/styles.ts
+++ b/app/onboarding/styles.ts
@@ -155,10 +155,13 @@ export const ButtonContainer = styled.div`
   width: 100%;
 `;
 
-export const Button = styled.button<{ disabled?: boolean }>`
-  position: fixed;
+export const Button = styled.button<{
+  disabled?: boolean;
+  position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
+}>`
+  position: ${({ position = 'fixed' }) => position};
   bottom: 70px;
-  width: 30%;
+  width: ${({ position }) => (position === 'fixed' ? '30%' : '100%')};
   height: 2.75rem;
   background-color: ${({ disabled }) =>
     disabled ? COLORS.pomegranate10 : COLORS.pomegranate12};
diff --git a/components/MenuBar/MenuBar.tsx b/components/MenuBar/MenuBar.tsx
index aad6b6e..1cd98f5 100644
--- a/components/MenuBar/MenuBar.tsx
+++ b/components/MenuBar/MenuBar.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import Availability from '@/public/images/availabilities.svg';
+import Discover from '@/public/images/discover.svg';
 import Settings from '@/public/images/settings.svg';
 import Events from '@/public/images/upcoming-events.svg';
 import {
@@ -52,7 +53,18 @@ const MenuBar: React.FC<{ setMenuExpanded?: (expanded: boolean) => void }> = ({
         <>
           <MenuItem
             $expanded={expanded}
-            onClick={() => handleClick('availabilities', 'discover')}
+            onClick={() => handleClick('discover', '/discover')}
+          >
+            <Icon src={Discover} alt="Discover icon" />
+            <MenuLabel $expanded={expanded} $active={activeItem === 'discover'}>
+              Discover
+            </MenuLabel>
+          </MenuItem>
+          <MenuItem
+            $expanded={expanded}
+            onClick={() =>
+              handleClick('availabilities', '/availability/general')
+            }
           >
             <Icon src={Availability} alt="Availabilities icon" />
             <MenuLabel
@@ -68,7 +80,7 @@ const MenuBar: React.FC<{ setMenuExpanded?: (expanded: boolean) => void }> = ({
           >
             <Icon src={Events} alt="Events icon" />
             <MenuLabel $expanded={expanded} $active={activeItem === 'events'}>
-              Upcoming Events
+              My Events
             </MenuLabel>
           </MenuItem>
           <MenuItem
diff --git a/public/images/discover.svg b/public/images/discover.svg
new file mode 100644
index 0000000..6641321
--- /dev/null
+++ b/public/images/discover.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 11.4375C10.5178 11.4375 10.9375 11.0178 10.9375 10.5C10.9375 9.98223 10.5178 9.5625 10 9.5625C9.48223 9.5625 9.0625 9.98223 9.0625 10.5C9.0625 11.0178 9.48223 11.4375 10 11.4375Z" fill="#DDDDDD"/>
+<path d="M10 2.375C5.51992 2.375 1.875 6.01992 1.875 10.5C1.875 14.9801 5.51992 18.625 10 18.625C14.4801 18.625 18.125 14.9801 18.125 10.5C18.125 6.01992 14.4801 2.375 10 2.375ZM14.1043 6.80195L12.273 11.3801C12.1473 11.6945 11.959 11.9801 11.7195 12.2195C11.4801 12.459 11.1945 12.6473 10.8801 12.773L6.30195 14.6043C6.24516 14.627 6.18295 14.6326 6.12303 14.6203C6.0631 14.608 6.00811 14.5784 5.96485 14.5351C5.9216 14.4919 5.89199 14.4369 5.8797 14.377C5.86741 14.317 5.87297 14.2548 5.8957 14.198L7.72695 9.61992C7.85269 9.3055 8.041 9.0199 8.28045 8.78045C8.5199 8.541 8.8055 8.35269 9.11992 8.22695L13.698 6.3957C13.7548 6.37297 13.817 6.36741 13.877 6.3797C13.9369 6.39199 13.9919 6.4216 14.0351 6.46485C14.0784 6.50811 14.108 6.5631 14.1203 6.62303C14.1326 6.68295 14.127 6.74516 14.1043 6.80195Z" fill="#DDDDDD"/>
+</svg>