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:
4
netbox/project-static/dist/graphiql.js.map
vendored
4
netbox/project-static/dist/graphiql.js.map
vendored
File diff suppressed because one or more lines are too long
2
netbox/project-static/dist/netbox.js
vendored
2
netbox/project-static/dist/netbox.js
vendored
File diff suppressed because one or more lines are too long
4
netbox/project-static/dist/netbox.js.map
vendored
4
netbox/project-static/dist/netbox.js.map
vendored
File diff suppressed because one or more lines are too long
@ -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();
|
||||
|
@ -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) {
|
||||
|
@ -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 %}
|
||||
|
Reference in New Issue
Block a user