From 7f80bf6c16d35da1a982d7002e0606a6de8221c6 Mon Sep 17 00:00:00 2001
From: Ivan Procaccini <ivanprocaccini905@gmail.com>
Date: Mon, 20 May 2024 16:05:36 +0100
Subject: [PATCH] style: fix top bar at the top and refine paddings to align
 top bar with main content

---
 src/ExamRoot.tsx                |  5 ++++-
 src/components/NavBar/index.tsx | 38 ++++++++++++++++++++-------------
 2 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/src/ExamRoot.tsx b/src/ExamRoot.tsx
index a35afdc..ca23b24 100644
--- 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
index e08c30d..720f768 100644
--- 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>
   )
 }