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

smoothed out navbar slide (unfinished)

Browse Source
This commit is contained in:
Johanna Kuehner
2024-02-23 21:58:32 +01:00
parent 8a77f18237
commit e4aa11b902
4 changed files with 216 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app.vue
View File

@ -19,12 +19,13 @@
* { * {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
padding: 0;
} }
html, template, body, #__nuxt, #__layout { html, template, body, #__nuxt, #__layout {
height: 100vh; min-height: 100vh;
width: 100vw; width: 100vw;
height: 100%; min-height: 100%;
width: 100%; width: 100%;
background-color: #212121; background-color: #212121;
font-size: 1rem; font-size: 1rem;

141
layouts/Actionbar.vue
View File

@ -1,16 +1,12 @@
<template> <template>
<aside <aside :class="['actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
:class="['actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']"> <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon" @click="toggleActionbar">
<div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon" <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Indicator-Icon-Opened.svg" />
@click="toggleActionbar">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/actionbar-icons/Indicator-Icon-Opened.svg" />
</div> </div>
<nav class="actions"> <nav class="actions">
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="search"> <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="search">
<div class="icon" id="search-icon"> <div class="icon" id="search-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Search-Icon.svg" />
src="../icons/actionbar-icons/Search-Icon.svg" />
</div> </div>
<Transition name="fade"> <Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Search</pre> <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Search</pre>
@ -18,8 +14,7 @@
</button> </button>
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="filter"> <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="filter">
<div class="icon" id="filter-icon"> <div class="icon" id="filter-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Filter-Icon.svg" />
src="../icons/actionbar-icons/Filter-Icon.svg" />
</div> </div>
<Transition name="fade"> <Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Filter</pre> <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Filter</pre>
@ -27,8 +22,7 @@
</button> </button>
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="instances"> <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="instances">
<div class="icon" id="instances-icon"> <div class="icon" id="instances-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Instances-Icon.svg" />
src="../icons/actionbar-icons/Instances-Icon.svg" />
</div> </div>
<Transition name="fade"> <Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances</pre> <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances</pre>
@ -36,8 +30,7 @@
</button> </button>
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="attachments"> <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="attachments">
<div class="icon" id="attachments-icon"> <div class="icon" id="attachments-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Attachments-Icon.svg" />
src="../icons/actionbar-icons/Attachments-Icon.svg" />
</div> </div>
<Transition name="fade"> <Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Attachments</pre> <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Attachments</pre>
@ -45,8 +38,7 @@
</button> </button>
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="sell"> <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="sell">
<div class="icon" id="sell-icon"> <div class="icon" id="sell-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Sell-Icon.svg" />
src="../icons/actionbar-icons/Sell-Icon.svg" />
</div> </div>
<Transition name="fade"> <Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Sell</pre> <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Sell</pre>
@ -54,8 +46,7 @@
</button> </button>
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="archive"> <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="archive">
<div class="icon" id="archive-icon"> <div class="icon" id="archive-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Archive-Icon.svg" />
src="../icons/actionbar-icons/Archive-Icon.svg" />
</div> </div>
<Transition name="fade"> <Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Archive</pre> <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Archive</pre>
@ -63,8 +54,7 @@
</button> </button>
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new"> <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new">
<div class="icon" id="new-icon"> <div class="icon" id="new-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Add-New-Icon.svg" />
src="../icons/actionbar-icons/Add-New-Icon.svg" />
</div> </div>
<Transition name="fade"> <Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">New</pre> <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">New</pre>
@ -72,8 +62,7 @@
</button> </button>
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="edit" @click="toggleEditable"> <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="edit" @click="toggleEditable">
<div class="icon" id="edit-icon"> <div class="icon" id="edit-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Edit-Icon.svg" />
src="../icons/actionbar-icons/Edit-Icon.svg" />
</div> </div>
<Transition name="fade"> <Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Edit</pre> <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Edit</pre>
@ -81,8 +70,7 @@
</button> </button>
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="delete" @click="deleteAsset"> <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="delete" @click="deleteAsset">
<div class="icon" id="delete-icon"> <div class="icon" id="delete-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Delete-Icon.svg" />
src="../icons/actionbar-icons/Delete-Icon.svg" />
</div> </div>
<Transition name="fade"> <Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Delete</pre> <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Delete</pre>
@ -93,8 +81,12 @@
</template> </template>
<script setup> <script setup>
import { ref } from 'vue';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
const darkMode = ref(true)
const isExpanded = ref(true)
// get accesss to the store // get accesss to the store
const store = useStore() const store = useStore()
const toggleEditable = () => { const toggleEditable = () => {
@ -103,26 +95,17 @@ const toggleEditable = () => {
const deleteAsset = () => { const deleteAsset = () => {
store.commit('doDeleteAsset'); store.commit('doDeleteAsset');
}; };
const toggleActionbar = () => {
isExpanded.value = !isExpanded.value;
};
</script> </script>
<script> <script>
export default { export default {
name: "Actionbar", name: "Actionbar",
data() {
return {
darkMode: true,
isExpanded: true,
};
},
methods: {
toggleActionbar() {
this.isExpanded = !this.isExpanded;
},
},
} }
</script> </script>
@ -147,37 +130,30 @@ aside.actionbar {
justify-content: center; justify-content: center;
padding: 1.875rem 0.625rem; padding: 1.875rem 0.625rem;
gap: 1.25rem; gap: 1.25rem;
transition: all 10s ease-in-out 0s;
overflow: clip; overflow: clip;
} }
.actionbar-darkmode { .actionbar-darkmode {
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25); box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
background-color: #2C2C2C; background-color: #2C2C2C;
} }
.actionbar-lightmode { .actionbar-lightmode {
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25); box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
background-color: #FFFFFF; background-color: #FFFFFF;
} }
aside.is-expanded { aside.is-expanded {
animation: expand 0.5s linear both; animation: expand 0.5s linear both;
} }
aside.is-not-expanded { aside.is-not-expanded {
animation: contract 0.5s linear both; animation: contract 0.5s linear both;
width: stretch;
inline-size: stretch;
} }
.actions { .actions {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 1.25rem 0;
align-items: flex-start; align-items: flex-start;
justify-content: center; justify-content: center;
padding: 1.25rem 0;
gap: 1.25rem; gap: 1.25rem;
overflow: clip; overflow: clip;
} }
@ -191,34 +167,21 @@ button {
border-radius: 0.625rem; border-radius: 0.625rem;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
gap: 0.125rem;
border: none; border: none;
transition: 0.2s ease-in-out; transition: 0.2s ease-in-out;
overflow: clip; overflow: clip;
gap: 0.125rem
}
.button-darkmode {
background-color: #2C2C2C;
}
.button-lightmode {
background-color: #FFFFFF;
} }
.button-darkmode { background-color: #2C2C2C; }
.button-lightmode { background-color: #FFFFFF; }
.button-darkmode:hover, .button-darkmode:hover,
.indicator-darkmode:hover { .indicator-darkmode:hover { background-color: #444444; }
background-color: #444444;
}
.button-lightmode:hover, .button-lightmode:hover,
.indicator-lightmode:hover { .indicator-lightmode:hover { background-color: #ACACAC; }
background-color: #ACACAC;
}
.is-not-expanded>button { .is-not-expanded>button { align-self: center; }
align-self: center;
gap: 0.5rem;
}
.icon { .icon {
@ -229,7 +192,9 @@ button {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0 0.5rem; padding: 0 0.5rem;
transition: padding 0.5s linear }
.is-not-expanded .icon {
align-self: center;
} }
#indicator-icon { #indicator-icon {
@ -238,15 +203,8 @@ button {
border-radius: 0.3125rem; border-radius: 0.3125rem;
transition: 0.2s ease-in-out; transition: 0.2s ease-in-out;
} }
.is-not-expanded #indicator-icon { transform: rotate(180deg); }
.is-not-expanded .icon {
align-self: center;
padding: 0 0.375rem;
}
.is-not-expanded #indicator-icon {
transform: rotate(180deg);
}
img { img {
width: 0.875rem; width: 0.875rem;
@ -255,44 +213,31 @@ img {
object-position: center; object-position: center;
overflow: hidden; overflow: hidden;
} }
.img-darkmode { filter: invert(100%); }
#indicator-icon>img { #indicator-icon>img { height: 1.25rem; }
height: 1.25rem;
}
.img-darkmode {
filter: invert(100%);
}
.label { .label {
display: inline-flex; display: inline-flex;
min-width: 0; min-width: 0;
padding: 0rem 0.3125rem 0rem 0rem; padding: 0rem 0.625rem 0rem 0rem;
letter-spacing: 5%;
align-self: center; align-self: center;
letter-spacing: 0.02rem;
white-space: nowrap; white-space: nowrap;
font: 400 0.875rem/1.25rem Overpass, sans-serif; font: 400 0.875rem/1.25rem Overpass, sans-serif;
} }
.label-darkmode { color: #FFFFFF; }
.label-darkmode { .label-lightmode { color: #000000; }
color: #FFFFFF;
}
.label-lightmode {
color: #000000;
}
.fade-enter-from,
.fade-leave-to { .fade-enter-from, .fade-leave-to {
opacity: 0; opacity: 0;
} }
.fade-enter-to, .fade-enter-to,
.fade-leave-from { .fade-leave-from {
opacity: 1; opacity: 1;
max-width: 0;
} }
.fade-enter-active { .fade-enter-active {
@ -312,8 +257,8 @@ img {
@keyframes expand { @keyframes expand {
from { from {
max-inline-size: 3.25rem; max-inline-size: 3.125rem;
max-width: 3.25rem; max-width: 3.125rem;
} }
to { to {
@ -329,8 +274,8 @@ img {
} }
to { to {
max-inline-size: 3.25rem; max-inline-size: 3.125rem;
max-width: 3.25rem; max-width: 3.125rem;
} }
} }

266
layouts/Navigationbar.vue
View File

@ -1,67 +1,64 @@
<template> <template>
<aside <aside :class="['navbar', darkMode ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
:class="['navbar', darkMode ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
<div class="toggleNavbar"> <div class="toggleNavbar">
<div v-if="isExpanded" :class="['icon', darkMode ? 'back-darkmode' : 'back-lightmode']" id="back-icon"> <div v-if="isExpanded" :class="['icon', darkMode ? 'back-darkmode' : 'back-lightmode']" id="back-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/Back-Icon.svg" /> <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/Back-Icon.svg" />
</div> </div>
<div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon" <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" />
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
</div> </div>
</div> </div>
<div class="menus"> <div class="menus">
<nav id="home-menu" :class="[darkMode ? 'menu-darkmode' : 'menu-lightmode']"> <nav id="home-menu" :class="[darkMode ? 'menu-darkmode' : 'menu-lightmode']">
<router-link to="/home" class="button" <router-link to="/home" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="home-button">
:class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="home-button">
<div class="icon" id="home-icon"> <div class="icon" id="home-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Home-Icon.svg" />
src="../icons/navbar-icons/Home-Icon.svg" />
</div> </div>
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Home</span> <Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Home</pre>
</Transition>
</router-link> </router-link>
</nav> </nav>
<nav id="site-menu"> <nav id="site-menu">
<router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" <router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="checklists-button">
id="checklists-button">
<div class="icon" id="checklists-icon"> <div class="icon" id="checklists-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Checklists-Icon.svg" />
src="../icons/navbar-icons/Checklists-Icon.svg" />
</div> </div>
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklists</span> <Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklists</pre>
</Transition>
</router-link> </router-link>
<nuxt-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" @click="defaultAssetPage()" <nuxt-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" @click="defaultAssetPage()" id="assets-button">
id="assets-button">
<div class="icon" id="assets-icon"> <div class="icon" id="assets-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Assets-Icon.svg" />
src="../icons/navbar-icons/Assets-Icon.svg" />
</div> </div>
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Config Items</span> <Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Assets</pre>
</Transition>
</nuxt-link> </nuxt-link>
<router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" <router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="solutions-button">
id="solutions-button">
<div class="icon" id="solutions-icon"> <div class="icon" id="solutions-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Solutions-Icon.svg" />
src="../icons/navbar-icons/Solutions-Icon.svg" />
</div> </div>
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</span> <Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</pre>
</Transition>
</router-link> </router-link>
<router-link to="/issueSlips" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" <router-link to="/issueSlips" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="accounting-button">
id="accounting-button">
<div class="icon" id="accounting-icon"> <div class="icon" id="accounting-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Accounting-Icon.svg" />
src="../icons/navbar-icons/Accounting-Icon.svg" />
</div> </div>
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Accounting</span> <Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Accounting</pre>
</Transition>
</router-link> </router-link>
<router-link to="/clients" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" <router-link to="/clients" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="clients-button">
id="clients-button">
<div class="icon" id="clients-icon"> <div class="icon" id="clients-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Clients-Icon.svg" />
src="../icons/navbar-icons/Clients-Icon.svg" />
</div> </div>
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Clients</span> <Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Clients</pre>
</Transition>
</router-link> </router-link>
</nav> </nav>
</div> </div>
@ -102,47 +99,37 @@ export default {
box-sizing: border-box; box-sizing: border-box;
} }
aside { aside.navbar {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: sticky; position: sticky;
top: 5rem; top: 5rem;
width: 3.125rem; height: fit-content;
transition: 0.5s ease-in-out; width: fit-content;
inline-size: fit-content;
border-radius: 0.625rem;
flex: 0 0 0;
align-items: stretch;
justify-content: center;
padding: 0.9375rem;
gap: 0.625rem;
overflow: clip;
overflow-clip-margin: 0.625rem;
} }
aside.is-expanded { aside.is-expanded {
width: 12.5rem; animation: expand 0.5s linear both;
} }
aside.is-not-expanded {
.is-expanded .label { animation: contract 0.5s linear both;
opacity: 1;
transition: 0.5s ease-in-out;
} }
.is-not-expanded #indicator-icon { .is-not-expanded #indicator-icon {
transform: rotate(180deg); transform: rotate(180deg);
transition: 0.5s ease-in-out; transition: 0.5s ease-in-out;
} }
.navbar {
display: flex;
flex-direction: column;
height: fit-content;
border-radius: 0.625rem;
align-items: stretch;
justify-content: center;
gap: 0.625rem;
padding: 0.9375rem;
margin: 0;
}
.navbar-darkmode { .navbar-darkmode {
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25); box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
background-color: #2C2C2C; background-color: #2C2C2C;
} }
.navbar-lightmode { .navbar-lightmode {
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25); box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
background-color: #FFFFFF; background-color: #FFFFFF;
@ -155,75 +142,67 @@ aside.is-expanded {
height: 2.5rem; height: 2.5rem;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
overflow: clip;
overflow-clip-margin: 0.625rem;
} }
.menus { .menus {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative;
justify-content: flex;
padding: 1.25rem 0; padding: 1.25rem 0;
align-items: flex-start;
justify-content: center;
gap: 1.875rem; gap: 1.875rem;
transition: 0.5s ease-in-out; overflow: clip;
align-items: center; overflow-clip-margin: 0.625rem;
} }
nav { nav {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; align-self: stretch;
padding: 0.9375rem 0; padding: 0.9375rem 0;
align-items: flex-start;
justify-content: center;
gap: 1.875rem; gap: 1.875rem;
width: 92%; overflow: clip;
overflow-clip-margin: 0.625rem;
} }
.menu-darkmode { .menu-darkmode { border-bottom: 0.0625rem solid #8E8E8E; }
border-bottom: 0.0625rem solid #8E8E8E; .menu-lightmode { border-bottom: 0.0625rem solid #BABABA; }
}
.menu-lightmode {
border-bottom: 0.0625rem solid #BABABA;
}
.button,
button,
a { a {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-self: stretch; align-self: stretch;
height: 2.1875rem; height: 2.1875rem;
border-radius: 0.3125rem; border-radius: 0.625rem;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
gap: 0.3125rem;
border: none; border: none;
transition: 0.5s ease-in-out;
text-decoration: none; text-decoration: none;
width: 100%; transition: 0.2s ease-in-out;
} overflow: clip;
overflow-clip-margin: 0.625rem;
.button-darkmode {
background-color: #2C2C2C;
}
.button-lightmode {
background-color: #FFFFFF;
} }
.button-darkmode { background-color: #2C2C2C; }
.button-lightmode { background-color: #FFFFFF; }
.button-darkmode:hover, .button-darkmode:hover,
.indicator-darkmode:hover, .indicator-darkmode:hover,
.back-darkmode:hover { .back-darkmode:hover { background-color: #444444; }
background-color: #444444;
}
.button-lightmode:hover, .button-lightmode:hover,
.indicator-lightmode:hover, .indicator-lightmode:hover,
.back-lightmode:hover { .back-lightmode:hover { background-color: #ACACAC; }
background-color: #ACACAC;
} .is-not-expanded>button { align-self: center; }
.icon { .icon {
display: flex; display: flex;
@ -232,24 +211,18 @@ a {
height: 2.1875rem; height: 2.1875rem;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: 0.2s ease-in-out;
} }
#back-icon, #back-icon,
#indicator-icon { #indicator-icon {
width: 2.5rem; width: 2.5rem;
height: 2.5rem; height: 2.5rem;
border-radius: 0.3125rem; border-radius: 0.3125rem;
transition-duration: 0.5s; transition: 0.2s ease-in-out;
transition: 0.2s ease-out;
} }
.back-darkmode:hover, .back-darkmode:hover,
.back-lightmode:hover, .back-lightmode:hover,
.indicator-darkmode:hover, .indicator-darkmode:hover,
.indicator-lightmode:hover { .indicator-lightmode:hover { cursor: pointer; }
cursor: pointer;
}
img { img {
@ -258,28 +231,95 @@ img {
object-fit: contain; object-fit: contain;
object-position: center; object-position: center;
overflow: hidden; overflow: hidden;
transition: 0.2s ease-out;
} }
.img-darkmode { filter: invert(100%); }
.img-darkmode {
filter: invert(100%);
}
.label { .label {
letter-spacing: 5%; display: inline-flex;
min-width: 0;
padding: 0rem 0.625rem 0rem 0.3125rem;
align-self: center; align-self: center;
letter-spacing: 0.03rem;
white-space: nowrap; white-space: nowrap;
margin: auto 0;
font: 600 0.875rem/1.25rem Overpass, sans-serif; font: 600 0.875rem/1.25rem Overpass, sans-serif;
}
.label-darkmode { color: #FFFFFF; }
.label-lightmode { color: #000000; }
.fade-enter-from,
.fade-leave-to {
opacity: 0; opacity: 0;
transition: opacity 0.5s ease-out; padding: 0;
} }
.label-darkmode { .fade-enter-to,
color: #FFFFFF; .fade-leave-from {
opacity: 1;
padding: 0rem 0.625rem 0rem 0.3125rem;
} }
.label-lightmode { .fade-enter-active {
color: #000000; transition: all 0.75s linear;
animation: fade-in 0.5s linear forwards;
}
.fade-leave-active {
transition: all 0.75s linear;
animation: fade-out 0.5s linear forwards;
}
.fade-move {
transition: transform 5s
}
@keyframes expand {
from {
max-inline-size: 4.0625rem;
max-width: 4.0625rem;
}
to {
max-inline-size: 15rem;
max-width: 15rem;
}
}
@keyframes contract {
from {
max-inline-size: 15rem;
max-width: 15rem;
}
to {
max-inline-size: 4.0625rem;
max-width: 4.0625rem;
}
}
@keyframes fade-in {
from {
max-width: 0;
max-inline-size: 0;
}
to {
max-width: 10rem;
width: fit-content;
}
}
@keyframes fade-out {
from {
max-width: 10rem;
width: fit-content;
}
to {
max-width: 0;
max-inline-size: 0;
}
} }
</style> </style>

6
package-lock.json generated
View File

@ -6114,9 +6114,9 @@
"dev": true "dev": true
}, },
"node_modules/ip": { "node_modules/ip": {
"version": "2.0.0", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz", "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.1.tgz",
"integrity": "sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==", "integrity": "sha512-lJUL9imLTNi1ZfXT+DU6rBBdbiKGBuay9B6xGSPVjUeQwaH1RIGqef8RZkUtHioLmSNpPR5M4HVKJGm1j8FWVQ==",
"dev": true "dev": true
}, },
"node_modules/ipaddr.js": { "node_modules/ipaddr.js": {