WST/Ticketing-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add icon nav bar

Browse Source
This commit is contained in:
Antoine BRYJA
2025-11-10 18:05:30 +01:00
parent 6d1f34f19f
commit 7b7086cc1e
2 changed files with 77 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
front-end/index.html
View File

@@ -3,6 +3,10 @@
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<link href='https://fonts.googleapis.com/css?family=Fira Sans' rel='stylesheet'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>

91
front-end/src/components/NavBar.vue
View File

@@ -1,40 +1,69 @@
<template>
<div class="container-nav">
<div class="nav-logo" style="margin-left:1vw;margin-top:1vh;">
<div class="nav-logo">
<img src="/logologoWsl.svg" alt="Logo" />
</div>
<ul>
<li><RouterLink to="/"><span><img src="/dashboard.svg"/></span>DASHBOARD</RouterLink></li>
<ul class="ul-nav">
<li>
<RouterLink class="li-solo" to="/">
<span class="material-icons">space_dashboard</span>
<span>DASHBOARD</span>
</RouterLink>
</li>
</ul>
<ul>
<ul class="ul-nav">
<li class="li-nav-list" @click="toggleCLient">
<span><img src="/client.svg"/></span>CLIENT <span><img src="/arrow.svg" /></span>
<span class="material-icons">person</span>
<span>CLIENT</span>
<span class="material-icons">arrow_drop_down</span>
</li>
<ul v-show="showClient" class="ul-nav">
<li>
<span class="material-icons">person_add</span>
<span>Nouveau</span>
</li>
<li>
<span class="material-icons">list</span>
<span>Liste</span>
</li>
<ul v-show="showClient">
<li><span><img src="/addUser.svg"/></span>Nouveau</li>
<li><span><img src="/list.svg"/></span>Liste</li>
</ul>
</ul>
<ul>
<ul class="ul-nav">
<li class="li-nav-list" @click="toggleTicket">
<span><img src="/ticket.svg"/></span>TICKET <span><img src="/arrow.svg" /></span>
<span class="material-icons">sell</span>
<span>TICKET</span>
<span class="material-icons">arrow_drop_down</span>
</li>
<ul v-show="showTicket" class="ul-nav">
<li>
<span class="material-icons">add</span>
<span>Nouveau</span>
</li>
<li>
<span class="material-icons">list</span>
<span>Liste</span>
</li>
<ul v-show="showTicket">
<li><span><img src="/add.svg"/></span>Nouveau</li>
<li><span><img src="/list.svg"/></span>Liste</li>
</ul>
</ul>
<ul>
<ul class="ul-nav">
<li class="li-nav-list" @click="toggleIntervention">
<span><img src="/inter.svg"/></span> INTERVENTION <span><img src="/arrow.svg" /></span>
<span class="material-icons">work</span>
<span>INTERVENTION</span>
<span class="material-icons">arrow_drop_down</span>
</li>
<ul v-show="showIntervention" class="ul-nav">
<li>
<span class="material-icons">calendar_month</span>
<span>Calendrier</span>
</li>
<li>
<span class="material-icons">list</span>
<span>Liste</span>
</li>
<ul v-show="showIntervention">
<li><span><img src="/calandar.svg"/></span>Calendrier</li>
<li><span><img src="/list.svg"/></span>Liste</li>
</ul>
</ul>
</div>
@@ -64,10 +93,36 @@ const toggleCLient = () => {
<style scoped>
.container-nav {
user-select: none;
font-family: 'Fira Sans';font-size: 16px;
font-weight: bold;
color: #2D4570;
}
.ul-nav > li{
display: flex;
align-items: center;
justify-content: start;
margin-top: 1rem;
}
.ul-nav > li > span {
padding-right: 1vw;
align-self: end;
}
.li-solo > span{
padding-right: 1vw;
align-self: end;
}
.ul-nav{
padding-left: 1rem;
padding-top: 0.01rem;
}
.li-nav-list {
cursor: pointer;
}
.nav-logo{
margin-left:1vw;
margin-top:2vh;
}