rename shown to navbar-menu-open, refactor to vanilla js

Author: silverwind

web_src/css/base.css

@@ -983,13 +983,13 @@ img.ui.avatar,
   #navbar {
     align-items: stretch;
   }
-  #navbar.shown {
+  #navbar.navbar-menu-open {
     padding-bottom: 8px;
   }
-  #navbar.shown .item.brand {
+  #navbar.navbar-menu-open .item.brand {
     padding-bottom: 2px;
   }
-  #navbar:not(.shown) > *:not(.item.brand) {
+  #navbar:not(.navbar-menu-open) > *:not(.item.brand) {
     display: none;
   }
 }

web_src/js/features/common-global.js

@@ -20,18 +20,13 @@ export function initGlobalFormDirtyLeaveConfirm() {
 }
 
 export function initHeadNavbarContentToggle() {
-  const content = $('#navbar');
-  const toggle = $('#navbar-expand-toggle');
+  const navbar = document.getElementById('navbar');
+  const btn = document.getElementById('navbar-expand-toggle');
   let isExpanded = false;
-  toggle.on('click', () => {
+  btn.addEventListener('click', () => {
     isExpanded = !isExpanded;
-    if (isExpanded) {
-      content.addClass('shown');
-      toggle.addClass('active');
-    } else {
-      content.removeClass('shown');
-      toggle.removeClass('active');
-    }
+    navbar.classList.toggle('navbar-menu-open', isExpanded);
+    btn.classList.toggle('active', isExpanded);
   });
 }