1
0
forked from PGL/Clyde
Clyde/frontend/src/App.vue

303 lines
7.7 KiB
Vue
Raw Normal View History

2024-02-17 20:48:14 +01:00
<script setup>
import { toast } from 'vue3-toastify';
import { ref, computed } from 'vue'
import i18n, { setLang } from './i18n.js'
2024-03-08 11:54:10 +01:00
// Liste des apps
import LoginPage from './Apps/Login.vue'
import Inscription from "./Apps/Inscription.vue"
2024-02-28 17:57:13 +01:00
const apps = {
'/login': LoginPage,
'/inscription': Inscription
}
const currentPath = ref(window.location.hash)
window.addEventListener('hashchange', () => {
currentPath.value = window.location.hash
})
const currentView = computed(() => {
return apps[currentPath.value.slice(1) || '/']
})
2024-03-08 20:22:00 +01:00
const home=ref(i18n("app.home"))
const notifications=ref(i18n("app.notifications"))
const settings=ref(i18n("app.settings"))
const login=ref(i18n("app.login"))
2024-03-09 11:07:13 +01:00
const active=ref(false)
function toggle() {
active = !active;
}
2024-02-17 20:48:14 +01:00
</script>
<template>
2024-03-02 14:46:59 +01:00
<div class="container">
<div class="topBar">
2024-03-01 15:21:10 +01:00
<ul class="horizontal">
2024-03-08 20:22:00 +01:00
<li title=home>
2024-02-27 00:51:30 +01:00
<a href="#home">
2024-02-28 17:57:13 +01:00
<img @click="draw" src="./assets/Clyde.png" style="width: 40px; height: auto; margin-top:4px">
2024-03-02 14:46:59 +01:00
</a></li>
2024-03-08 20:22:00 +01:00
<li title=home>
2024-02-27 00:51:30 +01:00
<a href="#home">
2024-03-02 14:46:59 +01:00
<div class=" fa-solid fa-house" style="margin-top: 7px; margin-bottom: 3px;"></div>
</a></li>
2024-03-08 20:22:00 +01:00
<li style="float: right;" title=login>
<a href="#/login">
2024-03-02 14:46:59 +01:00
<div class="fa-solid fa-user" style="margin-top: 7px; margin-bottom: 3px;"></div>
2024-02-27 00:51:30 +01:00
</a></li>
2024-03-08 20:22:00 +01:00
<li style="float: right;" title=notifications>
2024-02-27 00:51:30 +01:00
<a href="#Notifications">
2024-03-02 14:46:59 +01:00
<div class="fa-solid fa-bell" style="margin-top: 7px; margin-bottom: 3px;"></div>
2024-02-27 00:51:30 +01:00
</a></li>
2024-03-09 11:07:13 +01:00
<li @click="active=true" class="option"style="float: right;" title=settings>
<a href="#Options">
2024-03-02 14:46:59 +01:00
<div class="fa-solid fa-gear" style="margin-top: 7px; margin-bottom: 3px;"></div>
2024-03-09 11:07:13 +01:00
<div v-if="active"class="dropdown">
<div class="content">Langage</div>
<ul style="list-style-type:none;margin:0;padding:0;">
<li style="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>
</a></li>
<li style="float:right; margin-top:7.5px;" title="Language">
<input type="checkbox" @:click="setLang( toggle? 'fr' : 'en' )" v-model="toggle" class="theme-checkbox">
</li>
2024-03-01 15:21:10 +01:00
</ul>
2024-03-02 14:46:59 +01:00
</div>
<div class="leftBar">
2024-03-01 15:21:10 +01:00
<ul class="vertical">
2024-03-02 14:46:59 +01:00
<li style="margin-top: 25px;" >
<a href="#Messages">
<div class="fa-solid fa-comment" style="font-size: 40px;"></div>
2024-03-08 20:22:00 +01:00
<div class="text">{{i18n("app.messages")}}</div>
2024-03-02 14:46:59 +01:00
</a></li>
<li >
<a href="#Notifications">
<div class="fa-solid fa-bell" style="font-size: 40px;" ></div>
2024-03-08 20:22:00 +01:00
<div class="text">{{i18n("app.notifications")}}</div>
2024-03-02 14:46:59 +01:00
</a></li>
<li >
<a href="#Schedule">
<div class="fa-solid fa-calendar-days" style="font-size: 40px;"></div>
2024-03-08 20:22:00 +01:00
<div class="text">{{i18n("app.schedules")}}</div>
2024-03-02 14:46:59 +01:00
</a></li>
<li ><a href="#Forum">
<div class="fa-solid fa-envelope" style="font-size: 40px;" ></div>
2024-03-08 20:22:00 +01:00
<div class="text">{{i18n("app.forum")}}</div></a></li>
<li><a href="#/inscription">
2024-03-08 11:54:10 +01:00
<div class="fa-solid fa-users" style="font-size: 40px;"></div>
2024-03-08 20:22:00 +01:00
<div class="text">{{i18n("app.inscription.requests")}}</div></a></li>
2024-02-27 00:51:30 +01:00
</ul>
2024-03-02 14:46:59 +01:00
</div>
<div class="page">
2024-03-08 11:54:10 +01:00
<div style=" margin:50px;">
<component :is="currentView" />
2024-03-08 11:54:10 +01:00
</div>
2024-03-02 14:46:59 +01:00
</div>
</div>
2024-02-17 20:48:14 +01:00
</template>
<style scoped>
2024-03-01 15:21:10 +01:00
2024-03-02 14:46:59 +01:00
.container{
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;
2024-03-01 15:21:10 +01:00
}
2024-03-02 14:46:59 +01:00
.page {
grid-area:page;
place-self:center;
2024-03-01 15:21:10 +01:00
}
2024-03-02 14:46:59 +01:00
.topBar{
grid-area:topBar;
}
.leftBar{
grid-area:leftBar;
}
2024-03-09 11:07:13 +01:00
.option {
position: relative;
display: block;
}
.dropdown {
margin-top:55px;
display: block;
height:150px;
font-size: 13px;
position: absolute;
z-index: 1;
background-color:white;
}
.dropdown .content {
color: #4CAF50;
padding: 8px 10px;
text-decoration: none;
display: block;
transition: 0.1s;
}
2024-03-02 14:46:59 +01:00
2024-02-27 00:51:30 +01:00
ul.vertical{
list-style-type: none;
2024-03-01 15:21:10 +01:00
margin-top: 61px;
top:0;
left:0;
padding: 25px 0 0;
2024-02-27 00:51:30 +01:00
width: 70px ;
background-color: rgb(53, 53, 53);
border-right:5px;
border-color:black;
height: 100%;
position: fixed;
2024-03-01 15:21:10 +01:00
overflow:;
2024-02-27 00:51:30 +01:00
transition-duration: .3s;
}
li a{
2024-02-27 00:51:30 +01:00
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;
2024-03-01 15:21:10 +01:00
box-shadow: 0px 3px 3px rgb(0, 0, 0);
2024-02-27 00:51:30 +01:00
display: block ;
list-style-type:none;
margin:0;
padding: 0;
top: 0;
2024-03-01 15:21:10 +01:00
left:0;
2024-02-27 00:51:30 +01:00
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:hover:not(.active){
2024-02-27 00:51:30 +01:00
background-color: black;
border-radius:6px;
color:white;
transform: translate(0px ,1px);
}
ul.vertical:hover {
z-index: 100;
width: 250px;
2024-03-01 15:21:10 +01:00
border-top-right-radius: 40px;
box-shadow: 3px 0px 3px rgb(0, 0, 0);
2024-02-27 00:51:30 +01:00
transition-duration: .3s;
}
.text {
position: absolute;
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: 70%;
transition-duration: .3s;
padding-left: 5px;
}
.theme-checkbox {
--toggle-size: 16px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 80px;
height: 40px;
background: -webkit-gradient(linear, left top, right top, color-stop(50%, #efefef), color-stop(50%, #2a2a2a)) no-repeat;
background: -o-linear-gradient(left, #efefef 50%, rgb(239, 60, 168) 50%) no-repeat;
background: linear-gradient(to right, #efefef 50%, rgb(239, 60, 168) 50%) no-repeat;
background-size: 205%;
background-position: 0;
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
border-radius: 99em;
position: relative;
cursor: pointer;
font-size: var(--toggle-size);
}
.theme-checkbox::before {
content: "";
width: 35px;
height: 35px;
position: absolute;
top: 2px;
left: 3px;
background: -webkit-gradient(linear, left top, right top, color-stop(50%, #efefef), color-stop(50%, #2rgb(239, 60, 168))) no-repeat;
background: -o-linear-gradient(left, #efefef 50%, rgb(239, 60, 168) 50%) no-repeat;
background: linear-gradient(to right, #efefef 50%, rgb(239, 60, 168) 50%) no-repeat;
background-size: 205%;
background-position: 100%;
border-radius: 50%;
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
}
.theme-checkbox:checked::before {
left: calc(100% - 35px - 3px);
background-position: 0;
}
.theme-checkbox:checked {
background-position: 100%;
}
2024-02-17 20:48:14 +01:00
</style>