1 files changed, 83 insertions, 0 deletions
diff --git a/app/assets/javascripts/super_sidebar/components/context_switcher.vue b/app/assets/javascripts/super_sidebar/components/context_switcher.vue
new file mode 100644
index 00000000000..f1ddb8290a0
--- /dev/null
+++ b/app/assets/javascripts/super_sidebar/components/context_switcher.vue
@@ -0,0 +1,83 @@
+<script>
+import { GlAvatar, GlSearchBoxByType } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import { contextSwitcherItems } from '../mock_data';
+import NavItem from './nav_item.vue';
+
+export default {
+  components: {
+    GlAvatar,
+    GlSearchBoxByType,
+    NavItem,
+  },
+  i18n: {
+    contextNavigation: s__('Navigation|Context navigation'),
+    switchTo: s__('Navigation|Switch to...'),
+    recentProjects: s__('Navigation|Recent projects'),
+    recentGroups: s__('Navigation|Recent groups'),
+  },
+  contextSwitcherItems,
+  viewAllProjectsItem: {
+    title: s__('Navigation|View all projects'),
+    link: '/projects',
+    icon: 'project',
+  },
+  viewAllGroupsItem: {
+    title: s__('Navigation|View all groups'),
+    link: '/groups',
+    icon: 'group',
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-search-box-by-type />
+    <nav :aria-label="$options.i18n.contextNavigation">
+      <ul class="gl-p-0 gl-list-style-none">
+        <li>
+          <div aria-hidden="true" class="gl-font-weight-bold gl-px-3 gl-py-3">
+            {{ $options.i18n.switchTo }}
+          </div>
+          <ul :aria-label="$options.i18n.switchTo" class="gl-p-0">
+            <nav-item :item="$options.contextSwitcherItems.yourWork" />
+          </ul>
+        </li>
+        <li>
+          <div aria-hidden="true" class="gl-font-weight-bold gl-px-3 gl-py-3">
+            {{ $options.i18n.recentProjects }}
+          </div>
+          <ul :aria-label="$options.i18n.recentProjects" class="gl-p-0">
+            <nav-item
+              v-for="project in $options.contextSwitcherItems.recentProjects"
+              :key="project.title"
+              :item="project"
+            >
+              <template #icon>
+                <gl-avatar shape="rect" :size="32" :src="project.avatar" />
+              </template>
+            </nav-item>
+            <nav-item :item="$options.viewAllProjectsItem" />
+          </ul>
+        </li>
+        <li>
+          <div aria-hidden="true" class="gl-font-weight-bold gl-px-3 gl-py-3">
+            {{ $options.i18n.recentGroups }}
+          </div>
+          <ul :aria-label="$options.i18n.recentGroups" class="gl-p-0">
+            <nav-item
+              v-for="project in $options.contextSwitcherItems.recentGroups"
+              :key="project.title"
+              :item="project"
+            >
+              <template #icon>
+                <gl-avatar shape="rect" :size="32" :src="project.avatar" />
+              </template>
+            </nav-item>
+            <nav-item :item="$options.viewAllGroupsItem" />
+          </ul>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</template>