Adding Tab Location "left"

terminus-core/src/components/appRoot.component.pug

@@ -3,99 +3,133 @@ title-bar(
   [class.inset]='hostApp.platform == Platform.macOS'
 )
 
-.content(
-    [class.tabs-on-top]='config.store.appearance.tabsLocation == "top"'
-)
-    .tab-bar
-        .inset.background(*ngIf='hostApp.platform == Platform.macOS && config.store.appearance.frame == "thin" && config.store.appearance.tabsLocation == "top"')
-        .tabs(
-            dnd-sortable-container,
-            [sortableData]='app.tabs',
-        )
-            tab-header(
-                *ngFor='let tab of app.tabs; let idx = index',
-                dnd-sortable,
-                [sortableIndex]='idx',
-                (onDragStart)='onTabDragStart()',
-                (onDragEnd)='onTabDragEnd()',
+.wrap
+  .tab-bar.vertical(
+    *ngIf='config.store.appearance.tabsLocation == "left"'
+  )
+      .inset.background(*ngIf='hostApp.platform == Platform.macOS \
+        && config.store.appearance.frame == "thin"')
+      .tabs.vertical(
+          dnd-sortable-container,
+          [sortableData]='app.tabs',
+      )
+          tab-header(
+              *ngFor='let tab of app.tabs; let idx = index',
+              dnd-sortable,
+              [sortableIndex]='idx',
+              (onDragStart)='onTabDragStart()',
+              (onDragEnd)='onTabDragEnd()',
 
-                [index]='idx',
-                [tab]='tab',
-                [active]='tab == app.activeTab',
-                [hasActivity]='tab.activity$|async',
-                @animateTab,
-                (click)='app.selectTab(tab)',
-                [class.fully-draggable]='hostApp.platform != Platform.macOS',
-                [class.drag-region]='hostApp.platform == Platform.macOS && !tabsDragging',
-            )
+              [index]='idx',
+              [tab]='tab',
+              [active]='tab == app.activeTab',
+              [hasActivity]='tab.activity$|async',
+              @animateTab,
+              (click)='app.selectTab(tab)',
+              [class.fully-draggable]='hostApp.platform != Platform.macOS',
+              [class.drag-region]='hostApp.platform == Platform.macOS && !tabsDragging',
+              [class.vertical]='true',
+          )
 
-        .btn-group.background
-            .d-flex(
-                *ngFor='let button of leftToolbarButtons',
-                ngbDropdown,
-                (openChange)='generateButtonSubmenu(button)',
-            )
-                button.btn.btn-secondary.btn-tab-bar(
-                    [title]='button.title',
-                    (click)='button.click && button.click()',
-                    [fastHtmlBind]='button.icon',
-                    ngbDropdownToggle,
-                )
-                div(*ngIf='button.submenu', ngbDropdownMenu)
-                    button.dropdown-item.d-flex.align-items-center(
-                        *ngFor='let item of button.submenuItems',
-                        (click)='item.click()',
-                        ngbDropdownItem,
-                    )
-                        .icon-wrapper(
-                            *ngIf='hasIcons(button.submenuItems)',
-                            [fastHtmlBind]='item.icon'
-                        )
-                        div([class.ml-3]='hasIcons(button.submenuItems)') {{item.title}}
 
-        .drag-space.background([class.persistent]='config.store.appearance.frame == "thin" && hostApp.platform != Platform.macOS')
+  .content(
+      [class.tabs-on-top]='config.store.appearance.tabsLocation == "top" || config.store.appearance.tabsLocation == "left"',
+      [class.with-side-tab]='config.store.appearance.tabsLocation == "left"',
+  )
+      .tab-bar
+          .inset.background(*ngIf='hostApp.platform == Platform.macOS \
+            && config.store.appearance.frame == "thin" \
+            && (config.store.appearance.tabsLocation == "top" || config.store.appearance.tabsLocation == "left")')
+          .tabs(
+              *ngIf='config.store.appearance.tabsLocation != "left"'
+              dnd-sortable-container,
+              [sortableData]='app.tabs',
+          )
+              tab-header(
+                  *ngFor='let tab of app.tabs; let idx = index',
+                  dnd-sortable,
+                  [sortableIndex]='idx',
+                  (onDragStart)='onTabDragStart()',
+                  (onDragEnd)='onTabDragEnd()',
 
-        .btn-group.background
-            .d-flex(
-                *ngFor='let button of rightToolbarButtons',
-                ngbDropdown,
-                (openChange)='generateButtonSubmenu(button)',
-            )
-                button.btn.btn-secondary.btn-tab-bar(
-                    [title]='button.title',
-                    (click)='button.click && button.click()',
-                    [fastHtmlBind]='button.icon',
-                    ngbDropdownToggle,
-                )
-                div(*ngIf='button.submenu', ngbDropdownMenu)
-                    button.dropdown-item.d-flex.align-items-center(
-                        *ngFor='let item of button.submenuItems',
-                        (click)='item.click()',
-                        ngbDropdownItem,
-                    )
-                        .icon-wrapper(
-                            *ngIf='hasIcons(button.submenuItems)',
-                            [fastHtmlBind]='item.icon'
-                        )
-                        div([class.ml-3]='hasIcons(button.submenuItems)') {{item.title}}
+                  [index]='idx',
+                  [tab]='tab',
+                  [active]='tab == app.activeTab',
+                  [hasActivity]='tab.activity$|async',
+                  @animateTab,
+                  (click)='app.selectTab(tab)',
+                  [class.fully-draggable]='hostApp.platform != Platform.macOS',
+                  [class.drag-region]='hostApp.platform == Platform.macOS && !tabsDragging',
+              )
 
-            button.btn.btn-secondary.btn-tab-bar.btn-update(
-                *ngIf='updatesAvailable',
-                title='Update available - Click to install',
-                (click)='updateApp()',
-                [fastHtmlBind]='updateIcon'
-            )
+          .btn-group.background
+              .d-flex(
+                  *ngFor='let button of leftToolbarButtons',
+                  ngbDropdown,
+                  (openChange)='generateButtonSubmenu(button)',
+              )
+                  button.btn.btn-secondary.btn-tab-bar(
+                      [title]='button.title',
+                      (click)='button.click && button.click()',
+                      [fastHtmlBind]='button.icon',
+                      ngbDropdownToggle,
+                  )
+                  div(*ngIf='button.submenu', ngbDropdownMenu)
+                      button.dropdown-item.d-flex.align-items-center(
+                          *ngFor='let item of button.submenuItems',
+                          (click)='item.click()',
+                          ngbDropdownItem,
+                      )
+                          .icon-wrapper(
+                              *ngIf='hasIcons(button.submenuItems)',
+                              [fastHtmlBind]='item.icon'
+                          )
+                          div([class.ml-3]='hasIcons(button.submenuItems)') {{item.title}}
 
-        window-controls.background(
-            *ngIf='config.store.appearance.frame == "thin" && (hostApp.platform == Platform.Windows || hostApp.platform == Platform.Linux)',
-        )
+          .drag-space.background([class.persistent]='config.store.appearance.frame == "thin" && hostApp.platform != Platform.macOS')
 
-    start-page(*ngIf='ready && app.tabs.length == 0')
+          .btn-group.background
+              .d-flex(
+                  *ngFor='let button of rightToolbarButtons',
+                  ngbDropdown,
+                  (openChange)='generateButtonSubmenu(button)',
+              )
+                  button.btn.btn-secondary.btn-tab-bar(
+                      [title]='button.title',
+                      (click)='button.click && button.click()',
+                      [fastHtmlBind]='button.icon',
+                      ngbDropdownToggle,
+                  )
+                  div(*ngIf='button.submenu', ngbDropdownMenu)
+                      button.dropdown-item.d-flex.align-items-center(
+                          *ngFor='let item of button.submenuItems',
+                          (click)='item.click()',
+                          ngbDropdownItem,
+                      )
+                          .icon-wrapper(
+                              *ngIf='hasIcons(button.submenuItems)',
+                              [fastHtmlBind]='item.icon'
+                          )
+                          div([class.ml-3]='hasIcons(button.submenuItems)') {{item.title}}
 
-    tab-body(
-        *ngFor='let tab of unsortedTabs',
-        [active]='tab == app.activeTab',
-        [tab]='tab',
-    )
+              button.btn.btn-secondary.btn-tab-bar.btn-update(
+                  *ngIf='updatesAvailable',
+                  title='Update available - Click to install',
+                  (click)='updateApp()',
+                  [fastHtmlBind]='updateIcon'
+              )
+
+          window-controls.background(
+              *ngIf='config.store.appearance.frame == "thin" \
+                && (hostApp.platform == Platform.Windows || hostApp.platform == Platform.Linux)',
+          )
+
+      start-page(*ngIf='ready && app.tabs.length == 0')
+      
+      tab-body(
+          *ngFor='let tab of unsortedTabs',
+          [active]='tab == app.activeTab',
+          [tab]='tab',
+      )
 
 ng-template(ngbModalContainer)

terminus-core/src/components/appRoot.component.scss

@@ -15,10 +15,18 @@
 
 $tabs-height: 38px;
 $tab-border-radius: 4px;
+$side-tab-width: 200px;
 
+.wrap {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  flex-direction: row;
+}
 
 .content {
-    height: 100%;
+    width: 100vw;
+    height: 100vh;
     flex: auto;
     display: flex;
     flex-direction: column-reverse;
@@ -26,12 +34,24 @@ $tab-border-radius: 4px;
     &.tabs-on-top {
         flex-direction: column;
     }
+
+    &.with-side-tab {
+        width: calc(100% - #{$side-tab-width});
+    }
+
 }
 
 .tab-bar {
     flex: none;
     height: $tabs-height;
     display: flex;
+    width: 100%;
+    &.vertical {
+        height: 100%;
+        width: $side-tab-width;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
 
     .btn-tab-bar {
         line-height: $tabs-height + 2px;
@@ -59,6 +79,12 @@ $tab-border-radius: 4px;
         flex: 0 1 auto;
         display: flex;
         min-width: 0;
+
+        &.vertical {
+          width: $side-tab-width;
+          flex: auto;
+          flex-direction: column;
+        }
     }
 
     &>.drag-space {

terminus-core/src/components/tabHeader.component.scss

@@ -13,6 +13,11 @@ $tabs-height: 38px;
 
     overflow: hidden;
 
+    &.vertical {
+      flex: none;
+      height: $tabs-height;
+    }
+
     .index {
         flex: none;
         font-weight: bold;