Anthony Debucquoy
ba8b32160d
- Removing test mentions in readme - moving login page as an app - removing vite broken config - removing auto-generated and unused vite configuration (base.css) Overall simplification (sorry @Wal I kinda destroyed your login page a bit but seems fixable 👉👈)
272 lines
6.8 KiB
Vue
272 lines
6.8 KiB
Vue
<script setup>
|
|
import { toast } from 'vue3-toastify';
|
|
import { ref, computed } from 'vue'
|
|
import i18n, { setLang } from './i18n.js'
|
|
|
|
|
|
// Liste des apps
|
|
import LoginPage from './Apps/Login.vue'
|
|
import Inscription from "./Apps/Inscription.vue"
|
|
|
|
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) || '/']
|
|
})
|
|
|
|
const home=ref(i18n("app.home"))
|
|
const notifications=ref(i18n("app.notifications"))
|
|
const settings=ref(i18n("app.settings"))
|
|
const login=ref(i18n("app.login"))
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container">
|
|
|
|
<div class="topBar">
|
|
<ul class="horizontal">
|
|
<li title=home>
|
|
<a href="#home">
|
|
<img @click="draw" src="./assets/Clyde.png" style="width: 40px; height: auto; margin-top:4px">
|
|
</a></li>
|
|
<li title=home>
|
|
<a 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 href="#/login">
|
|
<div class="fa-solid fa-user" style="margin-top: 7px; margin-bottom: 3px;"></div>
|
|
</a></li>
|
|
<li style="float: right;" title=notifications>
|
|
<a href="#Notifications">
|
|
<div class="fa-solid fa-bell" style="margin-top: 7px; margin-bottom: 3px;"></div>
|
|
</a></li>
|
|
<li style="float: right;" title=settings>
|
|
<a href="#Options">
|
|
<div class="fa-solid fa-gear" style="margin-top: 7px; margin-bottom: 3px;"></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>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="leftBar">
|
|
<ul class="vertical">
|
|
<li style="margin-top: 25px;" >
|
|
<a href="#Messages">
|
|
<div class="fa-solid fa-comment" style="font-size: 40px;"></div>
|
|
<div class="text">{{i18n("app.messages")}}</div>
|
|
</a></li>
|
|
<li >
|
|
<a href="#Notifications">
|
|
<div class="fa-solid fa-bell" style="font-size: 40px;" ></div>
|
|
<div class="text">{{i18n("app.notifications")}}</div>
|
|
</a></li>
|
|
<li >
|
|
<a href="#Schedule">
|
|
<div class="fa-solid fa-calendar-days" style="font-size: 40px;"></div>
|
|
<div class="text">{{i18n("app.schedules")}}</div>
|
|
</a></li>
|
|
<li ><a href="#Forum">
|
|
<div class="fa-solid fa-envelope" style="font-size: 40px;" ></div>
|
|
<div class="text">{{i18n("app.forum")}}</div></a></li>
|
|
<li><a href="#/inscription">
|
|
<div class="fa-solid fa-users" style="font-size: 40px;"></div>
|
|
<div class="text">{{i18n("app.inscription.requests")}}</div></a></li>
|
|
</ul>
|
|
|
|
</div>
|
|
<div class="page">
|
|
<div style=" margin:50px;">
|
|
<component :is="currentView" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
.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;
|
|
}
|
|
|
|
.page {
|
|
grid-area:page;
|
|
place-self:center;
|
|
}
|
|
|
|
.topBar{
|
|
grid-area:topBar;
|
|
}
|
|
|
|
.leftBar{
|
|
grid-area:leftBar;
|
|
}
|
|
|
|
|
|
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%;
|
|
overflow: hidden;
|
|
background-color: rgb(24, 24, 24);
|
|
}
|
|
|
|
ul.horizontal li {
|
|
font-size: 35px;
|
|
float: left;
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
ul.horizontal li a: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 {
|
|
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%;
|
|
}
|
|
</style>
|