nav hiding for small screens, incomplete

This commit is contained in:
janis
2023-06-21 08:30:55 +02:00
parent ee4ecd4aa8
commit 30c1b0fa2e

View File

@@ -12,6 +12,7 @@
<div class="top-bar"> <div class="top-bar">
<h1>Admin panel</h1> <h1>Admin panel</h1>
</div> </div>
<button class="hideNav">&#9776</button>
<nav class="side-nav"> <nav class="side-nav">
<img src="@/assets/logo.png" alt="libreevent logo" style="width: 80%; margin-left: 10%; margin-bottom: 5%;"> <img src="@/assets/logo.png" alt="libreevent logo" style="width: 80%; margin-left: 10%; margin-bottom: 5%;">
<router-link to="/admin" class="admin-menu">Home</router-link> <router-link to="/admin" class="admin-menu">Home</router-link>
@@ -100,6 +101,20 @@
transition: 0.4s; transition: 0.4s;
} }
.hideNav {
border: none;
font-size: 300%;
color: var( --secondary-color );
width: fit-content;
background-color: rgba( 0, 0, 0, 0 );
position: fixed;
}
@media only screen and (min-width: 1299px) {
.hideNav {
display: none;
}
}
</style> </style>
<style> <style>