diff --git a/apps/home/static/home/css/sidebar.css b/apps/home/static/home/css/sidebar.css
index 5c2ab2e..381e978 100644
--- a/apps/home/static/home/css/sidebar.css
+++ b/apps/home/static/home/css/sidebar.css
@@ -195,6 +195,7 @@
.sidebar .sidebar-footer {
padding: 0 1rem 1rem 1rem;
+ display: flex;
}
.sidebar .sidebar-footer .sidebar-menu-btn {
@@ -208,7 +209,8 @@
background-color: inherit;
}
-.sidebar .sidebar-footer .sidebar-menu-btn:hover {
+.sidebar .sidebar-footer .sidebar-menu-btn:hover,
+.sidebar .sidebar-footer .sidebar-menu-btn.active {
background-color: var(--bs-body-bg);
}
diff --git a/apps/home/static/home/js/index.js b/apps/home/static/home/js/index.js
index 0eb1d00..27067d3 100644
--- a/apps/home/static/home/js/index.js
+++ b/apps/home/static/home/js/index.js
@@ -260,27 +260,50 @@ function logError(error) {
// region Sidebar Visibility
var _sidebarVisible = $(".sidebar").hasClass("visible"); // Applicable for smaller screens ONLY
+const getSidebarVisibility = () => _sidebarVisible;
+const setSidebarVisibility = show => {
+ // Must always show if the sidebar is pinned
+ show = getSidebarPinned() ? true : show;
-function getSidebarVisibility() {
- return _sidebarVisible;
-}
-
-function setSidebarVisibility(show) {
_sidebarVisible = show;
if (show) {
$(".sidebar").addClass("visible");
$(".sidebar-backdrop").show();
return;
}
-
+
$(".sidebar").removeClass("visible");
$(".sidebar-backdrop").hide();
}
+const toggleSidebarVisibility = () => setSidebarVisibility(!getSidebarVisibility());
-function toggleSidebarVisibility() {
- setSidebarVisibility(!getSidebarVisibility());
-}
+// Trigger an update to set the backdrop
+$(document).ready(() => setSidebarVisibility(getSidebarVisibility()));
+// User controls for sidebar visibility
$(".reveal-sidebar-btn").on("click", toggleSidebarVisibility);
$(".sidebar .btn-close").on("click", () => setSidebarVisibility(false));
$(".sidebar-backdrop").on("click", () => setSidebarVisibility(false));
+
+// Prevent sidebar from opening if the screen becomes larger then smaller again, while it's visible
+$(window).on('resize', () => {
+ // Can't pass conditional directly, causes flickering effect
+ if (getSidebarVisibility() && $(window).width() > 992) {
+ setSidebarVisibility(false);
+ }
+});
+
+
+// region Sidebar Pin
+
+var _sidebarPinned = $(".sidebar .pin-sidebar-btn").hasClass("active");
+const getSidebarPinned = () => _sidebarPinned;
+const setSidebarPinned = pin => {
+ _sidebarPinned = pin;
+ const btn = $(".sidebar .pin-sidebar-btn");
+ pin ? btn.addClass("active") : btn.removeClass("active");
+}
+const toggleSidebarPinned = () => setSidebarPinned(!getSidebarPinned());
+
+// User controls for pinning the sidebar
+$(".sidebar .pin-sidebar-btn").on("click", toggleSidebarPinned);
diff --git a/apps/home/templates/home/sidebar.html b/apps/home/templates/home/sidebar.html
index 56d1bb7..8dd28b9 100644
--- a/apps/home/templates/home/sidebar.html
+++ b/apps/home/templates/home/sidebar.html
@@ -30,6 +30,9 @@
{{ request.user.global_name }}
+