fix

superpage/src/components/Course/FlyoutMenu.astro

@@ -12,12 +12,13 @@ const relatedCourses = data?.relatedCourses
     : null;
 ---
 
-<flyout-menu>
+<flyout-menu class="group/menu">
     <nav class="sticky bg-lime-400 top-0 z-10 drop-shadow shadow-sm">
         <Container class="flex items-center relative py-3">
             <button
                 data-toggle="menu"
-                class="text-black font-medium cursor-pointer lg:bg-white/15 hover:outline lg:border border-black lg:py-0.5 lg:px-2.5 rounded-lg transition flex items-center gap-1"
+                class="text-black font-medium cursor-pointer lg:bg-white/15 hover:outline lg:border border-black lg:py-0.5 lg:px-2.5 rounded-lg transition flex items-center gap-1
+                       lg:group-open/menu:outline"
             >
                 <div class="truncate max-w-36 sm:max-w-72">
                     {title}
@@ -91,7 +92,7 @@ const relatedCourses = data?.relatedCourses
     class FlyoutMenu extends HTMLElement {
         constructor() {
             super();
-            this._open = false;
+            this._isOpen = false;
         }
 
         connectedCallback() {
@@ -108,13 +109,13 @@ const relatedCourses = data?.relatedCourses
             });
 
             button.addEventListener("click", () => {
-                if (this._open) {
+                if (this._isOpen) {
                     menu.close();
                 } else {
                     menu.show();
                 }
 
-                this._open = !this._open;
+                this._setIsOpen(!this._isOpen);
             });
 
             menu.addEventListener("blur", () => {
@@ -124,7 +125,7 @@ const relatedCourses = data?.relatedCourses
             });
 
             menu.addEventListener("close", () => {
-                this._open = false;
+                this._setIsOpen(false);
             });
 
             document.addEventListener("touchstart", (e) => {
@@ -141,6 +142,16 @@ const relatedCourses = data?.relatedCourses
                 menu.close();
             });
         }
+
+        _setIsOpen(value) {
+            this._isOpen = value;
+
+            if (value) {
+                this.setAttribute("open", "");
+            } else {
+                this.removeAttribute("open");
+            }
+        }
     }
 
     customElements.define("flyout-menu", FlyoutMenu);