|
1 | 1 | <!-- |
2 | 2 | ========================================================= |
3 | | -* Vue Argon Dashboard 2 - v3.0.1 |
| 3 | +* Vue Argon Dashboard 2 - v4.0.0 |
4 | 4 | ========================================================= |
5 | 5 |
|
6 | 6 | * Product Page: https://creative-tim.com/product/vue-argon-dashboard |
7 | | -* Copyright 2023 Creative Tim (https://www.creative-tim.com) |
| 7 | +* Copyright 2024 Creative Tim (https://www.creative-tim.com) |
8 | 8 |
|
9 | 9 | Coded by www.creative-tim.com |
10 | 10 |
|
11 | 11 | ========================================================= |
12 | 12 |
|
13 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. |
14 | 14 | --> |
| 15 | +<script setup> |
| 16 | +import { computed } from "vue"; |
| 17 | +import { useStore } from "vuex"; |
| 18 | +import Sidenav from "./examples/Sidenav"; |
| 19 | +import Configurator from "@/examples/Configurator.vue"; |
| 20 | +import Navbar from "@/examples/Navbars/Navbar.vue"; |
| 21 | +import AppFooter from "@/examples/Footer.vue"; |
15 | 22 |
|
| 23 | +const store = useStore(); |
| 24 | +const isNavFixed = computed(() => store.state.isNavFixed); |
| 25 | +const darkMode = computed(() => store.state.darkMode); |
| 26 | +const isAbsolute = computed(() => store.state.isAbsolute); |
| 27 | +const showSidenav = computed(() => store.state.showSidenav); |
| 28 | +const layout = computed(() => store.state.layout); |
| 29 | +const showNavbar = computed(() => store.state.showNavbar); |
| 30 | +const showFooter = computed(() => store.state.showFooter); |
| 31 | +const showConfig = computed(() => store.state.showConfig); |
| 32 | +const hideConfigButton = computed(() => store.state.hideConfigButton); |
| 33 | +const toggleConfigurator = () => store.commit("toggleConfigurator"); |
| 34 | +
|
| 35 | +const navClasses = computed(() => { |
| 36 | + return { |
| 37 | + "position-sticky bg-white left-auto top-2 z-index-sticky": |
| 38 | + isNavFixed.value && !darkMode.value, |
| 39 | + "position-sticky bg-default left-auto top-2 z-index-sticky": |
| 40 | + isNavFixed.value && darkMode.value, |
| 41 | + "position-absolute px-4 mx-0 w-100 z-index-2": isAbsolute.value, |
| 42 | + "px-0 mx-4": !isAbsolute.value, |
| 43 | + }; |
| 44 | +}); |
| 45 | +</script> |
16 | 46 | <template> |
17 | | - |
18 | 47 | <div |
19 | | - v-show="this.$store.state.layout === 'landing'" |
| 48 | + v-show="layout === 'landing'" |
20 | 49 | class="landing-bg h-100 bg-gradient-primary position-fixed w-100" |
21 | 50 | ></div> |
22 | 51 |
|
23 | | - <sidenav |
24 | | - :custom_class="this.$store.state.mcolor" |
25 | | - :class="[ |
26 | | - this.$store.state.isTransparent, |
27 | | - this.$store.state.isRTL ? 'fixed-end' : 'fixed-start', |
28 | | - ]" |
29 | | - v-if="this.$store.state.showSidenav" |
30 | | - /> |
| 52 | + <sidenav v-if="showSidenav" /> |
31 | 53 |
|
32 | 54 | <main |
33 | 55 | class="main-content position-relative max-height-vh-100 h-100 border-radius-lg" |
34 | 56 | > |
35 | | - |
36 | 57 | <!-- nav --> |
37 | 58 |
|
38 | | - <navbar |
39 | | - :class="[navClasses]" |
40 | | - :textWhite=" |
41 | | - this.$store.state.isAbsolute ? 'text-white opacity-8' : 'text-white' |
42 | | - " |
43 | | - :minNav="navbarMinimize" |
44 | | - v-if="this.$store.state.showNavbar" |
45 | | - /> |
| 59 | + <navbar :class="[navClasses]" v-if="showNavbar" /> |
46 | 60 |
|
47 | 61 | <router-view /> |
48 | 62 |
|
49 | | - <app-footer v-show="this.$store.state.showFooter" /> |
| 63 | + <app-footer v-show="showFooter" /> |
50 | 64 |
|
51 | 65 | <configurator |
52 | 66 | :toggle="toggleConfigurator" |
53 | | - :class="[ |
54 | | - this.$store.state.showConfig ? 'show' : '', |
55 | | - this.$store.state.hideConfigButton ? 'd-none' : '', |
56 | | - ]" |
| 67 | + :class="[showConfig ? 'show' : '', hideConfigButton ? 'd-none' : '']" |
57 | 68 | /> |
58 | | - |
59 | 69 | </main> |
60 | | - |
61 | 70 | </template> |
62 | | - |
63 | | -<script> |
64 | | -import Sidenav from "./examples/Sidenav"; |
65 | | -import Configurator from "@/examples/Configurator.vue"; |
66 | | -import Navbar from "@/examples/Navbars/Navbar.vue"; |
67 | | -import AppFooter from "@/examples/Footer.vue"; |
68 | | -import { mapMutations } from "vuex"; |
69 | | -
|
70 | | -export default { |
71 | | - name: "App", |
72 | | - components: { |
73 | | - Sidenav, |
74 | | - Configurator, |
75 | | - Navbar, |
76 | | - AppFooter, |
77 | | - }, |
78 | | - methods: { |
79 | | - ...mapMutations(["toggleConfigurator", "navbarMinimize"]), |
80 | | - }, |
81 | | - computed: { |
82 | | - navClasses() { |
83 | | - return { |
84 | | - "position-sticky bg-white left-auto top-2 z-index-sticky": |
85 | | - this.$store.state.isNavFixed && !this.$store.state.darkMode, |
86 | | - "position-sticky bg-default left-auto top-2 z-index-sticky": |
87 | | - this.$store.state.isNavFixed && this.$store.state.darkMode, |
88 | | - "position-absolute px-4 mx-0 w-100 z-index-2": this.$store.state |
89 | | - .isAbsolute, |
90 | | - "px-0 mx-4": !this.$store.state.isAbsolute, |
91 | | - }; |
92 | | - }, |
93 | | - }, |
94 | | - beforeMount() { |
95 | | - this.$store.state.isTransparent = "bg-transparent"; |
96 | | - }, |
97 | | -}; |
98 | | -</script> |
99 | | - |
0 commit comments