Small request for my forum or here @phenomlab
I would like the bottom bar of the site to be hidden with a button and for it to appear/disappear after a click or a mouseover with a small animation that doesn’t take too many resources.
It would also be nice if the setting was kept in the DOM session if possible so that the user doesn’t have to mess with it all the time.
We could imagine that it is active by default and if the user does not want it, he hides it. It will simply remain the button on the left or right side
Thanks 
/admin/extend/widgets and locate the “Global Footer” widget<div id="console-nav-tab"><i class="fa-solid fa-angles-left"></i></div>
div#console-nav-tab {
position: fixed;
bottom: 0px;
z-index: 900;
height: 30px;
left: 0px;
}
div#console-nav-tab i {
font-size: 16px;
margin-left: 10px;
line-height: 2.0 !important;
}
.toBottom {
bottom: 0px !important;
}
Note, that you probably need to modify the existing CSS ID floatleft to accommodate the additional DIV and icon. For example
#floatleft {
float: left;
padding-left: 30px; /*additional left padding to support additional DIV and icon */
font-size: 80%;
line-height: 2.0;
font-weight: 600;
display: flex;
}
/admin/appearance/customise#custom-js and add this block of code (bottom is fine, or wherever you want to place it)$(document).ready(function() {
$(window).on('action:ajaxify.end', function(data) {
var getState = localStorage.getItem("footer");
if (getState === "hidden") {
$("#console-nav-footer").hide();
$("#console-nav-tab i").addClass("fa-solid fa-angles-right");
$('.pagination-block').addClass("toBottom");
} else {
$("#console-nav-tab i").addClass("fa-solid fa-angles-left");
$('.pagination-block').removeClass("toBottom");
}
$("#console-nav-tab").click(function() {
$("#console-nav-footer").toggle(250, function() {
if ($("#console-nav-footer").is(":hidden")) {
localStorage.setItem("footer", "hidden");
$("#console-nav-tab i").addClass("fa-solid fa-angles-right");
$('.pagination-block').addClass("toBottom");
} else {
localStorage.setItem("footer", "shown");
$("#console-nav-tab i").addClass("fa-solid fa-angles-left");
$('.pagination-block').removeClass("toBottom");
}
});
$("i", this).toggleClass("fa-solid fa-angles-left fa-solid fa-angles-right");
});
});
});
@DownPW said in Bottom footer navbar button extend:
We could imagine that it is active by default and if the user does not want it, he hides it. It will simply remain the button on the left or right side
So are you looking for a button on the footer that when clicked will remove from the screen with an animation, but leave just enough so that it can be clicked to make it reappear again with the same animation ?
@phenomlab said in Bottom footer navbar button extend:
@DownPW said in Bottom footer navbar button extend:
We could imagine that it is active by default and if the user does not want it, he hides it. It will simply remain the button on the left or right side
So are you looking for a button on the footer that when clicked will remove from the screen with an animation, but leave just enough so that it can be clicked to make it reappear again with the same animation ?
Exactly
@DownPW Right. I’m on it (well, tomorrow now)
@phenomlab hé hé 
clearly that ^^
@DownPW ok, good. Let me write the code to record the session state (in the same way that the theme engine works) and I’ll release the code, plus CSS.
hell yeah
Simple to modify ?
Example: put the button on the left or right
@DownPW yes, that will be a simple CSS modification
@DownPW said in Bottom footer navbar button extend:
Example: put the button on the left or right
Looks better on the left I think - more natural
@phenomlab yes
@DownPW I’ll make some small adjustments to the final code to accommodate this. Just need to write the session cookie data, then I’ll release the code.
@DownPW Can you let me know if you used the same code for the footer as what is here ? I think this is the case, but want to check. There needs to be some modifications to this code to support the footer toggle.
Updated position of collapse/expand so it’s on the left for a more natural feel
Very great
@phenomlab said in Bottom footer navbar button extend:
Can you let me know if you used the same code for the footer as what is here ?
yes Mark, with minor adjustement.
/admin/extend/widgets and locate the “Global Footer” widget<div id="console-nav-tab"><i class="fa-solid fa-angles-left"></i></div>
div#console-nav-tab {
position: fixed;
bottom: 0px;
z-index: 900;
height: 30px;
left: 0px;
}
div#console-nav-tab i {
font-size: 16px;
margin-left: 10px;
line-height: 2.0 !important;
}
.toBottom {
bottom: 0px !important;
}
Note, that you probably need to modify the existing CSS ID floatleft to accommodate the additional DIV and icon. For example
#floatleft {
float: left;
padding-left: 30px; /*additional left padding to support additional DIV and icon */
font-size: 80%;
line-height: 2.0;
font-weight: 600;
display: flex;
}
/admin/appearance/customise#custom-js and add this block of code (bottom is fine, or wherever you want to place it)$(document).ready(function() {
$(window).on('action:ajaxify.end', function(data) {
var getState = localStorage.getItem("footer");
if (getState === "hidden") {
$("#console-nav-footer").hide();
$("#console-nav-tab i").addClass("fa-solid fa-angles-right");
$('.pagination-block').addClass("toBottom");
} else {
$("#console-nav-tab i").addClass("fa-solid fa-angles-left");
$('.pagination-block').removeClass("toBottom");
}
$("#console-nav-tab").click(function() {
$("#console-nav-footer").toggle(250, function() {
if ($("#console-nav-footer").is(":hidden")) {
localStorage.setItem("footer", "hidden");
$("#console-nav-tab i").addClass("fa-solid fa-angles-right");
$('.pagination-block').addClass("toBottom");
} else {
localStorage.setItem("footer", "shown");
$("#console-nav-tab i").addClass("fa-solid fa-angles-left");
$('.pagination-block').removeClass("toBottom");
}
});
$("i", this).toggleClass("fa-solid fa-angles-left fa-solid fa-angles-right");
});
});
});
why deleted ?
@DownPW Because it’s not finished. I forgot the session state…
