Clyde/frontend/src/App.vue

<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>