fix: topbar fixed

EKOKE-DAO · Aug 30, 2024 · 84a986b · 84a986b
1 parent 38ede2a
commit 84a986b
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 22 deletions.
diff --git a/src/js/components/AppLayout.tsx b/src/js/components/AppLayout.tsx
@@ -10,7 +10,7 @@ import { BrowserRouter } from 'react-router-dom';
 const AppLayout = () => (
   <Page.BlankPage>
     <Header />
-    <Container.PageContent className="w-page min-h-[80vh] pb-16">
+    <Container.PageContent className="bg-page w-page min-h-[80vh] pb-16 mt-[80px] pt-[20px] sm:pt-[80px]">
       <BrowserRouter>
         <Routes />
       </BrowserRouter>

diff --git a/src/js/components/Header/Desktop.tsx b/src/js/components/Header/Desktop.tsx
@@ -8,24 +8,26 @@ import { Route } from '../../utils/routes';
 import TopbarLink from './TopbarLink';
 
 const Desktop = () => (
-  <Container.FlexRow className="block sm:hidden justify-center items-center py-4 px-4">
-    <Container.FlexRow className="items-center gap-8">
-      <TopbarLink name={'Home'} href={Route.HOME} />
-      <TopbarLink name={'Marketplace'} href={Route.MARKETPLACE} />
-      <TopbarLink name={'Buy Process'} href={Route.TIMELINE} />
-      <TopbarLink name={'User Stories'} href={Route.USER_STORIES} />
-      <Container.Container className="py-2">
-        <Link.Default
-          href={'https://ekoketoken.com'}
-          target="_blank"
-          className="text-lg"
-        >
-          EKOKE Token
-        </Link.Default>
-      </Container.Container>
-      <IcConnect />
+  <div className="fixed block sm:hidden left-0 top-0 h-[80px] w-full bg-page z-40 shadow-sm">
+    <Container.FlexRow className="justify-center items-center py-4 px-4">
+      <Container.FlexRow className="items-center gap-8">
+        <TopbarLink name={'Home'} href={Route.HOME} />
+        <TopbarLink name={'Marketplace'} href={Route.MARKETPLACE} />
+        <TopbarLink name={'Buy Process'} href={Route.TIMELINE} />
+        <TopbarLink name={'User Stories'} href={Route.USER_STORIES} />
+        <Container.Container className="py-2">
+          <Link.Default
+            href={'https://ekoketoken.com'}
+            target="_blank"
+            className="text-lg"
+          >
+            EKOKE Token
+          </Link.Default>
+        </Container.Container>
+        <IcConnect />
+      </Container.FlexRow>
     </Container.FlexRow>
-  </Container.FlexRow>
+  </div>
 );
 
 export default Desktop;
diff --git a/src/js/components/Header/Mobile.tsx b/src/js/components/Header/Mobile.tsx
@@ -2,15 +2,23 @@ import * as React from 'react';
 
 import Container from '../reusable/Container';
 import IcConnect from '../IcConnect';
+import TopbarLink from './TopbarLink';
+import { Route } from '../../utils/routes';
 
 const Mobile = () => (
-  <div className="h-[80px] items-center hidden sm:flex left-0 gap-4 justify-start py-2 px-4 top-0 w-full z-40">
-    <Container.FlexRow className="items-center justify-between w-full">
+  <div className="bg-page items-center fixed hidden sm:block left-0 gap-4 justify-start py-2 px-4 top-0 w-full z-40 shadow-sm">
+    <Container.FlexRow className="items-center justify-between w-full h-[80px]">
       <Container.Container className="border-brandRed border-b-4 py-2">
         <span className="font-medium text-brand">EKOKE Marketplace</span>
       </Container.Container>
       <IcConnect />
     </Container.FlexRow>
+    <Container.FlexRow className="h-[60px] w-full items-center justify-center gap-4">
+      <TopbarLink name={'Home'} href={Route.HOME} />
+      <TopbarLink name={'Marketplace'} href={Route.MARKETPLACE} />
+      <TopbarLink name={'Buy Process'} href={Route.TIMELINE} />
+      <TopbarLink name={'User Stories'} href={Route.USER_STORIES} />
+    </Container.FlexRow>
   </div>
 );
 

diff --git a/src/js/components/Header/TopbarLink.tsx b/src/js/components/Header/TopbarLink.tsx
@@ -17,7 +17,7 @@ const TopbarLink = ({ href, name }: Props) => {
   if (path === Route.url(href)) {
     return (
       <Container.Container className="border-brandRed border-b-4 py-2">
-        <Link.Default href={href} className="text-lg">
+        <Link.Default href={href} className="text-lg sm:text-xs">
           {name}
         </Link.Default>
       </Container.Container>
@@ -26,7 +26,7 @@ const TopbarLink = ({ href, name }: Props) => {
 
   return (
     <Container.Container className="py-2">
-      <Link.Default href={href} className="text-lg">
+      <Link.Default href={href} className="text-lg sm:text-xs">
         {name}
       </Link.Default>
     </Container.Container>