From 9746806e661d5d300f419b8d3a4d5b11445ea3ce Mon Sep 17 00:00:00 2001
From: Viktor Kuzhelnyi <viktor@marketto.ru>
Date: Tue, 5 Oct 2021 18:35:36 +0500
Subject: [PATCH] v1.3.0

---
 README.md                                  | 15 ++++++++-------
 package-lock.json                          |  4 ++--
 package.json                               |  2 +-
 src/components/AsideMenu.vue               |  8 ++++----
 src/components/AsideMenuItem.vue           |  4 ++++
 src/components/BottomOtherPagesSection.vue |  5 ++++-
 src/components/FooterBar.vue               |  5 +++--
 src/components/FullScreenSection.vue       |  4 ----
 src/components/HeroBar.vue                 | 22 +++++++++++++++++++---
 src/components/MainSection.vue             |  6 +++---
 src/components/NavBar.vue                  |  2 +-
 src/css/_app.css                           |  2 +-
 src/main.js                                |  5 +++--
 src/menu.js                                |  8 +++++---
 src/router/index.js                        |  4 ++--
 src/store/index.js                         | 10 +++++-----
 src/views/Responsive.vue                   |  6 +++---
 17 files changed, 68 insertions(+), 44 deletions(-)

diff --git a/README.md b/README.md
index c9ff48ad..bd795c65 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,13 @@
-# [Admin One &mdash; Free Vue.js 3 Tailwind Admin Dashboard](https://justboil.me/tailwind-admin-templates)
+# [Admin One &mdash; Free Vue.js 3 Tailwind Admin Dashboard with dark mode](https://justboil.me/tailwind-admin-templates/free-vue-dashboard)
 
-[![version](https://img.shields.io/github/v/release/justboil/admin-one-vue-tailwind?1.1.0)](https://justboil.me/tailwind-admin-templates)  [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://justboil.me/tailwind-admin-templates)
+[![version](https://img.shields.io/github/v/release/justboil/admin-one-vue-tailwind?1.1.0)](https://justboil.me/tailwind-admin-templates/free-vue-dashboard)  [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://justboil.me/tailwind-admin-templates)
 
-[![Free Vue 3 Tailwind CSS admin dashboard](https://justboil.me/images/one-vue3-tailwind/repository-preview-hi-res.png)](https://justboil.github.io/admin-one-vue-tailwind/)
+[![Free Vue 3 Tailwind CSS admin dashboard](https://justboil.me/images/one-vue3-tailwind/repository-preview-hi-res.png?v=1.3)](https://justboil.github.io/admin-one-vue-tailwind/)
 
 **Admin One** is simple, beautiful and free Vue.js 3 Tailwind CSS admin dashboard
 
 * Built with **Vue.js 3**, **Tailwind CSS** framework & **Composition API** 
+* **Dark mode**
 * SPA with **Vuex** & **Router**
 * **Production CSS** is only **27kb**
 * Reusable components
@@ -19,21 +20,21 @@
 
 Mobile layout with hidden aside menu and collapsable cards & tables
 
-[![Free Vue 3 Tailwind CSS admin dashboard](https://justboil.me/images/one-tailwind/repository-preview-m-hi-res.png)](https://justboil.github.io/admin-one-vue-tailwind/)
+[![Free Vue 3 Tailwind CSS admin dashboard](https://justboil.me/images/one-tailwind/repository-preview-m-hi-res.png?v=1.3)](https://justboil.github.io/admin-one-vue-tailwind/)
 
 ### Small laptops 1024px
 
 Small laptop layout with show/hide aside menu option
 
-[![Free Vue 3 Tailwind CSS admin dashboard](https://justboil.me/images/one-tailwind/repository-preview-1024.png)](https://justboil.github.io/admin-one-vue-tailwind/)
+[![Free Vue 3 Tailwind CSS admin dashboard](https://justboil.me/images/one-tailwind/repository-preview-1024.png?v=1.3)](https://justboil.github.io/admin-one-vue-tailwind/)
 
-[![Free Vue 3 Tailwind CSS admin dashboard](https://justboil.me/images/one-tailwind/repository-preview-1024-menu.png)](https://justboil.github.io/admin-one-vue-tailwind/)
+[![Free Vue 3 Tailwind CSS admin dashboard](https://justboil.me/images/one-tailwind/repository-preview-1024-menu.png?v=1.3)](https://justboil.github.io/admin-one-vue-tailwind/)
 
 ### Laptops & desktops
 
 Classic layout with aside menus on the left
 
-[![Free Vue 3 Tailwind CSS admin dashboard](https://justboil.me/images/one-tailwind/repository-preview-no-libs.png)](https://justboil.github.io/admin-one-vue-tailwind/)
+[![Free Vue 3 Tailwind CSS admin dashboard](https://justboil.me/images/one-tailwind/repository-preview-no-libs.png?v=1.3)](https://justboil.github.io/admin-one-vue-tailwind/)
 
 ## Table of Contents
 
diff --git a/package-lock.json b/package-lock.json
index 7e6b99b1..3547b79d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "admin-one-vue-tailwind",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "admin-one-vue-tailwind",
-      "version": "1.2.1",
+      "version": "1.3.0",
       "dependencies": {
         "@mdi/js": "^5.9.55",
         "axios": "^0.21.1",
diff --git a/package.json b/package.json
index 03ed079a..7b3e4241 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "admin-one-vue-tailwind",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
diff --git a/src/components/AsideMenu.vue b/src/components/AsideMenu.vue
index 198688b6..1b495e97 100644
--- a/src/components/AsideMenu.vue
+++ b/src/components/AsideMenu.vue
@@ -1,8 +1,8 @@
 <template>
   <aside
-    v-show="!isFormScreen"
+    v-show="!isFullScreen"
     class="w-60 fixed top-0 z-40 h-screen bg-gray-800 transition-position lg:left-0 overflow-y-scroll
-    scrollbar-thin scrollbar-thumb-gray-600 scrollbar-track-gray-900 hover:scrollbar-thumb-gray-900
+    scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-gray-600 scrollbar-track-gray-900
     dark:scrollbar-track-gray-800 dark:bg-gray-900"
     :class="[ isAsideMobileExpanded ? 'left-0' : '-left-60', isAsideLgActive ? 'block' : 'lg:hidden xl:block' ]"
   >
@@ -50,7 +50,7 @@ export default {
   setup () {
     const store = useStore()
 
-    const isFormScreen = computed(() => store.state.isFormScreen)
+    const isFullScreen = computed(() => store.state.isFullScreen)
 
     const isAsideMobileExpanded = computed(() => store.state.isAsideMobileExpanded)
 
@@ -65,7 +65,7 @@ export default {
     }
 
     return {
-      isFormScreen,
+      isFullScreen,
       isAsideMobileExpanded,
       isAsideLgActive,
       asideLgClose,
diff --git a/src/components/AsideMenuItem.vue b/src/components/AsideMenuItem.vue
index ddd1b222..72bec6e2 100644
--- a/src/components/AsideMenuItem.vue
+++ b/src/components/AsideMenuItem.vue
@@ -4,6 +4,7 @@
       :is="componentIs"
       :to="itemTo"
       :href="itemHref"
+      :target="itemTarget"
       exact-active-class="bg-gray-700 dark:bg-gray-800"
       class="flex text-gray-300 cursor-pointer hover:bg-gray-700 dark:hover:bg-gray-700"
       :class="[isSubmenuList ? 'p-3 text-sm' : 'py-2']"
@@ -51,6 +52,8 @@ export default {
 
     const itemHref = computed(() => props.item.href || null)
 
+    const itemTarget = computed(() => componentIs.value === 'a' && props.item.target ? props.item.target : null)
+
     const menuClick = event => {
       emit('menu-click', event, props.item)
 
@@ -66,6 +69,7 @@ export default {
       dropdownIcon,
       itemTo,
       itemHref,
+      itemTarget,
       menuClick
     }
   }
diff --git a/src/components/BottomOtherPagesSection.vue b/src/components/BottomOtherPagesSection.vue
index 4499bfa1..59e9e81d 100644
--- a/src/components/BottomOtherPagesSection.vue
+++ b/src/components/BottomOtherPagesSection.vue
@@ -11,7 +11,7 @@
           <span>GitHub</span>
         </a>
     </h1>
-    <h1 class="text-2xl text-gray-500 dark:text-gray-400">
+    <h1 class="text-2xl text-gray-500 dark:text-gray-400 mb-12">
       Check out other components and layouts at<br>
       <template v-for="(screen, index) in screens" :key="screen.path">
         <router-link
@@ -23,6 +23,9 @@
       <br>
       screen samples
     </h1>
+    <h1 class="text-2xl text-gray-500 dark:text-gray-400">
+      Get more with <a href="https://justboil.me/tailwind-admin-templates/vue-dashboard" target="_blank" class="text-blue-500">Premium version</a>
+    </h1>
   </titled-section>
 </template>
 
diff --git a/src/components/FooterBar.vue b/src/components/FooterBar.vue
index 3ed02b58..74f9df36 100644
--- a/src/components/FooterBar.vue
+++ b/src/components/FooterBar.vue
@@ -2,7 +2,8 @@
   <footer v-show="isFooterBarVisible" class="bg-white py-2 px-6 dark:bg-gray-900">
     <level>
       <div>
-        <b>&copy; {{ year }}, JustBoil.me</b> &mdash; Admin One Demo
+        <b>&copy; {{ year }}, JustBoil.me</b>.
+        Get more with <a href="https://justboil.me/tailwind-admin-templates/vue-dashboard" target="_blank" class="text-blue-500">Premium version</a>
       </div>
       <div class="md:py-2">
       <a href="https://justboil.me">
@@ -30,7 +31,7 @@ export default {
 
     const year = computed(() => new Date().getFullYear())
 
-    const isFooterBarVisible = computed(() => !store.state.isFormScreen)
+    const isFooterBarVisible = computed(() => !store.state.isFullScreen)
 
     return {
       year,
diff --git a/src/components/FullScreenSection.vue b/src/components/FullScreenSection.vue
index ddc86697..fa07f72e 100644
--- a/src/components/FullScreenSection.vue
+++ b/src/components/FullScreenSection.vue
@@ -41,7 +41,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-
-</style>
diff --git a/src/components/HeroBar.vue b/src/components/HeroBar.vue
index 7d412b8f..11015e9c 100644
--- a/src/components/HeroBar.vue
+++ b/src/components/HeroBar.vue
@@ -4,13 +4,19 @@
       <h1 class="text-3xl font-semibold leading-tight">
         <slot />
       </h1>
-      <jb-button href="https://tailwind-vue.justboil.me/" target="_blank" label="Premium version" :icon="mdiMonitorClean" />
+      <jb-button
+        :label="darkMode ? 'Light Mode' : 'Dark Mode'"
+        :icon="mdiThemeLightDark"
+        @click="darkModeToggle"
+      />
     </level>
   </section>
 </template>
 
 <script>
-import { mdiMonitorClean } from '@mdi/js'
+import { mdiThemeLightDark } from '@mdi/js'
+import { useStore } from 'vuex'
+import { computed } from 'vue'
 import Level from '@/components/Level'
 import JbButton from '@/components/JbButton'
 
@@ -21,8 +27,18 @@ export default {
     JbButton
   },
   setup () {
+    const store = useStore()
+
+    const darkMode = computed(() => store.state.darkMode)
+
+    const darkModeToggle = () => {
+      store.dispatch('darkMode')
+    }
+
     return {
-      mdiMonitorClean
+      darkMode,
+      darkModeToggle,
+      mdiThemeLightDark
     }
   }
 }
diff --git a/src/components/MainSection.vue b/src/components/MainSection.vue
index 015e9728..febfcdcd 100644
--- a/src/components/MainSection.vue
+++ b/src/components/MainSection.vue
@@ -1,7 +1,7 @@
 <template>
   <section
     class="px-0 md:px-6"
-    :class="[ isFormScreen ? 'flex h-screen items-center justify-center' : 'py-6' ]"
+    :class="[ isFullScreen ? 'flex h-screen items-center justify-center' : 'py-6' ]"
   >
     <slot/>
   </section>
@@ -16,10 +16,10 @@ export default {
   setup () {
     const store = useStore()
 
-    const isFormScreen = computed(() => store.state.isFormScreen)
+    const isFullScreen = computed(() => store.state.isFullScreen)
 
     return {
-      isFormScreen
+      isFullScreen
     }
   }
 }
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 96f482bc..ad0fec1c 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -126,7 +126,7 @@ export default {
       store.dispatch('darkMode')
     }
 
-    const isNavBarVisible = computed(() => !store.state.isFormScreen)
+    const isNavBarVisible = computed(() => !store.state.isFullScreen)
 
     const isAsideMobileExpanded = computed(() => store.state.isAsideMobileExpanded)
 
diff --git a/src/css/_app.css b/src/css/_app.css
index 38244848..cffaefbe 100644
--- a/src/css/_app.css
+++ b/src/css/_app.css
@@ -14,6 +14,6 @@ body {
   @apply overflow-hidden lg:overflow-visible;
 }
 
-.form-screen body {
+.full-screen body {
   @apply p-0;
 }
diff --git a/src/main.js b/src/main.js
index 5b85aac5..da601c81 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,7 +10,8 @@ import './css/main.css'
 store.dispatch('fetch', 'clients')
 store.dispatch('fetch', 'history')
 
-store.dispatch('darkMode')
+/* Dark mode */
+// store.dispatch('darkMode')
 
 /* Default title tag */
 const defaultDocumentTitle = 'Admin One Vue 3 Tailwind'
@@ -20,7 +21,7 @@ router.beforeEach(to => {
   store.dispatch('asideMobileToggle', false)
   store.dispatch('asideLgToggle', false)
 
-  store.dispatch('formScreenToggle', !!to.meta.formScreen)
+  store.dispatch('fullScreenToggle', !!to.meta.fullScreen)
 })
 
 router.afterEach(to => {
diff --git a/src/menu.js b/src/menu.js
index 1cedcc5b..94c27e8c 100644
--- a/src/menu.js
+++ b/src/menu.js
@@ -76,14 +76,16 @@ export default [
   'About',
   [
     {
-      href: 'https://tailwind-vue.justboil.me/',
+      href: 'https://justboil.me/tailwind-admin-templates/vue-dashboard',
       label: 'Premium version',
-      icon: mdiMonitorClean
+      icon: mdiMonitorClean,
+      target: '_blank'
     },
     {
       href: 'https://github.com/justboil/admin-one-vue-tailwind',
       label: 'GitHub',
-      icon: mdiGithub
+      icon: mdiGithub,
+      target: '_blank'
     }
   ]
 ]
diff --git a/src/router/index.js b/src/router/index.js
index b6c26550..e04546a2 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -58,7 +58,7 @@ const routes = [
   {
     meta: {
       title: 'Login',
-      formScreen: true
+      fullScreen: true
     },
     path: '/login',
     name: 'login',
@@ -67,7 +67,7 @@ const routes = [
   {
     meta: {
       title: 'Error',
-      formScreen: true
+      fullScreen: true
     },
     path: '/error',
     name: 'error',
diff --git a/src/store/index.js b/src/store/index.js
index 2057d0f7..7c27a0e4 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -8,8 +8,8 @@ export default createStore({
     userEmail: null,
     userAvatar: null,
 
-    /* FormScreen - fullscreen form layout (e.g. login page) */
-    isFormScreen: false,
+    /* fullScreen - fullscreen form layout (e.g. login page) */
+    isFullScreen: false,
 
     /* Aside */
     isAsideMobileExpanded: false,
@@ -59,10 +59,10 @@ export default createStore({
       commit('basic', { key: 'isAsideLgActive', value: payload !== null ? payload : !state.isAsideLgActive })
     },
 
-    formScreenToggle ({ commit, state }, value) {
-      commit('basic', { key: 'isFormScreen', value })
+    fullScreenToggle ({ commit, state }, value) {
+      commit('basic', { key: 'isFullScreen', value })
 
-      document.documentElement.classList[value ? 'add' : 'remove']('form-screen')
+      document.documentElement.classList[value ? 'add' : 'remove']('full-screen')
     },
 
     darkMode ({ commit, state }) {
diff --git a/src/views/Responsive.vue b/src/views/Responsive.vue
index 75bdd536..c07b4c82 100644
--- a/src/views/Responsive.vue
+++ b/src/views/Responsive.vue
@@ -24,7 +24,7 @@
   <main-section>
     <div class="md:w-10/12 shadow-2xl md:mx-auto rounded-3xl border-8 border-white overflow-hidden">
       <img
-        src="https://justboil.me/images/one-tailwind/repository-preview-1024.png"
+        src="https://justboil.me/images/one-tailwind/repository-preview-1024.png?v=1.3"
         class="block"
       >
     </div>
@@ -33,7 +33,7 @@
   <main-section>
     <div class="md:w-10/12 shadow-2xl md:mx-auto rounded-3xl border-8 border-white overflow-hidden">
       <img
-        src="https://justboil.me/images/one-tailwind/repository-preview-1024-menu.png"
+        src="https://justboil.me/images/one-tailwind/repository-preview-1024-menu.png?v=1.3"
         class="block"
       >
     </div>
@@ -46,7 +46,7 @@
   <main-section>
     <div class="md:w-10/12 shadow-2xl md:mx-auto rounded-3xl border-8 border-white overflow-hidden">
       <img
-        src="https://justboil.me/images/one-tailwind/repository-preview-no-libs.png"
+        src="https://justboil.me/images/one-tailwind/repository-preview-no-libs.png?v=1.3"
         class="block"
       >
     </div>