style: fix top bar at the top and refine paddings to align top bar wi…

…th main content
the-answerbook-project · May 20, 2024 · 7f80bf6 · 7f80bf6
1 parent 356dc41
commit 7f80bf6
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 16 deletions.
diff --git a/src/ExamRoot.tsx b/src/ExamRoot.tsx
@@ -1,3 +1,4 @@
+import { Section } from '@radix-ui/themes'
 import React, { FC } from 'react'
 import { Outlet } from 'react-router-dom'
 
@@ -7,7 +8,9 @@ const ExamRoot: FC = () => {
   return (
     <>
       <NavBar questionCount={3} />
-      <Outlet />
+      <Section pt="9">
+        <Outlet />
+      </Section>
     </>
   )
 }

diff --git a/src/components/NavBar/index.tsx b/src/components/NavBar/index.tsx
@@ -1,4 +1,4 @@
-import { Section, TabNav } from '@radix-ui/themes'
+import { Container, Section, TabNav } from '@radix-ui/themes'
 import React, { FC } from 'react'
 import { useLocation } from 'react-router-dom'
 
@@ -10,21 +10,29 @@ const NavBar: FC<NavBarProps> = ({ questionCount }) => {
   const { pathname } = useLocation()
 
   return (
-    <Section p="4" pt="3" style={{ backgroundColor: 'var(--gray-a2)' }}>
-      <TabNav.Root size="2">
-        <TabNav.Link href="/frontcover" active={pathname === '/frontcover'}>
-          Frontcover
-        </TabNav.Link>
-        {[...Array(questionCount).keys()].map((i) => (
-          <TabNav.Link
-            href={`/questions/${i + 1}`}
-            key={i}
-            active={pathname === `/questions/${i + 1}`}
-          >
-            {`Question ${i + 1}`}
+    <Section
+      p="3"
+      position="fixed"
+      top="0"
+      width="100%"
+      style={{ backgroundColor: 'var(--gray-8)', zIndex: 1000 }}
+    >
+      <Container>
+        <TabNav.Root size="2">
+          <TabNav.Link href="/frontcover" active={pathname === '/frontcover'}>
+            Frontcover
           </TabNav.Link>
-        ))}
-      </TabNav.Root>
+          {[...Array(questionCount).keys()].map((i) => (
+            <TabNav.Link
+              href={`/questions/${i + 1}`}
+              key={i}
+              active={pathname === `/questions/${i + 1}`}
+            >
+              {`Question ${i + 1}`}
+            </TabNav.Link>
+          ))}
+        </TabNav.Root>
+      </Container>
     </Section>
   )
 }