137 lines
3.4 KiB
Vue
137 lines
3.4 KiB
Vue
<script setup>
|
|
import 'https://kit.fontawesome.com/fb3bbd0a95.js'
|
|
</script>
|
|
|
|
<template>
|
|
<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>
|
|
|
|
<ul class="horizontal" style="box-shadow: 0px 3px 3px rgb(0, 0, 0);">
|
|
<li title="Home">
|
|
<a href="#home">
|
|
<img src="./assets/Clyde.png" style="width: 40px; height: auto; margin-top:4px">
|
|
</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>
|
|
</template>
|
|
|
|
<style scoped>
|
|
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;
|
|
}
|
|
</style>
|