option language settings start
This commit is contained in:
		| @ -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); | ||||||
| 	} | 	} | ||||||
|  |  | ||||||
|  | |||||||
		Reference in New Issue
	
	Block a user