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