Feat/top bar (epicmaxco#691)

* feat: topbar

* fix eslint warnings

* add layout settings as top-bar

* fix app-page-layout

* enable top-bar in app

* update app-topbar link group. fix topbar styles

* fix active links styles in topbar

* remove unnecessary css resource imports

* update layout calc

* replace build information meta to console

* fix app layout

* fix topbar link styles

* create top-bar submenu

* hide navbar menu icon with topbar

* update styles for topbar links

* fix hover and active styles for top-bar link-group-item

* fix top-bar in small size

* fix top-bar menu item hover styles

* fix top-bar items active state styles

* fix autochange minimized sidebar in app-layout

* fix app-layout bugs

* remove unused orig files

* remove unnecessary row from app-navbar

* add app-sidebar-link and link-group from vuestic-ui

* fix app-sidebar sizes

.gitignore

@@ -21,3 +21,4 @@ inspect.js
 *.njsproj
 *.sln
 *.sw*
+*.orig

src/app/main.js

@@ -16,6 +16,13 @@ import VueClipboard from 'vue-clipboard2'
 import '../metrics'
 import '../registerServiceWorker'
 
+if (process.env.VUE_APP_BUILD_VERSION) {
+  console.info( // eslint-disable-next-line no-undef
+    `%c${'Build_information:'}\n %c${'Version'}: %c${VERSION},\n %c${'Timestamp'}: %c${TIMESTAMP},\n %c${'Commit'}: %c${COMMIT}`,
+    'color: blue;', 'color: red;', 'color: blue;', 'color: red;', 'color: blue;', 'color: red;', 'color: blue;',
+  )
+}
+
 Vue.use(VuesticPlugin)
 Vue.use(YmapPlugin)
 Vue.use(VueClipboard)

src/components/admin/AppLayout.vue

@@ -1,41 +1,59 @@
 <template>
-  <va-page-layout
-    @toggleSidebar="toggleSidebar"
-    :mobileWidth="mobileWidth"
+  <app-page-layout
+    class="app-layout"
+    :is-top-bar.sync="isTopBar"
+    :minimized.sync="minimized"
+    :mobile-width="mobileWidth"
   >
     <app-navbar
+      class="app-layout__navbar"
+      :is-top-bar.sync="isTopBar"
       :minimized.sync="minimized"
     />
-    <app-sidebar
-      :minimized="minimized"
+    <app-topbar
+      class="app-layout__topbar"
+      v-if="isTopBar"
     />
-    <main
-      slot="content"
-      id="content"
-      class="layout gutter--xl fluid"
-      :class="{'app-layout__main--full-width-sidebar': !minimized}"
-      role="main"
-    >
-      <router-view/>
-    </main>
-  </va-page-layout>
+    <div class="app-layout__container">
+      <app-sidebar
+        class="app-layout__sidebar"
+        v-if="!isTopBar"
+        :minimized="minimized"
+      />
+      <div
+        class="app-layout__main"
+        :class="{'app-layout__main--top': isTopBar}"
+      >
+        <main
+          class="app-layout__main-layout layout fluid gutter--xl"
+          slot="content"
+          role="main"
+        >
+          <router-view/>
+        </main>
+      </div>
+    </div>
+  </app-page-layout>
 </template>
 
 <script>
-import VaPageLayout from './VaPageLayout'
+import AppPageLayout from './AppPageLayout'
 import AppNavbar from './app-navbar/AppNavbar'
+import AppTopbar from './app-topbar/AppTopbar'
 import AppSidebar from './app-sidebar/AppSidebar'
 import { mapGetters } from 'vuex'
 
 export default {
   name: 'app-layout',
   components: {
-    VaPageLayout,
+    AppPageLayout,
     AppNavbar,
+    AppTopbar,
     AppSidebar,
   },
   data () {
     return {
+      isTopBar: false,
       minimized: false,
       mobileWidth: 767,
     }
@@ -45,22 +63,49 @@ export default {
       'isLoading',
     ]),
   },
-  methods: {
-    toggleSidebar (minimized) {
-      this.minimized = minimized
-    },
-  },
 }
 </script>
 
 <style lang="scss">
-  .app-layout {
-    &__main {
-      &--full-width-sidebar {
-        @include media-breakpoint-down(xs) {
-          display: none;
-        }
-      }
+
+.app-layout {
+  display: flex;
+  flex-direction: column;
+
+  &__container {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: stretch;
+    height: 100%;
+  }
+
+  &__sidebar {
+  }
+
+  &__main {
+    box-sizing: border-box;
+    width: 100%;
+    position: relative;
+    max-height: 100%;
+    min-height: 100%;
+
+    &--top {
+    }
+
+    &-layout {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      bottom: 0;
+      overflow: auto;
+      box-sizing: border-box;
+      min-height: 100%;
+      margin: 0;
     }
   }
+
+  &__topbar {
+  }
+}
 </style>

src/components/admin/AppPageLayout.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="app-page-layout">
+    <slot></slot>
+    <slot name="content" />
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'app-page-layout',
+  props: {
+    mobileWidth: {
+      type: Number,
+      default: 767,
+    },
+  },
+  mounted () {
+    window.addEventListener('resize', () => this.updateSidebarState())
+
+    this.updateSidebarState()
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', () => this.updateSidebarState())
+  },
+  methods: {
+    checkIsDesktop () {
+      return window.matchMedia(`(min-width: ${this.mobileWidth}px)`).matches
+    },
+    updateSidebarState () {
+      if (this.checkIsDesktop()) {
+        this.$emit('update:minimized', false)
+      } else {
+        this.$emit('update:minimized', true)
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+
+.app-page-layout {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  height: 100vh;
+
+  .content-wrap {
+    transition: margin-left 0.3s ease;
+    padding: 0;
+    margin-left: 0 !important;
+  }
+}
+</style>