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

netbox/project-static/src/sidenav.ts

@@ -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();

netbox/project-static/src/state/index.ts

@@ -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) {