fix: fix sidebar adjustment

N5GEH · Jun 28, 2022 · db8081c · db8081c
1 parent 646808e
commit db8081c
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 24 deletions.
diff --git a/app/Entirety/static/scss/_sidebar.scss b/app/Entirety/static/scss/_sidebar.scss
@@ -6,11 +6,24 @@ $sidebar-font-size: var(--bs-navbar-brand-font-size);
   width: 200px;
   height: #{ $sidebar-height};
 
+  @include media-breakpoint-down(md) {
+    width: 70px;
+  }
+
   ul {
-    .list-group-item {
-      font-size: 24px!important;
-      color: #72767b;
-      border-bottom-color: #72767b!important;
+    .nav-item {
+
+      @include media-breakpoint-down(md) {
+        font-size: 30px !important;
+      }
+
+      font-size: 24px !important;
+      border-bottom-color: #72767b !important;
+
+      .nav-link {
+        color: #72767b;
+        width: 100%;
+      }
     }
   }
 

diff --git a/app/Entirety/templates/sidebar.html b/app/Entirety/templates/sidebar.html
@@ -1,25 +1,34 @@
 <div class="d-flex flex-column col-auto">
-    <div id="sidebar" class="collapse collapse-horizontal navbar-expand-lg show border-end">
-        <div class="sidebar-nav bg-grey bg-opacity-75">
-            <ul class="container-fluid list-group-horizontal">
-                <a href="{% url "projects" %}" class="list-group-item align-content-center justify-content-center border-bottom py-2">
-                    <i class="bi bi-kanban"></i>
-                    Projects
-                </a>
-                <a href="#" class="list-group-item align-content-center justify-content-center border-bottom py-2">
-                    <i class="bi bi-server"></i>
-                    Entities
-                </a>
-                <a href="#" class="list-group-item align-content-center justify-content-center border-bottom py-2">
-                    <i class="bi bi-server"></i>
-                    Devices
-                </a>
-                <a href="#" class="list-group-item align-content-center justify-content-center border-bottom py-2">
-                    <i class="bi bi-alarm"></i>
-                    Alarming
-                </a>
+    <div id="sidebar" class="collapse collapse-horizontal show border-end">
+        <div class="sidebar-nav bg-grey">
+            <ul class="nav nav-flush flex-column mb-auto text-center">
+                <li class="nav-item border-bottom d-inline-flex">
+                    <a href="{% url "projects" %}"
+                       class="nav-link py-md-2">
+                        <i class="bi bi-kanban"></i>
+                        <span class="d-none d-md-inline-flex">Projects</span>
+                    </a>
+                </li>
             </ul>
-
+{#            <ul class="container-fluid list-group-horizontal">#}
+{#                <a href="{% url "projects" %}"#}
+{#                   class="list-group-item align-content-center justify-content-center border-bottom py-2">#}
+{#                    <i class="bi bi-kanban"></i>#}
+{#                    Projects#}
+{#                </a>#}
+{#                <a href="#" class="list-group-item align-content-center justify-content-center border-bottom py-2">#}
+{#                    <i class="bi bi-server"></i>#}
+{#                    Entities#}
+{#                </a>#}
+{#                <a href="#" class="list-group-item align-content-center justify-content-center border-bottom py-2">#}
+{#                    <i class="bi bi-server"></i>#}
+{#                    Devices#}
+{#                </a>#}
+{#                <a href="#" class="list-group-item align-content-center justify-content-center border-bottom py-2">#}
+{#                    <i class="bi bi-alarm"></i>#}
+{#                    Alarming#}
+{#                </a>#}
+{#            </ul>#}
         </div>
     </div>
 </div>