chore: fixing nav on storefront

calblueprint · Oct 24, 2023 · 32da526 · 32da526
1 parent b24fce7
commit 32da526
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 9 deletions.
diff --git a/src/app/storefront/page.tsx b/src/app/storefront/page.tsx
@@ -4,7 +4,7 @@ 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,
@@ -67,13 +67,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

diff --git a/src/app/storefront/styles.ts b/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;

diff --git a/src/styles/components.tsx b/src/styles/components.tsx
@@ -16,7 +16,7 @@ export const NavBarComp = styled.nav`
   justify-content: space-between;
   padding-left: 30px;
   padding-right: 30px;
-  height: 150px;
+  height: 200px;
   padding-top: 20px;
 
   width: 100%;