Clyde/frontend/src/App.vue

147 lines
3.6 KiB
Vue
Raw Normal View History

2024-02-17 20:48:14 +01:00
<script setup>
2024-02-27 08:10:07 +01:00
import 'https://kit.fontawesome.com/fb3bbd0a95.js'
2024-02-28 17:57:13 +01:00
import { toast } from 'vue3-toastify';
import { ref } from 'vue'
const test = ref();
2024-02-28 17:57:13 +01:00
async function draw(e) {
test.value = (await fetch("http://localhost:8080/ping"));
test.value = await test.value.json();
toast(test.value['txt']);
}
2024-02-17 20:48:14 +01:00
</script>
<template>
2024-02-27 00:51:30 +01:00
<ul style="padding-top:60px"class="vertical">
<li style="margin-top: 25px;" ><a href="#Messages"><item class="fa-solid fa-comment" style="font-size: 40px;" ></item>
<div class="text">Messages</div> </a></li>
<li ><a href="#Notifications"><item class="fa-solid fa-bell" style="font-size: 40px;" ></item>
<div class="text">Notifications</div></a></li>
<li ><a href="#Schedule"><item class="fa-solid fa-calendar-days" style="font-size: 40px;" ></item>
<div class="text">Schedules</div></a></li>
<li ><a href="#Forum"><item class="fa-solid fa-envelope" style="font-size: 40px;" ></item>
<div class="text">Forum</div></a></li>
</ul>
2024-02-17 20:48:14 +01:00
2024-02-27 00:51:30 +01:00
<ul class="horizontal" style="box-shadow: 0px 3px 3px rgb(0, 0, 0);">
<li title="Home">
<a href="#home">
2024-02-28 17:57:13 +01:00
<img @click="draw" src="./assets/Clyde.png" style="width: 40px; height: auto; margin-top:4px">
2024-02-27 00:51:30 +01:00
</a>
</li>
<li title="Home">
<a href="#home">
<item class=" fa-solid fa-house" style="margin-top: 7px; margin-bottom: 3px;"></item>
</a>
</li>
<li style="float: right;" title="Account">
<a href="#Account">
<item class="fa-solid fa-user" style="margin-top: 7px; margin-bottom: 3px;"></item>
</a></li>
<li style="float: right;" title="Notifications">
<a href="#Notifications">
<item class="fa-solid fa-bell" style="margin-top: 7px; margin-bottom: 3px;"></item>
</a></li>
<li style="float: right;" title="Options">
<a href="#Options">
<item class="fa-solid fa-gear" style="margin-top: 7px; margin-bottom: 3px;"></item>
</a></li>
</ul>
2024-02-17 20:48:14 +01:00
</template>
<style scoped>
2024-02-27 00:51:30 +01:00
ul.vertical{
list-style-type: none;
margin: 0;
padding: 0;
width: 70px ;
background-color: rgb(53, 53, 53);
border-right:5px;
border-color:black;
height: 100%;
position: fixed;
overflow:auto;
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;
display: block ;
list-style-type:none;
margin:0;
padding: 0;
top: 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-radius: 40px;
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;
}
2024-02-17 20:48:14 +01:00
</style>