temp feat: added discover to menu bar

calblueprint · Dec 8, 2024 · 17c9486 · 17c9486
1 parent 711523d
commit 17c9486
Show file tree

Hide file tree

Showing 18 changed files with 107 additions and 69 deletions.
diff --git 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 → app/availability/calendar/page.tsx b/app/availability/page.tsx → app/availability/calendar/page.tsx
diff --git a/app/availability/styles.ts → app/availability/calendar/styles.ts b/app/availability/styles.ts → 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/...oarding/volunteer-role-selection/page.tsx → app/onboarding/role-selection/page.tsx b/...oarding/volunteer-role-selection/page.tsx → app/onboarding/role-selection/page.tsx
@@ -60,15 +60,15 @@ export default function Onboarding() {
         <RoleContainer>
           <RoleSelector
             isSelected={role.isPerformer}
-            name="isPerformer"
+            name="performer"
             title="Performer"
             description="The star of the show"
             iconSrc={Star}
             onChange={handleChange}
           />
           <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/...arding/volunteer-role-selection/styles.ts → app/onboarding/role-selection/styles.ts b/...arding/volunteer-role-selection/styles.ts → app/onboarding/role-selection/styles.ts
diff --git 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
@@ -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
@@ -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