Clyde/frontend/src/App.vue

<script setup>
  import { toast } from 'vue3-toastify';
  import { ref } from 'vue'
  import i18n, { setLang } from './i18n.js'
  import { isLogged } from '@/rest/Users.js'
	import { notifications, fetchNotifications, archiveNotification } from '@/rest/notifications.js'

  import { appList, currentView } from '@/rest/apps.js'
		var prevURL;
		var currentURL = window.location.hash;

window.onhashchange = function() {
    prevURL = currentURL;
    currentURL = window.location.hash;
}
const Logged = ref(isLogged());

if(Logged.value){
	fetchNotifications();
}

window.addEventListener('hashchange', () => {
 if((location.hash === "#/home" && prevURL === "#/login") || (location.hash === "#/home" && prevURL === "#/profil")){
		window.location.reload();
 }
});
  const home=ref(i18n("app.home"))
  const settings=ref(i18n("app.settings"))
  const login=ref(i18n("app.login"))
  const active=ref(false)
	const notification = ref(false)

	const apps = ref([])
	appList().then(e => apps.value = e)

</script>

<template>
  <div class="container">
    <div class="topBar">
      <ul class="horizontal">
        <li title=home>
            <a class="icon" href="#home">
                <img class="clyde" src="/Clyde.png" style="width: 40px; height: auto; margin-top:4px">
            </a></li>
        <li title=home>
            <a class="icon" href="#home">
				<div class=" fa-solid fa-house" style="margin-top: 7px; margin-bottom: 3px;"></div>
            </a></li>
        <li style="float: right;" title=login>
            <a class="icon" href="#/login">
                <div class="fa-solid fa-user" :style="Logged ? 'color: red' : ''" style="margin-top: 7px; margin-bottom: 3px; "></div>
            </a></li>
        <li style="float: right;" title=notifications @click="notification = !notification">
            <a class="icon">
                <div class="fa-solid fa-bell" :style="notifications.length != 0 ? 'color:orange': '' " style="margin-top: 7px; margin-bottom: 3px;"></div>
										<ul v-if=notification id="notification">
												<li v-for="notif in notifications" @click="archiveNotification(notif.id)"> {{ i18n(notif.subject) }} - {{ notif.body }}</li>	
										</ul>
            </a></li>
        <li @click="active=!active" class="option"style="float: right;" title=settings>
            <a class="icon">
                <div  class="fa-solid fa-gear"  style="margin-top: 7px; margin-bottom: 3px;"></div>
                <div v-if="active" class="dropdown">
                  <div class="dropdown-content">{{i18n("app.language")}}</div>
                  <ul style="list-style-type:none;">
                    <li style=" margin-bottom:10px;margin-right:20px;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 style='align-items:center;'>
                  <a style="cursor:pointer;font-size:20px;" href="#/profil" class="dropdown-content">
                    {{i18n("app.manage.profile")}}
                  </a>
                  </div>
                </div>
            </a></li>
      </ul>
    </div>

    <div class="leftBar">
    <ul class="vertical">
        <li v-for="app in apps">
						<a :href="app.path">
            <div class="fa-solid" :class="app.icon" style="font-size: 40px;"></div>
            <div class="text">{{app.text}}</div>
						</a>
				</li>
    </ul>
    </div>
    <div class="page">
        <Suspense>
				<component :is="currentView" />
        </Suspense>
    </div>
  </div>
</template>

<style scoped>
  
  .container{
			height: 100%;
			width: 100%;
    display:grid;

    grid-template-columns:[firstCol-start]70px[firstCol-end secondCol-start] auto [endCol];
    grid-template-rows:[firstRow-start] var(--header-size) [firstRow-end secondRow-start] calc(100% - var(--header-size)) [endRow];
    grid-template-areas:
    "topBar topBar" 
    "leftBar page";

  }

  .page {
    grid-area:page;
		height: 100%;
		width: 100%;
  }

  .topBar{
    grid-area:topBar;
  }

  .leftBar{
    grid-area:leftBar;
  }
.option {
  position: relative;
  display: block;
}


.dropdown {
  margin-top:55px;
  width:160px;
  display: inline-block;
  height:110px;
  font-size: 13px;
  position: absolute;
  z-index: 1;
  background-color:white;
}

.dropdown-content { 
  min-width: 160px;
  text-align: center;
  margin-bottom: 10px;
  right:0;
  color:rgb(50,50,50);
  text-decoration: none;
  font-size:24px
}

  .dropdown-content div{
    display:block;
  }

	ul.vertical{
		list-style-type: none;
		margin-top: var(--header-size);
    top:0;
    left:0;
		padding: 25px 0 25px 0;
		width: 70px ;
		background-color: rgb(53, 53, 53);
		border-right:5px;
		border-color:black;
		height: calc( 100% - var(--header-size) );
		position: fixed;
		overflow: scroll;
		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:var(--header-size);
		width: 100%;
		background-color: rgb(24, 24, 24);
	}

	ul.horizontal li {
		font-size: 35px;
		float: left;
		align-items: center;
	}


	ul.horizontal li a.icon:hover:not(.active){
		background-color: black;
		border-radius:6px;
		color:white;
	}

	  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 {
		right: 0%;
		width: 0%;
		visibility: collapse;
		opacity: 0;
		color: white;
		font-size: 1.2em;
		font-weight: 600;
		transition-duration: .3s;
	  }

	  ul.vertical:hover .text {
		opacity:1;
		visibility:visible;
		width: 60%;
		transition-duration: .3s;
		padding-left: 15px;
	  }

	  .clyde:hover{
		  content: url("./assets/angry_clyde.png")
	  }

		#notification{
			position: absolute;
			top: 61px;
			right: 0;
			background-color: white;
			width: 300px;
			height: 600px;
			border-radius: 10px;
			margin: 10px;
		}

		#notification > li{
			color: black;
			list-style: none;
			font-size: 0.4em;
			display: block;
			background-color: #00FF00A0;
			margin: 1px;
			border-radius: 42px;
			padding: 10px;
		}

		#notification > li:hover{
				background-color: #00FF0000
		}
    
</style>

<!-- vim:set noet sts=0 sw=4 ts=2: -->