PGL/Clyde
3
2
Fork 3
Code Issues 13 Pull Requests Actions Projects 3 Releases 2 Wiki Activity

Table for navigation bars

Browse Source
This commit is contained in:
Wawilski
2024-03-01 15:21:10 +01:00
committed by Wal
parent 057d8ff001
commit 0b0fe9ae78
2 changed files with 50 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
frontend/src/App.vue
View File

@ -13,18 +13,12 @@
</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);">
<table>
<tr>
<th style="z-index:-1;width:70px;"></th>
<th>
<ul class="horizontal">
<li title="Home">
<a href="#home">
<img @click="draw" src="./assets/Clyde.png" style="width: 40px; height: auto; margin-top:4px">
@ -47,21 +41,56 @@
<a href="#Options">
<item class="fa-solid fa-gear" style="margin-top: 7px; margin-bottom: 3px;"></item>
</a></li>
</ul>
</th>
</tr>
<tr>
<td>
<ul 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>
</td>
<td>
<div style=" position: absolute; width: 90%; height: 93%; display: flex; align-items: center; justify-content: center;">
<p style="background-color:#f0f;font-size= 90px;"> IL FAUT INSERER UN TRUC ICI </p>
</div>
</td>
</tr>
</table>
</template>
<style scoped>
table {
height: 100%;
width: 100%;
border-spacing: 0;
}
th {
height: 61px;
}
ul.vertical{
list-style-type: none;
margin: 0;
padding: 0;
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:auto;
overflow:;
transition-duration: .3s;
}
@ -76,7 +105,6 @@
background-color: rgb(112, 112, 112);
border-radius:6px;
color: white;
transform: translate(0px ,1px);
}
@ -91,11 +119,14 @@
}
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%;
@ -121,7 +152,8 @@
ul.vertical:hover {
z-index: 100;
width: 250px;
border-radius: 40px;
border-top-right-radius: 40px;
box-shadow: 3px 0px 3px rgb(0, 0, 0);
transition-duration: .3s;
}

5
frontend/src/assets/main.css
View File

@ -1,6 +1,7 @@
body {
background-color: rgb(53, 25, 60);
margin:0;
overflow-x:hidden;
}
.logBoxCenterer {
@ -34,10 +35,6 @@ body {
gap: 15px;
}
.inputBox{
width: px;
}
.inputBox input {
width:100%;