From 261372289a49ce57cadb54e49c8d8874ca1ff94f Mon Sep 17 00:00:00 2001
From: checktheroads <matt@allroads.io>
Date: Sun, 1 Aug 2021 00:27:27 -0700
Subject: [PATCH] #6797: Fix sidenav jumpy/glitchy behavior on page reload when
 pinned

---
 netbox/project-static/dist/graphiql.js.map | Bin 2644758 -> 2644899 bytes
 netbox/project-static/dist/netbox.js       | Bin 312523 -> 312604 bytes
 netbox/project-static/dist/netbox.js.map   | Bin 1116612 -> 1116977 bytes
 netbox/project-static/src/sidenav.ts       |   5 ++++-
 netbox/project-static/src/state/index.ts   |  14 ++++++++++++--
 netbox/templates/base/base.html            |  17 ++++++++++++++++-
 6 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/netbox/project-static/dist/graphiql.js.map b/netbox/project-static/dist/graphiql.js.map
index 5a7a6a823107dba01d832e3443dbcce0039cd580..fce5c4536ab526a781eb4cf9d0c577733d986a8e 100644
GIT binary patch
delta 285
zcmW;Exk|)f7=>Xn?)x%sGj5-|#Ng;9WTJ>7%4nx)viy)h{1dVa3|Lqk@D7}Mu*eOF
zDQu><wYBgH1h2qPiw6!Ic%NQ7%5%|C9-yFv9`vFQ{TRR?hA@l~jA9Jqn7|~aFpV;1
zFpD|NV*!<yYB#^Esj4YSr7J7-L`<n?Ny-vI#?eJWX-K|wg3J|k5?hhyH_piwk&v#C
zjxQ38{JSWOQ?jH>b|&4RefU)>?<L`XlZ!2KIA{wBLdOb%79}EX3U~kSubI-6kKMe=
z7TFS8W-Dx!5nE&HY=dpGt)iQ6|9n*Bv8^?9J*#Wiy3wp_r@DT?+c1jv`<?Gk<*fa7
HvwQmsE}&~Z

delta 139
zcmZ3yeIettZ3`J2S{PfHT9{i{T3B1yTG(4SS~y#{TDV(yT6kOdTKHQ8S_E5!T7+9f
zT0~pKTEtr<S|qnf9a!G(yFv<xrGZ!mh-HCT4v6J}SOJI?fmjKMm4R3Vh*h`yu2B1Q
cg|T9~L#?_vqwn^JTJ`sL8AGOfL~BF?0Dki`l>h($

diff --git a/netbox/project-static/dist/netbox.js b/netbox/project-static/dist/netbox.js
index c0f1e123d154350666164edaaea9b865a1a5f0e8..93f8ecf326d8f7162020946a59132a47eb09f518 100644
GIT binary patch
delta 127
zcmX@zDLki3xS@ryg{g&k3roUkxBP;V%>2A!+dQ3;%7WDVG=-9k%wj#Ls9ttzrLC<}
zaY<2TUb>P!SPCSBuEuJ5^lBEp?K4)h{9_W;0jjW4%1bRt%CFEZ&P++oODt2`K5ZR~
GsTcqrk1!|z

delta 37
tcmbQ!C49P5xS@ryg{g&k3roW4>8n?>XfoO6Z9l%6g`0W%^K~qyVgM6^4if+X

diff --git a/netbox/project-static/dist/netbox.js.map b/netbox/project-static/dist/netbox.js.map
index 3f86f21082a3f225701c652137ae95407a08cd22..197b62541f1e3c448e9ac0af083229a7117accd6 100644
GIT binary patch
delta 596
zcmZXPL2J}N6vx@^*6y~crh+2%GN4dd#!atXq56_;V_eD_))fRVv6*bgrjw9N%LXYb
zjQRlt=j3-#EaVG_r=I*0UIkAT1!p#;6g<3ny!ZdV_j~j8{l@1H8?Qu7)WwWwh*@z#
z%!#IGiFvVbWc=d0PZ>g1yR8#yqft&!fN~yix{cywJBWuo$$~LKyQDyr<(vc|N+J~O
z^JGuEf;cYFm@ty5ij7giNT*t6>7>T)cGbd6Y2{CDv>Wn%VJxp()|7Qhnl6t}NFvHe
zSj{6Ep<BF2iK6ixns<_v(}d+6WtM|abJygR!Z3|<-8*visCiv37sd@aTAaTs@BL^s
zWprp<F5eW!&4q{4yVO5lpp-HN>LQ-)6Lg5r2_(yD&MO7$^Sfw;5&kTh+|Fr8Sa7g%
zHt_CP7%CQ3TvTzXJQn6hUfYq+Pt0#GpQJW+;Su0IKp*=6BisWw!T{jmEr5Z3rh>06
zJ|2RzW>;<xVC!to#~$=1|0&c4pc>&?r<!8;8Z^WXIOV}_^L4!*_vOhS)5A`rn$W`o
x?eV~QT$NL|t7!_^$9p!o6T1xmnwyQ*nwM>=8^;gIFSVubGqtpQJG->r_y>qwzYzcc

delta 256
zcmdlu&E?2smxdO`7N!>F7M2#)7Pc1l7LFFq7OocVEj*t~wkMYIsIyGhui{ajUR%kd
zI^Fy^r{MO2DjqX#<!Xh3%)GqR6f1?2qS91_S{((TNNQ1WW^oBjsQp_j4-oSLF&_}~
zZ~xXRFt>!UX!?|20>_N~3!HS^9lacNyd53Abvzv%eIcw&Cr8Ijkd$kdGejiN(J@rV
z)zLL#`?22wQ<#`4yr#$e6Yx}WEOpXxc64;r@pp6#1ep*B;R4kM19iF<xo*GsPr!|Z
c)7Z1fO~=>K%yYW}v*0CW#;on1*#zxa08l<wrT_o{

diff --git a/netbox/project-static/src/sidenav.ts b/netbox/project-static/src/sidenav.ts
index 628b4f58d..90f0623ae 100644
--- a/netbox/project-static/src/sidenav.ts
+++ b/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();
diff --git a/netbox/project-static/src/state/index.ts b/netbox/project-static/src/state/index.ts
index 3fcdb5889..6d9e46de0 100644
--- a/netbox/project-static/src/state/index.ts
+++ b/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) {
diff --git a/netbox/templates/base/base.html b/netbox/templates/base/base.html
index 556c9e079..04e980e9d 100644
--- a/netbox/templates/base/base.html
+++ b/netbox/templates/base/base.html
@@ -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 %}