option language settings start
This commit is contained in:
parent
d4c48ee9f1
commit
c14d0a9d21
@ -26,8 +26,10 @@
|
|||||||
const notifications=ref(i18n("app.notifications"))
|
const notifications=ref(i18n("app.notifications"))
|
||||||
const settings=ref(i18n("app.settings"))
|
const settings=ref(i18n("app.settings"))
|
||||||
const login=ref(i18n("app.login"))
|
const login=ref(i18n("app.login"))
|
||||||
|
const active=ref(false)
|
||||||
|
function toggle() {
|
||||||
|
active = !active;
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -52,9 +54,17 @@
|
|||||||
<a href="#Notifications">
|
<a href="#Notifications">
|
||||||
<div class="fa-solid fa-bell" style="margin-top: 7px; margin-bottom: 3px;"></div>
|
<div class="fa-solid fa-bell" style="margin-top: 7px; margin-bottom: 3px;"></div>
|
||||||
</a></li>
|
</a></li>
|
||||||
<li style="float: right;" title=settings>
|
<li @click="active=true" class="option"style="float: right;" title=settings>
|
||||||
<a href="#Options">
|
<a href="#Options">
|
||||||
<div class="fa-solid fa-gear" style="margin-top: 7px; margin-bottom: 3px;"></div>
|
<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>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</div>
|
||||||
</a></li>
|
</a></li>
|
||||||
|
|
||||||
<li style="float:right; margin-top:7.5px;" title="Language">
|
<li style="float:right; margin-top:7.5px;" title="Language">
|
||||||
@ -122,8 +132,30 @@
|
|||||||
.leftBar{
|
.leftBar{
|
||||||
grid-area:leftBar;
|
grid-area:leftBar;
|
||||||
}
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
ul.vertical{
|
ul.vertical{
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
margin-top: 61px;
|
margin-top: 61px;
|
||||||
@ -176,7 +208,6 @@
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
height:61px;
|
height:61px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
|
||||||
background-color: rgb(24, 24, 24);
|
background-color: rgb(24, 24, 24);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user