1
0
mirror of https://github.com/netbox-community/netbox.git synced 2024-05-10 07:54:54 +00:00

#6797: Fix sidenav jumpy/glitchy behavior on page reload when pinned

This commit is contained in:
checktheroads
2021-08-01 00:27:27 -07:00
parent b86edd4a20
commit 261372289a
6 changed files with 37 additions and 9 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -17,7 +17,10 @@ class SideNav {
constructor(base: HTMLDivElement) {
this.base = base;
this.state = new StateManager<NavState>({ pinned: true }, { persist: true });
this.state = new StateManager<NavState>(
{ pinned: true },
{ persist: true, key: 'netbox-sidenav' },
);
this.init();
this.initLinks();

View File

@ -8,6 +8,11 @@ interface StateOptions {
* exists in localStorage, the value will be read and used as the initial value.
*/
persist?: boolean;
/**
* Use a static localStorage key instead of automatically generating one.
*/
key?: string;
}
/**
@ -49,10 +54,15 @@ export class StateManager<T extends Dict, K extends keyof T = keyof T> {
private key: string = '';
constructor(raw: T, options: StateOptions) {
this.key = this.generateStateKey(raw);
this.options = options;
// Use static key if defined.
if (typeof this.options.key === 'string') {
this.key = this.options.key;
} else {
this.key = this.generateStateKey(raw);
}
if (this.options.persist) {
const saved = this.retrieve();
if (saved !== null) {

View File

@ -21,7 +21,7 @@
{# Page title #}
<title>{% block title %}Home{% endblock %} | NetBox</title>
<script>
<script type="text/javascript">
/**
* Determine the best initial color mode to use prior to rendering.
*/
@ -82,6 +82,21 @@
</head>
<body>
<script type="text/javascript">
(function() {
// Check localStorage to see if the sidebar should be pinned.
var sideNavRaw = localStorage.getItem('netbox-sidenav');
if (typeof sideNavRaw === 'string') {
var sideNavState = JSON.parse(sideNavRaw);
if (sideNavState.pinned === true) {
// If the sidebar should be pinned, set the appropriate body attributes prior to the
// rest of the content rendering. This prevents jumpy/glitchy behavior on page reloads.
document.body.setAttribute('data-sidenav-pinned', '');
document.body.setAttribute('data-sidenav-show', '');
}
}
})();
</script>
{# Page layout #}
{% block layout %}{% endblock %}