chg: [website] Improved sidebar UI

- As requested by the Webiste DavidCruciani
MISP · Feb 19, 2024 · 9b99ecc · 9b99ecc
1 parent 28a9381
commit 9b99ecc
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 24 deletions.
diff --git a/website/app/static/css/core.css b/website/app/static/css/core.css
@@ -1,3 +1,6 @@
+:root {
+    --sidebar-width: 210px;
+}
 
 body {
   background-color: #fbfbfb;
@@ -164,6 +167,16 @@ span#status {
     right: calc(var(--bs-gutter-x) * .5);
 }
 
+#sidebar-nav {
+    width: var(--sidebar-width);
+}
+#sidebar.collapsing #sidebar-menu-wraper {
+    position: fixed;
+}
+#sidebar.collapsing #sidebar-menu-wraper {
+    position: relative !important;
+}
+
 /* @media (min-width: 992px) {
     .side-panel-config {
         max-width: calc((100% - 200px) / 2 - 1*var(--bs-gutter-x) * .5);

diff --git a/website/app/templates/sidebar.html b/website/app/templates/sidebar.html
@@ -1,30 +1,32 @@
 <!--Main Navigation-->
 
 <div class="col-auto px-0">
-	<div id="sidebar" class="collapse collapse-horizontal show border-end">
-		<div id="sidebar-nav" class="rounded-0 text-sm-start min-vh-100">
-			<a class="navbar-brand" style="margin-left: 20px;" href="/">
-				<img src="{{ url_for('static',filename='image/misp.png') }}" height="55" alt="Misp Logo" loading="lazy" />
-			</a>
-			<div class="list-group list-group-flush mx-3 mt-4">
-				<a href="/" class="list-group-item list-group-item-action text-nowrap" aria-current="true">
-					<i class="fa-solid fa-house fa-fw me-3"></i><span>Home</span>
-				</a>
-				<a style="margin-top: 30px;" href="/history" class="list-group-item list-group-item-action text-nowrap">
-					<i class="fa-solid fa-clock-rotate-left fa-fw me-3"></i><span>History</span>
-				</a>
-				<a style="margin-top: 30px;" href="/history_session" class="list-group-item list-group-item-action text-nowrap">
-					<i class="fa-solid fa-clock fa-fw me-3"></i><span>History Session</span>
-				</a>
-				<a style="margin-top: 30px;" href="/history_tree" class="list-group-item list-group-item-action text-nowrap">
-					<i class="fa-solid fa-timeline fa-fw me-3"></i><span>History Tree</span>
-				</a>
-				<a style="margin-top: 30px;" href="/modules_config" class="list-group-item list-group-item-action text-nowrap">
-					<i class="fa-solid fa-gear fa-fw me-3"></i><span>Config</span>
-				</a>
-			</div>
-		</div>
-	</div>
+    <div id="sidebar" class="collapse collapse-horizontal show border-end">
+        <div id="sidebar-nav" class="rounded-0 text-sm-start min-vh-100">
+            <div class="sidebar-menu-wrapper">
+                <a class="navbar-brand" style="margin-left: 20px;" href="/">
+                    <img src="{{ url_for('static',filename='image/misp.png') }}" height="55" alt="Misp Logo" loading="lazy" />
+                </a>
+                <div class="list-group list-group-flush mx-3 mt-4">
+                    <a href="/" class="list-group-item list-group-item-action text-nowrap" aria-current="true">
+                        <i class="fa-solid fa-house fa-fw me-3"></i><span>Home</span>
+                    </a>
+                    <a style="margin-top: 30px;" href="/history" class="list-group-item list-group-item-action text-nowrap">
+                        <i class="fa-solid fa-clock-rotate-left fa-fw me-3"></i><span>History</span>
+                    </a>
+                    <a style="margin-top: 30px;" href="/history_session" class="list-group-item list-group-item-action text-nowrap">
+                        <i class="fa-solid fa-clock fa-fw me-3"></i><span>History Session</span>
+                    </a>
+                    <a style="margin-top: 30px;" href="/history_tree" class="list-group-item list-group-item-action text-nowrap">
+                        <i class="fa-solid fa-timeline fa-fw me-3"></i><span>History Tree</span>
+                    </a>
+                    <a style="margin-top: 30px;" href="/modules_config" class="list-group-item list-group-item-action text-nowrap">
+                        <i class="fa-solid fa-gear fa-fw me-3"></i><span>Config</span>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>