1
0
forked from PGL/Clyde
Clyde/frontend/src/App.vue
2024-03-30 12:38:17 +01:00

259 lines
5.9 KiB
Vue

<script setup>
import { toast } from 'vue3-toastify';
import { ref } from 'vue'
import i18n, { setLang } from './i18n.js'
import { isLogged } from '@/rest/Users.js'
import { appList, currentView } from '@/rest/apps.js'
var prevURL;
var currentURL = window.location.hash;
window.onhashchange = function() {
prevURL = currentURL;
currentURL = window.location.hash;
}
const Logged = ref(isLogged());
window.addEventListener('hashchange', () => {
if((location.hash === "#/home" && prevURL === "#/login") || (location.hash === "#/home" && prevURL === "#/profil")){
window.location.reload();
}
});
const home=ref(i18n("app.home"))
const notifications=ref(i18n("app.notifications"))
const settings=ref(i18n("app.settings"))
const login=ref(i18n("app.login"))
const active=ref(false)
const apps = ref([])
appList().then(e => apps.value = e)
</script>
<template>
<div class="container">
<div class="topBar">
<ul class="horizontal">
<li title=home>
<a class="icon" href="#home">
<img class="clyde" src="/Clyde.png" style="width: 40px; height: auto; margin-top:4px">
</a></li>
<li title=home>
<a class="icon" href="#home">
<div class=" fa-solid fa-house" style="margin-top: 7px; margin-bottom: 3px;"></div>
</a></li>
<li style="float: right;" title=login>
<a class="icon" href="#/login">
<div class="fa-solid fa-user" :style="Logged ? 'color: orange' : 'haha'" style="margin-top: 7px; margin-bottom: 3px; "></div>
</a></li>
<li style="float: right;" title=notifications>
<a class="icon" href="#Notifications">
<div class="fa-solid fa-bell" style="margin-top: 7px; margin-bottom: 3px;"></div>
</a></li>
<li @click="active=!active" class="option"style="float: right;" title=settings>
<a class="icon" >
<div class="fa-solid fa-gear" style="margin-top: 7px; margin-bottom: 3px;"></div>
<div v-if="active" class="dropdown">
<div class="dropdown-content">{{i18n("app.language")}}</div>
<ul style="list-style-type:none;">
<li style=" margin-bottom:10px;margin-right:20px;float:left; font-size:10px; color:black;">
<button @:click="setLang('en');" href="#home">EN</button>
</li>
<li style="float:left;font-size:10px; color:black;"><button @:click="setLang('fr');" href="#home">FR</button></li>
</ul>
<div style='align-items:center;'>
<a style="cursor:pointer;font-size:20px;" href="#/profil" class="dropdown-content">
{{i18n("app.manage.profile")}}
</a>
</div>
</div>
</a></li>
</ul>
</div>
<div class="leftBar">
<ul class="vertical">
<li v-for="app in apps">
<a :href="app.path">
<div class="fa-solid" :class="app.icon" style="font-size: 40px;"></div>
<div class="text">{{app.text}}</div>
</a>
</li>
</ul>
</div>
<div class="page">
<Suspense>
<component :is="currentView" />
</Suspense>
</div>
</div>
</template>
<style scoped>
.container{
height: 100%;
width: 100%;
display:grid;
grid-template-columns:[firstCol-start]70px[firstCol-end secondCol-start]auto[endCol];
grid-template-rows:[firstRow-start]61px[firstRow-end secondRow-start] auto [endRow];
grid-template-areas:
"topBar topBar"
"leftBar page";
row-gap:0px;
column-gap:0px;
}
.page {
grid-area:page;
height: 100%;
width: 100%;
place-self:center;
}
.topBar{
grid-area:topBar;
}
.leftBar{
grid-area:leftBar;
}
.option {
position: relative;
display: block;
}
.dropdown {
margin-top:55px;
width:160px;
display: inline-block;
height:110px;
font-size: 13px;
position: absolute;
z-index: 1;
background-color:white;
}
.dropdown-content {
min-width: 160px;
text-align: center;
margin-bottom: 10px;
right:0;
color:rgb(50,50,50);
text-decoration: none;
font-size:24px
}
.dropdown-content div{
display:block;
}
ul.vertical{
list-style-type: none;
margin-top: 61px;
top:0;
left:0;
padding: 25px 0 0;
width: 70px ;
background-color: rgb(53, 53, 53);
border-right:5px;
border-color:black;
height: 100%;
position: fixed;
overflow:;
transition-duration: .3s;
}
li a{
display: flex;
padding: 8px 16px;
color:rgb(255, 255, 255);
text-decoration: none;
}
ul.vertical li a:hover:not(.active) {
background-color: rgb(112, 112, 112);
border-radius:6px;
color: white;
transform: translate(0px ,1px);
}
ul.vertical li a.active {
background-color: rgb(239, 60, 168);
border-radius:6px;
}
ul.horizontal li a.active {
background-color: rgb(57, 57, 57);
border-radius:6px;
}
ul.horizontal {
z-index: 101;
box-shadow: 0px 3px 3px rgb(0, 0, 0);
display: block ;
list-style-type:none;
margin:0;
padding: 0;
top: 0;
left:0;
position: fixed;
height:61px;
width: 100%;
background-color: rgb(24, 24, 24);
}
ul.horizontal li {
font-size: 35px;
float: left;
align-items: center;
}
ul.horizontal li a.icon:hover:not(.active){
background-color: black;
border-radius:6px;
color:white;
transform: translate(0px ,1px);
}
ul.vertical:hover {
z-index: 100;
width: 250px;
border-top-right-radius: 40px;
box-shadow: 3px 0px 3px rgb(0, 0, 0);
transition-duration: .3s;
}
.text {
right: 0%;
width: 0%;
opacity: 0;
color: white;
font-size: 1.2em;
font-weight: 600;
transition-duration: .3s;
}
ul.vertical:hover .text {
opacity: 1;
width: 60%;
transition-duration: .3s;
padding-left: 15px;
}
.clyde:hover{
content: url("./assets/angry_clyde.png")
}
</style>
<!-- vim:set noet sts=0 sw=4 ts=2: -->