adm_tueit/TueIT_App
2
0
Fork 0
Code Issues 3 Pull Requests 3 Packages Projects Releases Wiki Activity

changed all files to composition API

Browse Source
This commit is contained in:
selina.mail
2023-12-05 11:24:35 +01:00
parent 90a86fb3af
commit de6b7e6eaa
53 changed files with 1244 additions and 1283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
layouts/Navigationbar.vue
View File

@ -6,7 +6,7 @@
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/Back-Icon.svg" />
</div>
<div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
@click="toggleSidebar">
@click="ToggleSidebar">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
</div>
@ -23,28 +23,32 @@
</router-link>
</nav>
<nav id="site-menu">
<router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="checklists-button">
<router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
id="checklists-button">
<div class="icon" id="checklists-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/navbar-icons/Checklists-Icon.svg" />
</div>
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklists</span>
</router-link>
<router-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="assets-button">
<router-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
id="assets-button">
<div class="icon" id="assets-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/navbar-icons/Assets-Icon.svg" />
</div>
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Config Items</span>
</router-link>
<router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="solutions-button">
<router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
id="solutions-button">
<div class="icon" id="solutions-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/navbar-icons/Solutions-Icon.svg" />
</div>
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</span>
</router-link>
<router-link to="/issueSlips" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="accounting-button">
<router-link to="/issueSlips" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
id="accounting-button">
<div class="icon" id="accounting-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/navbar-icons/Accounting-Icon.svg" />
@ -66,22 +70,22 @@
<script setup>
import { ref } from 'vue';
const darkMode = ref(true)
const isExpanded = ref(true)
const ToggleSidebar = () => {
isExpanded.value = !isExpanded.value;
};
</script>
<script>
export default {
name: "Navigationbar",
data() {
return {
darkMode: true,
isExpanded: true,
};
},
methods: {
toggleSidebar() {
this.isExpanded = !this.isExpanded;
}
}
}
</script>
@ -263,5 +267,4 @@ img {
.label-lightmode {
color: #000000;
}
</style>
}</style>