feat(menu): implement new top link disclosure menu subclass

See #10

README.md

@@ -12,6 +12,7 @@ This project is an extension of [accessible-menu](https://github.com/NickDJM/acc
 The supported menu types are:
 
 - [Disclosure Navigation Menus](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/),
+- [Disclosure Navigation Menus with Top-Level Links](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid/),
 - [Navigation Menubar](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/), and
 - [Navigation Treeview](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/examples/treeview-navigation/)
 
@@ -134,6 +135,26 @@ const menu = new Bootstrap5Menubar({
 });
 ```
 
+#### Bootstrap5TopLinkDisclosureMenu usage
+
+```js
+import { Bootstrap5TopLinkDisclosureMenu } from "accessible-menu";
+```
+
+or
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/accessible-menu@4.0.0-beta.0/dist/top-link-disclosure-menu-bs5.min.js"></script>
+```
+
+then
+
+```js
+const menu = new Bootstrap5TopLinkDisclosureMenu({
+  menuElement: document.querySelector("#example-menu"),
+});
+```
+
 #### Bootstrap5Treeview usage
 
 ```js

build.js

@@ -1,9 +1,11 @@
 import Bootstrap5DisclosureMenu from "./src/bootstrap5DisclosureMenu.js";
 import Bootstrap5Menubar from "./src/bootstrap5Menubar.js";
+import Bootstrap5TopLinkDisclosureMenu from "./src/bootstrap5TopLinkDisclosureMenu.js";
 import Bootstrap5Treeview from "./src/bootstrap5Treeview.js";
 
 export default {
   Bootstrap5DisclosureMenu,
   Bootstrap5Menubar,
+  Bootstrap5TopLinkDisclosureMenu,
   Bootstrap5Treeview,
 };

demo/main.js

@@ -1,5 +1,11 @@
 import AccessibleMenuBootstrap5 from "../index";
-import { singleLevel, twoLevel, threeLevel } from "./menus";
+import {
+  singleLevel,
+  twoLevel,
+  twoLevelTopLink,
+  threeLevel,
+  threeLevelTopLink,
+} from "./menus";
 
 /**
  * Generates an accessible-menu.
@@ -15,16 +21,26 @@ function generateMenu(type, structure, hover, container, options = {}) {
   const MenuClass = AccessibleMenuBootstrap5[type] || null;
   const menuDOM = menuStructures[structure];
 
-  container.innerHTML = menuDOM.default;
+  if (type === "Bootstrap5TopLinkDisclosureMenu") {
+    container.innerHTML = menuDOM.topLink;
+  } else {
+    container.innerHTML = menuDOM.default;
+  }
 
   const nav = container.querySelector("nav");
 
   nav.classList.remove("disclosure-menu");
   nav.classList.remove("menubar");
+  nav.classList.remove("top-link-disclosure-menu");
   nav.classList.remove("treeview");
 
   if (MenuClass !== null) {
     switch (type) {
+      case "Bootstrap5TopLinkDisclosureMenu":
+        nav.classList.add("top-link-disclosure-menu");
+
+        break;
+
       case "Bootstrap5DisclosureMenu":
         nav.classList.add("disclosure-menu");
 
@@ -62,19 +78,25 @@ const hoverButtons = document.querySelectorAll("#hoverButtons button");
 const menuStructures = {
   one: {
     default: singleLevel,
+    topLink: singleLevel,
   },
   two: {
     default: twoLevel,
+    topLink: twoLevelTopLink,
   },
   three: {
     default: threeLevel,
+    topLink: threeLevelTopLink,
   },
 };
 const menuOptions = {
   Bootstrap5DisclosureMenu: {
     optionalKeySupport: true,
   },
   Bootstrap5Menubar: {},
+  Bootstrap5TopLinkDisclosureMenu: {
+    optionalKeySupport: true,
+  },
   Bootstrap5Treeview: {},
 };