chg: [website] Improved sidebar UI

- As requested by the Webiste DavidCruciani
pull/659/head
Sami Mokaddem 2024-02-19 15:45:32 +01:00
parent 28a9381216
commit eb9e9c0f54
No known key found for this signature in database
GPG Key ID: 164C473F627A06FA
2 changed files with 39 additions and 24 deletions

View File

@ -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 .sidebar-menu-wrapper {
position: fixed;
}
#sidebar.collapsing .sidebar-menu-wrapper {
position: relative !important;
}
/* @media (min-width: 992px) {
.side-panel-config {
max-width: calc((100% - 200px) / 2 - 1*var(--bs-gutter-x) * .5);

View File

@ -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>