Fix sidebar flash and mobile nav regression (#477)

Author: rakesh2OO5

src/components/Nav/NavPanels.tsx

@@ -32,16 +32,17 @@ export const NavPanels = (props: NavPanelsProps) => {
     jumpToState,
   } = props;
 
-  const [isOpen, setIsOpen] = useState({ main: false, jump: false });
+  const [isOpen, setIsOpen] = useState({ main: true, jump: true });
   const [isMobile, setIsMobile] = useState(true);
 
-  // Defaults to closed on mobile, open on desktop
-  // Have to do this in a lifecycle method
-  // so that we can still server-side render
   useEffect(() => {
     const startsMobile = window.innerWidth < 768;
     setIsMobile(startsMobile);
     setIsOpen({ main: !startsMobile, jump: !startsMobile });
+    requestAnimationFrame(() => {
+      document.documentElement.setAttribute("data-nav-panels-ready", "true");
+    });
+
     // We use a resize observer to the user's window crosses the
     // threshhold between mobile and desktop
     const documentObserver = new ResizeObserver((entries) => {

src/components/Nav/styles.module.scss

@@ -132,7 +132,7 @@
 .jumpto {
   border-color: var(--sidebar-type-color);
 
-  animation: height 0.3s ease-in-out;
+  animation: none;
   flex-grow: 0;
   border-bottom-width: 1px;
   height: 40px;
@@ -262,7 +262,9 @@
   margin-top: 4px;
 }
 
-/* Interaction */
+:global(html[data-nav-panels-ready="true"]) .jumpto {
+  animation: height 0.3s ease-in-out;
+}
 
 .jumpto:global(.open) {
   flex-grow: 1;
@@ -277,7 +279,17 @@
     }
   }
 }
+@media (max-width: ($breakpoint-tablet - 1px)) {
+  :global(html:not([data-nav-panels-ready="true"])) .mainlinks:global(.open) {
+    height: 43px;
+  }
 
+  :global(html:not([data-nav-panels-ready="true"])) .jumpto:global(.open) {
+    flex-grow: 0;
+    height: 40px;
+    overflow: hidden;
+  }
+}
 /* Page-specific modifications */
 :global(.reference-item) .jumpto ul {
   grid-template-columns: 1fr;
@@ -286,4 +298,3 @@
 .jumpto ul li.linklabel:not(:global(.small), :first-child) {
   margin-top: 10px;
 }
-