improve: minor change in main/side nav css

src/components/Navigations/MainNavigation.css

@@ -1,10 +1,13 @@
-/*src/components/MainNavigation.css*/
 .main-navigation {
     background-color: #333;
     color: white;
     padding: 1rem;
 }
 
+.dropdown-option {
+    margin-top: 0.2rem;
+}
+
 .main-navigation .navbar {
     background-color: #333 !important;
 }
@@ -19,6 +22,10 @@
     color: #f5f5f5 !important;
 }
 
+.navbar-end .navbar-item {
+    margin-right: 1rem;
+}
+
 .main-navigation .button {
     margin-left: 0.5rem;
 }
@@ -54,4 +61,4 @@
 .main-navigation .navbar-item:not(:last-child) {
     border-right: 1px solid #555;
     padding-right: 1rem;
-}
+}

src/components/Navigations/MainNavigation.js

@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 import { AuthContext } from "../../AuthProvider";
 import "bulma/css/bulma.min.css";
 import {useConfig} from "../../ConfigProvider";
+import "./MainNavigation.css";
 
 const MainNavigation = () => {
     const { user, login, logout } = useContext(AuthContext);
@@ -108,14 +109,14 @@ const MainNavigation = () => {
                                 </span>
                                 <div className={`navbar-dropdown ${isDropdownOpen ? "is-active" : ""}`}>
                                     <button
-                                        className="button is-primary"
+                                        className="button is-primary dropdown-option"
                                         onClick={handleGetBackup}
                                         type="button"
                                     >
                                         Get Backup
                                     </button>
                                     <button
-                                        className="button is-danger"
+                                        className="button is-danger dropdown-option"
                                         onClick={logout}
                                         type="button"
                                     >

src/components/Navigations/SideNavigation.css

@@ -3,8 +3,9 @@
     border-radius: 8px;
     padding: 1rem;
     background-color: #f9f9f9;
-    height: 100%;
+    height: 90vh;
-    overflow-y: auto;
+    overflow-y: hidden;
+    min-width: 25vw;
 }
 
 .menu-label {
@@ -15,6 +16,8 @@
 
 .menu-list {
     margin-left: 0;
+    height: 100%;
+    overflow-y: auto;
 }
 
 .menu-list-item {

src/components/Navigations/SideNavigation.js

@@ -8,7 +8,7 @@ const SideNavigation = () => {
     const {data: paths, isLoading, error } = usePaths(1);
     const deletePath = useDeletePath();
     const updatePath = useUpdatePath();
-
+    const [searchTerm, setSearchTerm] = React.useState("");
     const sortedPaths = paths
         ? paths.slice().sort((a, b) => a.order.localeCompare(b.order))
         : [];
@@ -39,7 +39,7 @@ const SideNavigation = () => {
 
     return (
         <aside className="menu">
-            <p className="menu-label">Markdown Directory</p>
+            <p className="menu-label">---</p>
             <PermissionGuard rolesRequired={["admin", "creator"]}>
                 <a
                     href="/markdown/create"