Maxime/Clyde
1
0
Fork 0
forked from PGL/Clyde
Code Pull Requests Activity

profil menu base

Browse Source
This commit is contained in:
Wawilski
2024-03-09 22:48:33 +01:00
committed by Wal
parent c14d0a9d21
commit 07e5fb3a73
4 changed files with 144 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
frontend/src/App.vue
View File

@ -7,16 +7,21 @@
// Liste des apps
import LoginPage from './Apps/Login.vue'
import Inscription from "./Apps/Inscription.vue"
import Profil from "./Apps/Profil.vue"
const apps = {
'/login': LoginPage,
'/inscription': Inscription
'/inscription': Inscription,
'/profil': Profil
}
const currentPath = ref(window.location.hash)
window.addEventListener('hashchange', () => {
currentPath.value = window.location.hash
})
function refreshPage() {
window.location.reload();}
const currentView = computed(() => {
return apps[currentPath.value.slice(1) || '/']
@ -27,10 +32,7 @@
const settings=ref(i18n("app.settings"))
const login=ref(i18n("app.login"))
const active=ref(false)
function toggle() {
active = !active;
}
</script>
<template>
@ -39,37 +41,41 @@
<div class="topBar">
<ul class="horizontal">
<li title=home>
<a href="#home">
<a class="icon" 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">
<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 href="#/login">
<a class="icon" 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">
<a class="icon" href="#Notifications">
<div class="fa-solid fa-bell" style="margin-top: 7px; margin-bottom: 3px;"></div>
</a></li>
<li @click="active=true" class="option"style="float: right;" title=settings>
<a href="#Options">
<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="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>
<div class="dropdown-content">Langage</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');refreshPage();" href="#home">EN</button>
</li>
<li style="float:left;font-size:10px; color:black;"><button @:click="setLang('fr');refreshPage();" href="#home">FR</button></li>
</ul>
<div style='align-items:center;'>
<a style="cursor:pointer;font-size:20px;" href="#/profil" class="dropdown-content">
Manage Profile
</a>
</div>
</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>
@ -140,22 +146,29 @@
.dropdown {
margin-top:55px;
display: block;
height:150px;
width:160px;
display: inline-block;
height:110px;
font-size: 13px;
position: absolute;
z-index: 1;
background-color:white;
}
.dropdown .content {
color: #4CAF50;
padding: 8px 10px;
.dropdown-content {
min-width: 160px;
text-align: center;
margin-bottom: 10px;
right:0;
color:rgb(50,50,50);
text-decoration: none;
display: block;
transition: 0.1s;
font-size:24px
}
.dropdown-content div{
display:block;
}
ul.vertical{
list-style-type: none;
margin-top: 61px;
@ -218,7 +231,7 @@
}
ul.horizontal li a:hover:not(.active){
ul.horizontal li a.icon:hover:not(.active){
background-color: black;
border-radius:6px;
color:white;
@ -252,51 +265,5 @@
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>