rearranged the sidebar links in 2x2 format

AmruthaPariprolu · Oct 26, 2023 · 360ccf4 · 360ccf4
1 parent c316351
commit 360ccf4
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 17 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -3,5 +3,6 @@
     "emmet.includeLanguages": {
         "\"javascript\":": "\"javascriptreact\""
     },
-    "C_Cpp.errorSquiggles": "disabled"
+    "C_Cpp.errorSquiggles": "disabled",
+    "deepscan.enable": true
 }
diff --git a/src/style/Navbar.css b/src/style/Navbar.css
@@ -1,19 +1,22 @@
 /* https://codepen.io/himalayasingh/pen/dqjLgO */
 .navbar {
     display: flex;
-    background-color: #099268 !important;
+    background-color: #8b5cf6;
     padding: 8px 10px;
     position: fixed;
     margin-top: -8.5rem;
     width: 100%;
     align-items: center;
     justify-content: space-between;
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-        Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
-        sans-serif !important;
-    border-bottom: 3px solid rgb(28, 174, 184);
-    z-index: 5;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+      Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important;
+    /* border-bottom: 3px solid rgb(28, 174, 184); */
+    z-index: 1;
+    isolation: isolate;
+    mix-blend-mode:normal;
+
 }
+
 .navbar-content {
     display: flex;
     align-items: center;
@@ -46,17 +49,16 @@
 }
 
 .sidebar {
-    width: 16rem;
-    height: 100%;
-    background-color: #099268;
+    width: 20rem;
+    height: 91%;
+    background-color: #8b5cf6;
     position: fixed;
     top: 4.4rem;
     z-index: 1000;
     display: flex;
     flex-direction: column;
     font-size: 1.4rem;
-    overflow-y: auto;
-    padding-bottom: 20px;
+    overflow-y: scroll;
 }
 
 .sidebar-content {
@@ -70,30 +72,29 @@
 }
 .sidebar {
     display: flex;
-    flex-direction: column;
 }
 .Link {
     color: black;
     text-decoration: none;
     font-weight: 500;
 }
 .nav-item {
-    font-size: 1srem;
+    font-size: 1rem;
 }
 .Link:hover {
     color: rgb(38, 3, 3);
     text-decoration: underline;
 }
 .sidebar-btns {
     display: flex;
-    flex-direction: column;
-    justify-content: space-evenly;
+    flex-wrap: wrap;
+    justify-content: space-between;
     font-size: 1rem;
     align-items: center;
 }
 .sidebar-btn {
     padding: 2px 5px;
-    margin: 9px;
+    font-size: 20px;
     text-align: center;
     line-height: 1;
 }