Use CSS for 200ms navbar transition-delay

netbox/project-static/src/sidenav.ts

@@ -27,6 +27,12 @@ class SideNav {
    */
   private sections: Section[] = [];
 
+  /**
+   * Tracker if the mouse on the navbar or not
+   */
+  // private mouseOver: boolean = false;
+
+
   constructor(base: HTMLDivElement) {
     this.base = base;
     this.state = new StateManager<NavState>(
@@ -247,6 +253,18 @@ class SideNav {
    * Show the sidenav and expand any active sections.
    */
   private onEnter(): void {
+    // this.mouseOver = true;
+    // if (!this.bodyHas('pinned')) {
+    //   setTimeout(() => {  
+    //     if (this.mouseOver) {
+    //       this.bodyRemove('hide', 'hidden');
+    //       this.bodyAdd('show'); 
+    //       for (const link of this.getActiveLinks()) {
+    //         this.activateLink(link, 'expand');
+    //       }
+    //     }
+    //   }, 200); // add a 200ms delay before the sidenav opens
+    // }
     if (!this.bodyHas('pinned')) {
       this.bodyRemove('hide', 'hidden');
       this.bodyAdd('show');
@@ -254,12 +272,15 @@ class SideNav {
         this.activateLink(link, 'expand');
       }
     }
+
+  
   }
 
   /**
    * Hide the sidenav and collapse any active sections.
    */
   private onLeave(): void {
+    // this.mouseOver = false;
     if (!this.bodyHas('pinned')) {
       this.bodyRemove('show');
       this.bodyAdd('hide');

netbox/project-static/styles/sidenav.scss

@@ -78,6 +78,7 @@
   background-color: var(--nbx-sidebar-bg);
   border-right: 1px solid $border-color;
   transition: $transition-100ms-ease-in-out;
+  transition-delay: 200ms;
 
   // Media fixes for mobile resolutions.
   @include media-breakpoint-down(lg) {