Wrap nav and main into App-controllable style blocks (#37)

QubitPi · Dec 9, 2024 · 61395d5 · 61395d5
1 parent 7570109
commit 61395d5
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/src/App.css b/src/App.css
@@ -31,20 +31,24 @@ body {
 }
 
 .container {
+  display: flex;
   position: relative;
   width: 100%;
 }
 
-/* ===================== Main ===================== */
-.main {
+.navigationSection {
+
+}
+
+.mainSection {
   position: absolute;
   width: calc(100% - 300px);
   left: 300px;
   min-height: 100vh;
   background: var(--white);
   transition: 0.5s;
 }
-.main.active {
+.mainSection.active {
   width: calc(100% - 80px);
   left: 80px;
 }

diff --git a/src/App.tsx b/src/App.tsx
@@ -84,8 +84,10 @@ function App() {
   return (
       <>
         <div className="container">
-          <Navigation/>
-          <div className={navigationExpanded ? "main" : "main active"}>
+          <div className="navigationSection">
+            <Navigation/>
+          </div>
+          <div className={navigationExpanded ? "mainSection" : "mainSection active"}>
             <TopBar/>
 
             <div className="flashcards">