1 files changed, 19 insertions, 73 deletions

diff --git a/app/assets/javascripts/ide/components/panes/collapsible_sidebar.vue b/app/assets/javascripts/ide/components/panes/collapsible_sidebar.vue
index 91e80be7d18..4e8e1e3a470 100644
--- a/app/assets/javascripts/ide/components/panes/collapsible_sidebar.vue
+++ b/app/assets/javascripts/ide/components/panes/collapsible_sidebar.vue
@@ -2,8 +2,7 @@
 import { mapActions, mapState } from 'vuex';
 import tooltip from '~/vue_shared/directives/tooltip';
 import Icon from '~/vue_shared/components/icon.vue';
-import ResizablePanel from '../resizable_panel.vue';
-import { GlSkeletonLoading } from '@gitlab/ui';
+import IdeSidebarNav from '../ide_sidebar_nav.vue';
 
 export default {
   name: 'CollapsibleSidebar',
@@ -12,8 +11,7 @@ export default {
   },
   components: {
     Icon,
-    ResizablePanel,
-    GlSkeletonLoading,
+    IdeSidebarNav,
   },
   props: {
     extensionTabs: {
@@ -25,13 +23,8 @@ export default {
       type: String,
       required: true,
     },
-    width: {
-      type: Number,
-      required: true,
-    },
   },
   computed: {
-    ...mapState(['loading']),
     ...mapState({
       isOpen(state) {
         return state[this.namespace].isOpen;
@@ -39,9 +32,6 @@ export default {
       currentView(state) {
         return state[this.namespace].currentView;
       },
-      isActiveView(state, getters) {
-        return getters[`${this.namespace}/isActiveView`];
-      },
       isAliveView(_state, getters) {
         return getters[`${this.namespace}/isAliveView`];
       },
@@ -59,9 +49,6 @@ export default {
     aliveTabViews() {
       return this.tabViews.filter(view => this.isAliveView(view.name));
     },
-    otherSide() {
-      return this.side === 'right' ? 'left' : 'right';
-    },
   },
   methods: {
     ...mapActions({
@@ -72,25 +59,6 @@ export default {
         return dispatch(`${this.namespace}/open`, view);
       },
     }),
-    clickTab(e, tab) {
-      e.target.blur();
-
-      if (this.isActiveTab(tab)) {
-        this.toggleOpen();
-      } else {
-        this.open(tab.views[0]);
-      }
-    },
-    isActiveTab(tab) {
-      return tab.views.some(view => this.isActiveView(view.name));
-    },
-    buttonClasses(tab) {
-      return [
-        this.side === 'right' ? 'is-right' : '',
-        this.isActiveTab(tab) && this.isOpen ? 'active' : '',
-        ...(tab.buttonClasses || []),
-      ];
-    },
   },
 };
 </script>
@@ -101,49 +69,27 @@ export default {
     :data-qa-selector="`ide_${side}_sidebar`"
     class="multi-file-commit-panel ide-sidebar"
   >
-    <resizable-panel
+    <div
       v-show="isOpen"
-      :initial-width="width"
-      :min-size="width"
       :class="`ide-${side}-sidebar-${currentView}`"
-      :side="side"
       class="multi-file-commit-panel-inner"
     >
-      <div class="h-100 d-flex flex-column align-items-stretch">
-        <slot v-if="isOpen" name="header"></slot>
-        <div
-          v-for="tabView in aliveTabViews"
-          v-show="isActiveView(tabView.name)"
-          :key="tabView.name"
-          class="flex-fill gl-overflow-hidden js-tab-view"
-        >
-          <component :is="tabView.component" />
-        </div>
-        <slot name="footer"></slot>
+      <div
+        v-for="tabView in aliveTabViews"
+        v-show="tabView.name === currentView"
+        :key="tabView.name"
+        class="flex-fill gl-overflow-hidden js-tab-view gl-h-full"
+      >
+        <component :is="tabView.component" />
       </div>
-    </resizable-panel>
-    <nav class="ide-activity-bar">
-      <ul class="list-unstyled">
-        <li>
-          <slot name="header-icon"></slot>
-        </li>
-        <li v-for="tab of tabs" :key="tab.title">
-          <button
-            v-tooltip
-            :title="tab.title"
-            :aria-label="tab.title"
-            :class="buttonClasses(tab)"
-            data-container="body"
-            :data-placement="otherSide"
-            :data-qa-selector="`${tab.title.toLowerCase()}_tab_button`"
-            class="ide-sidebar-link"
-            type="button"
-            @click="clickTab($event, tab)"
-          >
-            <icon :size="16" :name="tab.icon" />
-          </button>
-        </li>
-      </ul>
-    </nav>
+    </div>
+    <ide-sidebar-nav
+      :tabs="tabs"
+      :side="side"
+      :current-view="currentView"
+      :is-open="isOpen"
+      @open="open"
+      @close="toggleOpen"
+    />
   </div>
 </template>