Added conditional routing to nav bar

src/app/profileScreenPickUp/page.tsx

@@ -0,0 +1,120 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { toast } from 'react-toastify';
+import { useEffect, useState } from 'react';
+import { Heading2, Heading4, Body2, Body3} from '@/styles/fonts';
+import supabase from '@/api/supabase/createClient';
+import { fetchUser } from '@/api/supabase/queries/user_queries';
+import BackButton from '../../components/BackButton/BackButton';
+import {
+  LogOutButton,
+  GlobalStyle,
+  PopUp,
+  NavBarMovedUP,
+  FooterMoved,
+  AccountDetails,
+  HeadingBack,
+  HeadingSpacing,
+  TextSpacing,
+  OrderHistory,
+  FavoritesContainer,
+} from './styles';
+import { signOut } from '../../api/supabase/auth/auth';
+import 'react-toastify/dist/ReactToastify.css';
+import { OrderContainer } from '../delivery/styles';
+
+export default function Profile() {
+  const [deliveryEnabled, setDeliveryEnabled] = useState<boolean>(false);
+  useEffect(() => {
+    (async () => {
+      const { data: sessionData, error } = await supabase.auth.getSession();
+
+      if (error) throw error;
+      if (
+        !sessionData ||
+        !sessionData.session ||
+        !sessionData.session.user ||
+        !sessionData.session.user.id
+      )
+        return;
+
+      const data = await fetchUser();
+      setDeliveryEnabled(data.delivery_allowed);
+    })();
+  }, []);
+
+  const router = useRouter();
+  const showToastMessage = () => {
+    signOut();
+    toast("You've been Logged Out! Redirecting...", {
+      position: toast.POSITION.TOP_CENTER,
+    });
+    setTimeout(() => {
+      router.push('/login');
+    }, 3000);
+  };
+  return (
+    <main>
+      <NavBarMovedUP />
+      <HeadingBack>
+      <BackButton destination= "./storefront" /> 
+      <Heading2> 
+        My Profile
+      </Heading2>
+      </HeadingBack>
+      <GlobalStyle />
+      <AccountDetails>
+        <Heading4> 
+          Account Details
+        </Heading4>
+        <HeadingSpacing>
+        <Body2> 
+          Email
+        </Body2>
+        </HeadingSpacing>
+        <TextSpacing>
+        <Body3> 
+          [email protected] {/* replace with correct user info after */}
+        </Body3>
+        </TextSpacing>
+        <HeadingSpacing>
+        <Body2> 
+          Name
+        </Body2>
+        </HeadingSpacing>
+        <TextSpacing>
+        <Body3> 
+          Ethan Auyeung {/* replace with correct user info after */}
+        </Body3>
+        </TextSpacing>
+        <HeadingSpacing>
+        <Body2> 
+          Phone Number
+        </Body2>
+        </HeadingSpacing>
+        <TextSpacing>
+        <Body3> 
+          +1 510-123-4567 {/* replace with correct user info after */}
+        </Body3>
+        </TextSpacing>
+        <LogOutButton onClick={() => showToastMessage()}>Log Out!</LogOutButton>
+      </AccountDetails>
+      <OrderHistory>
+      <Heading4> 
+        Order History
+      </Heading4>
+      </OrderHistory>
+      <FavoritesContainer>
+      <Heading4> 
+        Favorites
+      </Heading4>
+      </FavoritesContainer>
+      {/* <PopUp closeButton={false} autoClose={3000} hideProgressBar limit={1} />
+      <LogOutButton onClick={() => router.push('/favorites')}>
+        Favorites
+      </LogOutButton> */}
+      <FooterMoved />
+    </main>
+  );
+}

src/app/profileScreenPickUp/styles.ts

@@ -0,0 +1,89 @@
+import styled, { createGlobalStyle } from 'styled-components';
+
+import { ToastContainer } from 'react-toastify';
+
+import NavBar from '../../components/NavBarFolder/NavBar';
+
+import Footer from '../../components/FooterFolder/Footer';
+
+export const GlobalStyle = createGlobalStyle`
+  body {
+    background:white;
+    color: black;
+    overflow: visible;
+    
+  }
+`;
+
+export const TextSpacing = styled.div`
+  margin-top: 29px;
+
+`;
+export const HeadingSpacing = styled.div`
+  margin-top: 33px;
+
+`;
+
+export const HeadingBack = styled.div`
+  margin-left: 171px;
+  margin-top: 41px;
+
+`;
+
+export const AccountDetails = styled.div`
+  margin-left: 189px;
+  margin-top: 73px;
+  box-sizing: border-box;
+  border: 2px solid black;
+  width: 543px;
+  height: 290px;
+`;
+
+export const OrderHistory = styled.div`
+  margin-left: 800px;
+  margin-top: -291px;
+  margin-bottom: 47px;
+  box-sizing: border-box;
+  border: 2px solid black; 
+  width: 405px;
+  height: 387px;
+`;
+
+export const FavoritesContainer = styled.div`
+  margin-left: 800px;
+  box-sizing: border-box;
+  border: 2px solid black;
+  width: 543.4px;
+  height: 343px;
+`;
+
+export const LogOutButton = styled.button`
+  background: #00507f;
+  color: #fff;
+  text-align: center;
+  font-family: Inter;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  border: transparent;
+  border-radius: 5px;
+  width: 300px;
+  height: 50px;
+  z-index: 1000;
+  margin-top: 47px;
+`;
+/* transform: translateY(200px); */
+
+export const PopUp = styled(ToastContainer)`
+  transform: translate(-150px, 250px);
+  position: fixed;
+`;
+
+export const FooterMoved = styled(Footer)`
+  transform: translateY(400px);
+`;
+
+export const NavBarMovedUP = styled(NavBar)`
+  position: relative;
+`;

src/components/NavBarFolder/NavBar.tsx

@@ -1,6 +1,10 @@
+import supabase from '@/api/supabase/createClient';
+import { fetchUser } from '@/api/supabase/queries/user_queries';
 import Image from 'next/image';
 import Link from 'next/link';
 import React, { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+
 
 import { totalNumberOfItemsInCart } from '../../api/supabase/queries/cart_queries';
 
@@ -10,11 +14,32 @@ import {
   CartTotalCircle,
   UserProfileIcon,
   ShoppingCartIcon,
+  ProfileButton,
+  ProfileFont,
 } from './styles';
+import Profile from '@/app/profileScreenDelivery/page';
 
 export default function NavBar({ ...rest }) {
   const [data, setData] = useState(0);
   const [isZero, setIsZero] = useState(true);
+  const [deliveryEnabled, setDeliveryEnabled] = useState<boolean>(false);
+  useEffect(() => {
+    (async () => {
+      const { data: sessionData, error } = await supabase.auth.getSession();
+
+      if (error) throw error;
+      if (
+        !sessionData ||
+        !sessionData.session ||
+        !sessionData.session.user ||
+        !sessionData.session.user.id
+      )
+        return;
+
+      const data = await fetchUser();
+      setDeliveryEnabled(data.delivery_allowed);
+    })();
+  }, []);
 
   useEffect(() => {
     const fetchData = async () => {
@@ -32,6 +57,15 @@ export default function NavBar({ ...rest }) {
     changeData();
   }, [data]);
 
+  const router = useRouter();
+  const checkDelivery = () => {
+    if (deliveryEnabled) {
+      router.push('/profileScreenDelivery');
+    } else {
+      router.push('/profileScreenPickUp');
+    }
+  };
+
   return (
     <NavBarComp {...rest}>
       <Link href="../storefront">
@@ -44,14 +78,16 @@ export default function NavBar({ ...rest }) {
       </Link>
 
       <ButtonsDiv>
-        <Link href="../profileScreen">
+        <ProfileButton onClick = {checkDelivery}>
           <UserProfileIcon />
-          <p>User</p>
-        </Link>
-        <Link href="../cart">
+          <ProfileFont>User</ProfileFont> 
+        </ProfileButton>
+        <Link href = "../cart">
+        <ProfileButton>
           <ShoppingCartIcon />
-          <p>Cart</p>
+          <ProfileFont>Cart</ProfileFont>
           <CartTotalCircle $isZero={isZero}>{data}</CartTotalCircle>
+        </ProfileButton>
         </Link>
       </ButtonsDiv>
     </NavBarComp>

src/components/NavBarFolder/styles.ts

@@ -61,3 +61,16 @@ export const Addie = styled.p`
   margin-top: 30px;
   margin-bottom: 30px;
 `;
+
+export const ProfileButton = styled.button`
+  width: 40px;
+  height: 40px;
+  background-color: transparent;
+  border: none;
+`
+export const ProfileFont = styled.div`
+  margin-left: 5px;
+  font-size: 18px;
+  font-style: normal;
+
+`