1 files changed, 62 insertions, 0 deletions
diff --git a/app/assets/javascripts/nav/components/responsive_home.vue b/app/assets/javascripts/nav/components/responsive_home.vue
new file mode 100644
index 00000000000..c8f2f0bfb10
--- /dev/null
+++ b/app/assets/javascripts/nav/components/responsive_home.vue
@@ -0,0 +1,62 @@
+<script>
+import { GlTooltipDirective } from '@gitlab/ui';
+import TopNavMenuItem from './top_nav_menu_item.vue';
+import TopNavMenuSections from './top_nav_menu_sections.vue';
+import TopNavNewDropdown from './top_nav_new_dropdown.vue';
+
+const NEW_VIEW = 'new';
+const SEARCH_VIEW = 'search';
+
+export default {
+  components: {
+    TopNavMenuItem,
+    TopNavMenuSections,
+    TopNavNewDropdown,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    navData: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    menuSections() {
+      return [
+        { id: 'primary', menuItems: this.navData.primary },
+        { id: 'secondary', menuItems: this.navData.secondary },
+      ].filter((x) => x.menuItems?.length);
+    },
+    newDropdownViewModel() {
+      return this.navData.views[NEW_VIEW];
+    },
+    searchMenuItem() {
+      return this.navData.views[SEARCH_VIEW];
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <header class="gl-display-flex gl-align-items-center gl-py-4 gl-pl-4">
+      <h1 class="gl-m-0 gl-font-size-h2 gl-reset-color gl-mr-auto">{{ __('Menu') }}</h1>
+      <top-nav-menu-item
+        v-if="searchMenuItem"
+        v-gl-tooltip="{ title: searchMenuItem.title }"
+        class="gl-ml-3"
+        :menu-item="searchMenuItem"
+        icon-only
+      />
+      <top-nav-new-dropdown
+        v-if="newDropdownViewModel"
+        v-gl-tooltip="{ title: newDropdownViewModel.title }"
+        :view-model="newDropdownViewModel"
+        class="gl-ml-3"
+      />
+    </header>
+    <top-nav-menu-sections class="gl-h-full" :sections="menuSections" v-on="$listeners" />
+  </div>
+</template>