From ef5fae02e63876ea5516d9f97ca526b271c0eea7 Mon Sep 17 00:00:00 2001 From: Anaïs Amato Date: Tue, 20 Apr 2021 11:35:48 +0200 Subject: [PATCH] Update navbar showing active page --- app/static/css/style.css | 4 ++++ app/static/js/navbar.js | 40 ++++++++++++++++++++++++++++++++++++++++ app/templates/base_page.html | 79 ++++++++++++++++++++++++++++++++++++++++++------------------------------------- 3 files changed, 86 insertions(+), 37 deletions(-) create mode 100644 app/static/js/navbar.js diff --git a/app/static/css/style.css b/app/static/css/style.css index b0b16eb..5eb1b20 100644 --- a/app/static/css/style.css +++ b/app/static/css/style.css @@ -58,6 +58,10 @@ nav.sidebar a.disabled { border-bottom: 1px solid #ddd } +.sublink_activate { + border-left: 5px solid #00c5ff;; + background-color: #e3e3e3; +} /* -- - - - - - - - - - per site icon settings - - - - - - - - - -- */ .admin-icon { diff --git a/app/static/js/navbar.js b/app/static/js/navbar.js new file mode 100644 index 0000000..f7813b7 --- /dev/null +++ b/app/static/js/navbar.js @@ -0,0 +1,40 @@ +// Script used with the navbar to color the menu items and leave them visible + + +// Check if an element of the navbar is stored in the local storage or not +var collapseItem_ul = localStorage.getItem('collapseItem_ul'); +var collapseItem_a = localStorage.getItem('collapseItem_a'); + +// +var sublink_activate = $("a[href='" + collapseItem_a + "']"); +sublink_activate.addClass("sublink_activate"); + +$("#" + collapseItem_ul).addClass("show"); + + +//store the id of the collapsible element +$('.main-nav').click(function () { + localStorage.setItem('collapseItem_ul', $(this).next().attr("id")); +}); +$('.sub_link').click(function (e) { + localStorage.setItem('collapseItem_a', $(this).attr("href")); +}) + + +// a click to the connection bar or 'accueil' button desactivate the localstorage +$('.link_connect').click(function() { + $("#" + collapseItem_ul).removeClass("show"); + $("#" + collapseItem_ul).addClass("hide"); + sublink_activate.removeClass("sublink_activate"); + localStorage.removeItem('collapseItem_ul'); + localStorage.removeItem('collapseItem_a'); + +}); +$("#accueil").click(function (){ + $("#" + collapseItem_ul).removeClass("show"); + $("#" + collapseItem_ul).addClass("hide"); + sublink_activate.removeClass("sublink_activate"); + localStorage.removeItem('collapseItem_ul'); + localStorage.removeItem('collapseItem_a'); +}); + diff --git a/app/templates/base_page.html b/app/templates/base_page.html index 2b9575d..9449d9a 100644 --- a/app/templates/base_page.html +++ b/app/templates/base_page.html @@ -8,8 +8,9 @@