NeoAnd/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2025-12-19 03:42:25 -06:00
Code Issues Actions 12 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
checktheroads
2021-08-01 00:27:27 -07:00
parent 85d3d26d73
commit 78247080db
6 changed files with 37 additions and 9 deletions
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) { constructor(base: HTMLDivElement) {
this.base = base; 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.init();
this.initLinks(); 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. * exists in localStorage, the value will be read and used as the initial value.
*/ */
persist?: boolean; 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 = ''; private key: string = '';
constructor(raw: T, options: StateOptions) { constructor(raw: T, options: StateOptions) {
this.key = this.generateStateKey(raw);
this.options = options; 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) { if (this.options.persist) {
const saved = this.retrieve(); const saved = this.retrieve();
if (saved !== null) { if (saved !== null) {

17
netbox/templates/base/base.html
View File

@@ -21,7 +21,7 @@
{# Page title #} {# Page title #}
<title>{% block title %}Home{% endblock %} | NetBox</title> <title>{% block title %}Home{% endblock %} | NetBox</title>
<script> <script type="text/javascript">
/** /**
* Determine the best initial color mode to use prior to rendering. * Determine the best initial color mode to use prior to rendering.
*/ */
@@ -82,6 +82,21 @@
</head> </head>
<body> <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 #} {# Page layout #}
{% block layout %}{% endblock %} {% block layout %}{% endblock %}