+ {header}
+
+
+ {primaryMenu}
+
+
+ {secondaryMenu}
+
+
+
+ );
+}
diff --git a/hindsight-docs/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx b/hindsight-docs/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx
new file mode 100644
index 00000000..d5d0913e
--- /dev/null
+++ b/hindsight-docs/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx
@@ -0,0 +1,31 @@
+import React, {type ReactNode} from 'react';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
+import NavbarItem, {type Props as NavbarItemConfig} from '@theme/NavbarItem';
+
+function useNavbarItems() {
+ // TODO temporary casting until ThemeConfig type is improved
+ return useThemeConfig().navbar.items as NavbarItemConfig[];
+}
+
+// The primary menu displays the navbar items
+export default function NavbarMobilePrimaryMenu(): ReactNode {
+ const mobileSidebar = useNavbarMobileSidebar();
+
+ // TODO how can the order be defined for mobile?
+ // Should we allow providing a different list of items?
+ const items = useNavbarItems();
+
+ return (
+