Merge branch 'main' of github.com:calblueprint/shanti-project into ke…

…vincai/cart_functional

src/app/checkout/page.tsx

@@ -1,6 +1,11 @@
+'use client';
+
+import NavBar from '../../components/NavBar';
+
 export default function Checkout() {
   return (
     <main>
+      <NavBar />
       <div>Checkout</div>
     </main>
   );

src/app/profileScreen/page.tsx

@@ -4,9 +4,12 @@ import { LogOutButton, GlobalStyle } from './style';
 
 import { signOut } from '../../api/supabase/auth/auth';
 
+import NavBar from '../../components/NavBar';
+
 export default function Profile() {
   return (
     <main>
+      <NavBar />
       <GlobalStyle />
       <LogOutButton onClick={() => signOut()}>Sign Out</LogOutButton>
     </main>

src/app/storefront/page.tsx

@@ -1,15 +1,12 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
-import Link from 'next/link';
 import Storefront from './storefrontItems';
 import ProductButtons from './productButtons';
-
+import NavBar from '../../components/NavBar';
 import {
   GlobalStyle,
   ButtonsContainer,
-  NavButton,
-  Img,
   StickyHeader,
   ShopAllText,
 } from './styles';
@@ -67,13 +64,7 @@ export default function App() {
     <main>
       <GlobalStyle />
       <StickyHeader>
-        <Img />
-        <NavButton>
-          <Link href="/checkout">Cart</Link>
-        </NavButton>
-        <NavButton>
-          <Link href="/profileScreen">Profile</Link>
-        </NavButton>
+        <NavBar />
         <ButtonsContainer>
           {buttons.map(type => (
             <ProductButtons

src/app/storefront/styles.ts

@@ -68,6 +68,9 @@ export const ButtonsContainer = styled.div`
   flex-direction: row;
   justify-content: center;
   align-items: center;
+  z-index: 5;
+
+  transform: translate(0px, -180px);
 `;
 export const NavButton = styled.button`
   margin-top: 30px;

src/components/NavBar.tsx

@@ -0,0 +1,36 @@
+import Image from 'next/image';
+
+import Link from 'next/link';
+import React from 'react';
+
+import { NavBarComp, ButtonsDiv } from '../styles/components';
+
+export default function NavBar() {
+  return (
+    <NavBarComp>
+      <Link href="../storefront">
+        <Image
+          src="/images/ShantiLogo.png"
+          alt="logo pic"
+          width={125}
+          height={70}
+        />
+      </Link>
+
+      <ButtonsDiv>
+        <Link href="../profileScreen">
+          <Image
+            src="/images/Profile.png"
+            alt="logo pic"
+            width={40}
+            height={40}
+          />
+        </Link>
+
+        <Link href="../checkout">
+          <Image src="/images/Cart.png" alt="logo pic" width={30} height={40} />
+        </Link>
+      </ButtonsDiv>
+    </NavBarComp>
+  );
+}

src/styles/components.tsx

@@ -1,3 +1,33 @@
+import styled, { createGlobalStyle } from 'styled-components';
+
 const COMPONENTS = {};
 
 export default COMPONENTS;
+
+export const GlobalStyle = createGlobalStyle`
+  body {
+    background:white;
+  }
+`;
+
+export const NavBarComp = styled.nav`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding-left: 30px;
+  padding-right: 30px;
+  height: 200px;
+  padding-top: 20px;
+
+  width: 100%;
+  background: var(--Light-Periwinkle, #f4f7ff);
+  box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.1);
+`;
+
+export const ButtonsDiv = styled.div`
+  width: 200px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  padding-top: 15px;
+`;