📄 Added more media query responsiveness & scroll bar.

Slqmy · Jun 7, 2023 · c40d7e7 · c40d7e7
1 parent e475816
commit c40d7e7
Showing 1 changed file with 34 additions and 5 deletions.
diff --git a/styles/sidebar.css b/styles/sidebar.css
@@ -8,6 +8,7 @@
  width: 72px;
  z-index: 200;
  padding-top: 5px;
+ overflow-y: auto;
  }
 
  div.sidebar-link {
@@ -37,7 +38,31 @@
  }
 }
 
-@media (min-width: 1200.1px) {
+@media (min-width: 640px) and (max-width: 1023px) {
+ div.sidebar-link div {
+ font-size: 9px;
+ }
+}
+
+@media (min-width: 1700px) {
+ div.sidebar {
+ position: fixed;
+ left: 0;
+ bottom: 0;
+ top: 55px;
+ background-color: white;
+ width: 200px;
+ z-index: 200;
+ padding-top: 5px;
+ overflow-y: auto;
+ }
+
+ body {
+ padding-left: 224px;
+ }
+}
+
+@media (min-width: 1200.1px) and (max-width: 1699.9px) {
  div.sidebar {
  position: fixed;
  left: 0;
@@ -47,8 +72,15 @@
  width: 150px;
  z-index: 200;
  padding-top: 5px;
+ overflow-y: auto;
+ }
+
+ body {
+ padding-left: 174px;
  }
+}
 
+@media (min-width: 1200.1px) {
  div.sidebar-link {
  height: 35px;
  display: flex;
@@ -73,9 +105,6 @@
  font-size: 10px;
  width: 1fr;
  margin-left: 12px;
- }
-
- body {
- padding-left: 174px;
+ white-space: nowrap;
  }
 }