docs(readme): add readme docs

Author: lucwj

README.md

@@ -1,3 +1,26 @@
 # argon-dashboard-vue3
 
-Argon Dashboard Vue 3 & TailwindCSS - Inspired by Creative Tim
+Argon Dashboard Vue 3, ElementUI & TailwindCSS - Inspired by [Creative Tim](https://www.creative-tim.com/product/vue-argon-dashboard)
+
+## Nice stack (VET)
+
+- [VueJS 3](https://vuejs.org) with well structured
+- [ElementUI](https://element-plus.org/en-US/) for VueJS 3
+- [TailwindCSS 3](https://tailwindcss.com)
+
+## Sponsor
+
+LTV Software
+
+![LTV Software](https://s.gravatar.com/avatar/bf6addc65b990260d9ba27bc1bee92b4?s=100)
+
+## Contributors
+
+- [Dung Le](https://github.com/dzunglee)
+- [Phong Le](https://github.com/LeThanhPhongLTV)
+- [Hieu Dang](https://github.com/Trung-Hieu-Dev)
+- [Kha Huynh](https://github.com/khaht)
+
+## License
+
+[MIT](https://opensource.org/licenses/MIT)

src/assets/css/el-button.scss

@@ -2,168 +2,198 @@ body {
   .el-button {
     background-color: var(--el-button-bg-color, var(--el-color-white));
     @apply transition-all duration-100 shadow-button;
+
     span {
       @apply px-1.5;
     }
+
     &:hover {
       @apply -translate-y-px;
     }
   }
+
   .el-button.el-button--large {
     @apply h-[51px] rounded-md font-semibold text-sm tracking-wide px-[11px] #{!important};
   }
+
   .el-button.el-button--small {
     @apply rounded text-xs font-semibold tracking-wide p-0.5 py-3.25 #{!important};
   }
+
   .el-button.el-button--default.el-button--small {
     @apply rounded max-w-fit h-[25px] #{!important};
   }
 
   .el-button.el-button--default.is-plain {
     @apply bg-transparent text-dark border-dark shadow-none;
+
     &:hover {
       @apply bg-dark text-white drop-shadow-lg;
     }
+
     &:active {
       @apply drop-shadow-none;
     }
   }
 
   .el-button.el-button--primary.is-plain {
     @apply bg-transparent text-indigo-410 border-indigo-410 shadow-none #{!important};
+
     &:hover {
       @apply bg-indigo-410 text-white drop-shadow-lg #{!important};
     }
+
     &:active {
       @apply drop-shadow-none #{!important};
     }
   }
 
   .el-button.el-button--secondary.is-plain {
     @apply bg-transparent text-secondary-text border-slate-50 shadow-none #{!important};
+
     &:hover {
       @apply bg-slate-50 text-black drop-shadow-md border-slate-50 #{!important};
     }
+
     &:active {
       @apply drop-shadow-none bg-secondary #{!important};
     }
   }
 
   .el-button.el-button--success.is-plain {
     @apply bg-transparent text-success border-success shadow-none #{!important};
+
     &:hover {
       @apply bg-success text-white drop-shadow-lg border-success #{!important};
     }
+
     &:active {
       @apply drop-shadow-none #{!important};
     }
   }
 
   .el-button.el-button--warning.is-plain {
     @apply bg-transparent text-warning border-warning shadow-none #{!important};
+
     &:hover {
       @apply bg-warning text-white drop-shadow-lg border-warning #{!important};
     }
+
     &:active {
       @apply drop-shadow-none #{!important};
     }
   }
 
   .el-button.el-button--info.is-plain {
     @apply bg-transparent text-info border-info shadow-none #{!important};
+
     &:hover {
       @apply bg-info text-white drop-shadow-lg border-info #{!important};
     }
+
     &:active {
       @apply drop-shadow-none #{!important};
     }
   }
 
   .el-button.el-button--danger.is-plain {
     @apply bg-transparent text-danger border-danger shadow-none #{!important};
+
     &:hover {
       @apply bg-danger text-white drop-shadow-lg border-danger #{!important};
     }
+
     &:active {
       @apply drop-shadow-none #{!important};
     }
   }
 
   .el-button.el-button--primary {
     @apply bg-indigo-410 border border-indigo-410 text-white #{!important};
+
     span {
       @apply px-1.25;
     }
+
     &:active {
       @apply bg-primary-blue shadow-none #{!important};
     }
   }
 
   .el-button.el-button--info {
     @apply bg-info border border-info text-white #{!important};
+
     &:active {
       @apply bg-info-active shadow-none #{!important};
     }
   }
+
   .el-button.el-button--info.active {
     @apply bg-info-active #{!important};
   }
 
   .el-button.el-button--warning {
     @apply bg-warning border border-warning text-white #{!important};
+
     &:active {
       @apply bg-warning-active shadow-none #{!important};
     }
   }
+
   .el-button.el-button--warning.active {
     @apply bg-warning-active #{!important};
   }
 
   .el-button.el-button--success {
     @apply bg-success border border-success text-white #{!important};
+
     &:active {
       @apply bg-success-active shadow-none #{!important};
     }
   }
+
   .el-button.el-button--success.active {
     @apply bg-success-active #{!important};
   }
 
   .el-button.el-button--danger {
     @apply bg-danger border border-danger text-white #{!important};
+
     &:active {
       @apply bg-danger-active shadow-none #{!important};
     }
   }
+
   .el-button.el-button--danger.active {
     @apply bg-danger-active #{!important};
   }
 
   .el-button.el-button--secondary {
     @apply shadow-button;
-    @apply bg-secondary border border-secondary text-black  #{!important};
+    @apply bg-secondary border border-secondary text-black #{!important};
+
     &:hover {
       @apply shadow-md #{!important};
     }
+
     &:active {
       @apply shadow-none border-secondary bg-secondary-active #{!important};
     }
   }
+
   .el-button.el-button--secondary.active {
     @apply bg-secondary-active border-secondary-active #{!important};
   }
 
   .el-button.el-button--default {
     @apply transition-all duration-100 bg-dark border border-dark text-white font-semibold h-10.75 text-sm tracking-wide;
+
     span {
       @apply px-1.25;
     }
+
     &:active {
       @apply bg-dark-120 shadow-none;
     }
   }
-  .el-button.el-button--secondary.active {
-    @apply bg-dark-120;
-  }
-
-}
+}

src/components/Sidebar/index.vue

@@ -229,6 +229,13 @@ export default defineComponent({
     const leftSideBarItems = ref<any[]>(['Dashboard', 'Profile', 'Map'])
     const isMenuShow = ref<boolean>(false)
 
+    const handleOnResize = () => {
+        if (window.innerWidth < 1024) {
+          store.dashboard.setIsSBOpen(false)
+          store.dashboard.setIsSBPin(false)
+        }
+      }
+
     onClickOutside(target, (_) => {
       if (window.innerWidth < 1024) store.dashboard.setIsSBOpen(false)
     })
@@ -239,16 +246,11 @@ export default defineComponent({
       }
     })
     onMounted(() => {
-      window.addEventListener('resize', () => {
-        if (window.innerWidth < 1024) {
-          store.dashboard.setIsSBOpen(false)
-          store.dashboard.setIsSBPin(false)
-        }
-      })
+      window.addEventListener('resize', handleOnResize)
     })
 
     onUnmounted(() => {
-      window.removeEventListener('resize', () => {})
+      window.removeEventListener('resize', handleOnResize)
     })
 
     const isSBPin = computed<boolean>(() => store.dashboard.isSBPin)

src/modules/auth/views/forgot-password.vue

@@ -27,7 +27,7 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, computed, ref } from 'vue'
+import { defineComponent, computed } from 'vue'
 import useStore from 'store'
 import SplitBackground from './components/SplitBackground.vue'
 import FortgotPasswordForm from './components/ForgotPasswordForm.vue'