From 6bd46e843774b0e0141e5115f819272f873900fe Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Sat, 11 May 2024 07:00:29 +0500
Subject: [PATCH] feat(Design): navigation rail redisign

---
 frontend/app/App.jsx                          | 42 ++++++++++---------
 .../NavigationRail/NavigationRail.jsx         | 13 +++++-
 2 files changed, 34 insertions(+), 21 deletions(-)
diff --git a/frontend/app/App.jsx b/frontend/app/App.jsx
index 96b208b..d0d38ee 100644
--- a/frontend/app/App.jsx
+++ b/frontend/app/App.jsx
@@ -56,31 +56,33 @@ export const App = (props) => {
 
   return (
     <body>
-      <div>
-        <NavigationRail
-          colorPicker={colorPicker}
-          settingsPopup={settingsPopup}
-          setColorPicker={setColorPicker}
-          setSettingsPopup={setSettingsPopup}
-        />
-        {colorPicker && (
-          <ColorPicker
-            mode={mode}
-            theme={theme}
+      <div style={{ display: "flex", "flex-direction": "row" }}>
+        <div style={{ "padding-inline-start": "0" }}>
+          <NavigationRail
             colorPicker={colorPicker}
-            setColorPicker={setColorPicker}
-          />
-        )}
-        {settingsPopup && (
-          <Settings
             settingsPopup={settingsPopup}
+            setColorPicker={setColorPicker}
             setSettingsPopup={setSettingsPopup}
           />
-        )}
+          {colorPicker && (
+            <ColorPicker
+              mode={mode}
+              theme={theme}
+              colorPicker={colorPicker}
+              setColorPicker={setColorPicker}
+            />
+          )}
+          {settingsPopup && (
+            <Settings
+              settingsPopup={settingsPopup}
+              setSettingsPopup={setSettingsPopup}
+            />
+          )}
+        </div>
+        <main className="responsive padding" style={{ overflow: "hidden" }}>
+          {props.children}
+        </main>
       </div>
-      <main className="responsive padding" style={{ overflow: "hidden" }}>
-        {props.children}
-      </main>
     </body>
   );
 };
diff --git a/frontend/app/components/NavigationRail/NavigationRail.jsx b/frontend/app/components/NavigationRail/NavigationRail.jsx
index 9a4d58f..bad7d86 100644
--- a/frontend/app/components/NavigationRail/NavigationRail.jsx
+++ b/frontend/app/components/NavigationRail/NavigationRail.jsx
@@ -42,7 +42,18 @@ export const NavigationRail = (props) => {
   ];
 
   return (
-    <nav className="left">
+    <nav
+      className="left border round margin"
+      style={{
+        "inline-size": "unset",
+        position: "sticky",
+        top: "1rem",
+        left: "0",
+        "min-height": "calc(100vh - (var(---margin) * 2))",
+        "background-color": "var(--surface)",
+        "padding-block": "1rem",
+      }}
+    >
       {userStore.isAuth && userStore.user ? (
         <Link className="circle transparent " href="/profile">
           <Image
