remove side-tabs from tab-switcher, splitting functionality into separate component

src/components/tab_switcher/tab_switcher.jsx

@@ -31,11 +31,6 @@ export default {
       type: Boolean,
       default: false
     },
-    sideTabBar: {
-      required: false,
-      type: Boolean,
-      default: false
-    },
     bodyScrollLock: {
       required: false,
       type: Boolean,
@@ -157,26 +152,21 @@ export default {
 
       return (
         <div class={classes}>
-          {
-            this.sideTabBar
-              ? <h1 class="mobile-label">{props.label}</h1>
-              : ''
-          }
           {renderSlot}
         </div>
       )
     })
 
     return (
-      <div class={'tab-switcher ' + (this.sideTabBar ? 'side-tabs' : 'top-tabs')}>
+      <div class="tab-switcher top-tabs">
         <div
           class="tabs"
           role="tablist"
+          ref="nav"
         >
           {tabs}
         </div>
         <div
-          ref="contents"
           role="tabpanel"
           class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')}
           v-body-scroll-lock={this.bodyScrollLock}

src/components/tab_switcher/tab_switcher.scss

@@ -52,104 +52,6 @@
     }
   }
 
-  &.side-tabs {
-    flex-direction: row;
-
-    @media all and (width <= 800px) {
-      overflow-x: auto;
-    }
-
-    > .contents {
-      flex: 1 1 auto;
-    }
-
-    > .tabs {
-      flex: 0 0 auto;
-      overflow: hidden auto;
-      flex-direction: column;
-
-      &::after,
-      &::before {
-        flex-shrink: 0;
-        flex-basis: 0.5em;
-        content: "";
-        border-right: 1px solid;
-        border-right-color: var(--border);
-      }
-
-      &::after {
-        flex-grow: 1;
-      }
-
-      &::before {
-        flex-grow: 0;
-      }
-
-      .tab-wrapper {
-        min-width: 10em;
-        display: flex;
-        flex-direction: column;
-
-        @media all and (width <= 800px) {
-          min-width: 4em;
-        }
-
-        &:not(.active)::after {
-          top: 0;
-          right: 0;
-          bottom: 0;
-          border-right: 1px solid;
-          border-right-color: var(--border);
-        }
-
-        &::before {
-          flex: 0 0 6px;
-          content: "";
-          border-right: 1px solid;
-          border-right-color: var(--border);
-        }
-
-        &:last-child .tab {
-          margin-bottom: 0;
-        }
-      }
-
-      .tab {
-        flex: 1;
-        box-sizing: content-box;
-        max-width: 9em;
-        min-width: 1px;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        padding-left: 1em;
-        padding-right: calc(1em + 200px);
-        margin-right: -200px;
-        margin-left: 1em;
-
-        &:not(.active) {
-          margin-top: 0;
-          margin-left: 1.5em;
-        }
-
-        @media all and (width <= 800px) {
-          padding-left: 0.25em;
-          padding-right: calc(0.25em + 200px);
-          margin-right: calc(0.25em - 200px);
-          margin-left: 0.25em;
-
-          &:not(.active) {
-            margin-top: 0;
-            margin-left: 0.5em;
-          }
-
-          .text {
-            display: none;
-          }
-        }
-      }
-    }
-  }
-
   .contents {
     flex: 1 0 auto;
     min-height: 0;