RomanNum3ral
/
netbox
mirror of https://github.com/netbox-community/netbox.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

#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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
netbox/project-static/dist/graphiql.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
netbox/project-static/dist/netbox.js vendored
View File

File diff suppressed because one or more lines are too long

4
netbox/project-static/dist/netbox.js.map vendored
View File

File diff suppressed because one or more lines are too long

5
netbox/project-static/src/sidenav.ts
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();

14
netbox/project-static/src/state/index.ts
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) {

17
netbox/templates/base/base.html
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 %}