feat: introduced cleaner layout strategy

package.json

@@ -28,6 +28,7 @@
     "is-url-relative-without-domain": "^2.0.0",
     "lodash-id": "^0.14.0",
     "lowdb": "^1.0.0",
+    "portal-vue": "^2.1.3",
     "prism-themes": "^1.0.1",
     "prismjs": "^1.15.0",
     "vue": "^2.6.10",

src/App.vue

@@ -1,109 +1,27 @@
 <template>
-  <div
-    :class="{
-      [$style.app]: true,
-      [$style['app--sidebar-right']]: isLayoutInverted,
-    }"
-  >
-    <aside :class="$style.aside">
-      <window-controls
-        :class="$style.aside__header"
-      />
-      <tabs-nav :class="$style.aside__body" />
-    </aside>
-    <tabs-list :class="$style.main" />
-    <div :class="$style.main">
+  <app-layout>
+    <template slot="main">
+      <tabs-list />
       <router-view :key="$route.path" />
-    </div>
-    <window-dimmer />
-  </div>
+    </template>
+    <template slot="overlays">
+      <window-dimmer />
+    </template>
+  </app-layout>
 </template>
 
 <script>
+import AppLayout from '@/components/AppLayout.vue';
 import TabsList from '@/components/TabsList.vue';
-import TabsNav from '@/components/TabsNav.vue';
-import WindowControls from '@/components/WindowControls.vue';
 import WindowDimmer from '@/components/WindowDimmer.vue';
 import NotificationSchedule from '@/utils/mixinNotificationSchedule';
 
 export default {
   components: {
+    AppLayout,
     TabsList,
-    TabsNav,
-    WindowControls,
     WindowDimmer,
   },
   mixins: [NotificationSchedule],
-  computed: {
-    isLayoutInverted() {
-      return this.$store.getters['Settings/byKey']('layout.sideBarLocation') === 'right';
-    },
-  },
 };
 </script>
-
-<style lang="postcss" module>
-@tailwind preflight;
-@tailwind components;
-
-.app {
-  @apply
-    font-sans text-grey
-    bg-black select-none;
-
-  display: grid;
-  grid-auto-flow: dense;
-  grid-template-columns: [aside] min-content [main] auto;
-  grid-template-rows: 100vh;
-}
-
-.app--sidebar-right {
-  direction: rtl;
-}
-
-.aside {
-  @apply relative flex flex-col;
-  grid-column: aside;
-  max-width: config('width.64');
-  direction: ltr;
-}
-
-.aside__header {
-  @apply flex-no-shrink;
-}
-
-.aside__body {
-  @apply flex-grow;
-}
-
-.main {
-  @apply relative z-10 overflow-hidden;
-  grid-column: main;
-  direction: ltr;
-}
-
-.main:after {
-  @apply absolute pin-y z-20 w-px pointer-events-none;
-  content: "";
-  background-color: #fff1;
-}
-
-.app:not(.app--sidebar-right) .main:after {
-  @apply pin-l;
-}
-
-.app.app--sidebar-right .main:after {
-  @apply pin-r;
-}
-</style>
-
-<style lang="postcss">
-body {
-  @apply h-screen overflow-hidden bg-black;
-}
-
-button:focus,
-button:active:focus {
-  outline: none !important;
-}
-</style>

src/components/AppIcon.vue

@@ -57,4 +57,8 @@ export default {
 .size-5 {
   @apply w-5 h-5;
 }
+
+.size-6 {
+  @apply w-6 h-6;
+}
 </style>

src/components/AppLayout.vue

@@ -0,0 +1,142 @@
+<template>
+  <div
+    :class="{
+      [$style.app]: true,
+      [$style.app__osMac]: $options.isMac,
+      [$style.app__osWin]: $options.isWin,
+      [$style.app__layoutLeft_extended]: !isLayoutInverted,
+      [$style.app__layoutRight_extended]: isLayoutInverted,
+    }"
+  >
+    <div
+      :class="{
+        [$style.titleBarSpacer]: true,
+        [$style.titleBarSpacer__osMac]: $options.isMac,
+        [$style.titleBarSpacer__osWin]: $options.isWin,
+      }"
+    />
+    <the-title-bar :class="$style.titleBar" />
+    <the-side-bar :class="$style.sideBar" />
+    <div
+      :class="{
+        [$style.main]: true,
+        [$style.main__sideBarLeft]: !isLayoutInverted,
+        [$style.main__sideBarRight]: isLayoutInverted,
+      }"
+    >
+      <slot name="main" />
+    </div>
+
+    <slot name="overlays" />
+  </div>
+</template>
+
+<script>
+import TheSideBar from '@/components/TheSideBar.vue';
+import TheTitleBar from '@/components/TheTitleBar.vue';
+
+export default {
+  isMac: process.platform === 'darwin',
+  isWin: process.platform !== 'darwin',
+  components: {
+    TheSideBar,
+    TheTitleBar,
+  },
+  computed: {
+    isLayoutInverted() {
+      return this.$store.getters['Settings/byKey']('layout.sideBarLocation') === 'right';
+    },
+  },
+};
+</script>
+
+<style lang="postcss" module>
+@tailwind preflight;
+@tailwind components;
+
+.app {
+  @apply
+    font-sans text-grey
+    bg-black select-none;
+
+  display: grid;
+  grid-template-columns: min-content min-content 1fr min-content min-content;
+  grid-template-rows: 2.4rem auto;
+  height: 100vh;
+}
+
+.app__osMac.app__layoutLeft_extended {
+  grid-template-areas:
+    "space space title title title"
+    "aside aside main  main  main"
+  ;
+}
+
+.app__osMac.app__layoutRight_extended {
+  grid-template-areas:
+    "space space title ..... ....."
+    "main  main  main  aside aside"
+  ;
+}
+
+.app__osWin.app__layoutLeft_extended {
+  grid-template-areas:
+    "title title title space space"
+    "aside aside main  main  main"
+  ;
+}
+
+.app__osWin.app__layoutRight_extended {
+  grid-template-areas:
+    "title title title space space"
+    "main  main  main  aside aside"
+  ;
+}
+
+.titleBarSpacer {
+  grid-area: space;
+  max-width: config('width.64');
+}
+
+.titleBarSpacer__osMac {
+  min-width: 5rem;
+}
+
+.titleBarSpacer__osWin {
+  min-width: config('width.32');
+}
+
+.titleBar {
+  grid-area: title;
+}
+
+.sideBar {
+  @apply flex flex-col overflow-y-auto;
+  grid-area: aside;
+  max-width: config('width.64');
+}
+
+.main {
+  @apply overflow-y-auto bg-grey-darkest;
+  grid-area: main;
+}
+
+.main__sideBarLeft {
+  @apply rounded-tl-sm;
+}
+
+.main__sideBarRight {
+  @apply rounded-tr-sm;
+}
+</style>
+
+<style lang="postcss">
+body {
+  @apply h-screen overflow-hidden bg-black;
+}
+
+button:focus,
+button:active:focus {
+  outline: none !important;
+}
+</style>

src/components/SideBarButton.vue

@@ -0,0 +1,40 @@
+<template>
+  <router-link
+    :active-class="$style.active"
+    :class="$style.btn"
+    :to="to"
+    tag="button"
+  >
+    <app-icon
+      :face="icon"
+      :size="6"
+    />
+  </router-link>
+</template>
+
+<script>
+export default {
+  props: {
+    icon: {
+      type: String,
+      required: true,
+    },
+    to: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<style lang="postcss" module>
+.btn {
+  @apply
+    block w-full p-2
+    text-grey-darkest text-center;
+}
+
+.active {
+  @apply text-grey-darker;
+}
+</style>

src/components/TabHeader.vue

@@ -1,16 +1,8 @@
 <template>
-  <title-bar
-    :indent="isLayoutInverted"
-    area="main"
-  >
-    <title-bar-button
-      icon="home-variant"
-      @click="$emit('goToHome')"
-    />
-    <title-bar-button
-      icon="refresh"
-      @click="$emit('doReload')"
-    />
+  <title-bar>
+    <title-bar-text>
+      {{ pageState.title }}
+    </title-bar-text>
     <title-bar-button
       :disabled="!canGoBack"
       icon="arrow-left"
@@ -21,9 +13,14 @@
       icon="arrow-right"
       @click="$emit('goForward')"
     />
-    <div :class="$style.title">
-      {{ pageState.title }}
-    </div>
+    <title-bar-button
+      icon="refresh"
+      @click="$emit('doReload')"
+    />
+    <title-bar-button
+      icon="home-variant"
+      @click="$emit('goToHome')"
+    />
     <title-bar-button
       icon="code-tags"
       @click="$emit('toggleDevTools')"
@@ -38,11 +35,13 @@
 <script>
 import TitleBar from '@/components/TitleBar.vue';
 import TitleBarButton from '@/components/TitleBarButton.vue';
+import TitleBarText from '@/components/TitleBarText.vue';
 
 export default {
   components: {
     TitleBar,
     TitleBarButton,
+    TitleBarText,
   },
   props: {
     item: {
@@ -68,10 +67,3 @@ export default {
   },
 };
 </script>
-
-<style lang="postcss" module>
-.title {
-  @apply flex-1 p-2 text-sm truncate;
-  -webkit-user-select: none;
-}
-</style>