<script setup> import 'https://kit.fontawesome.com/fb3bbd0a95.js' import { toast } from 'vue3-toastify'; import { ref } from 'vue' import i18n from './i18n.js' const test = ref(); async function draw(e) { test.value = (await fetch("http://localhost:8080/ping")); test.value = await test.value.json(); toast(test.value['txt']); } </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="Account"> <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="Options"> <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" v-model="toggle" true-value="FR" false-value="EN" 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">Messages</div> </a></li> <li > <a href="#Notifications"> <div class="fa-solid fa-bell" style="font-size: 40px;" ></div> <div class="text">Notifications</div> </a></li> <li > <a href="#Schedule"> <div class="fa-solid fa-calendar-days" style="font-size: 40px;"></div> <div class="text">Schedules</div> </a></li> <li ><a href="#Forum"> <div class="fa-solid fa-envelope" style="font-size: 40px;" ></div> <div class="text">Forum</div></a></li> </ul> </div> <div class="page"> <div style="background-color: rgb(239,50,168); margin:50px;">Il FAUDRA INSERER LA PAGE ICI</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>