Grisu/PunkteSystem-KSP
1
0
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

responsiv navbar

Browse Source
This commit is contained in:
Grisu
2022-06-19 16:02:11 +02:00
parent 9ddc2616de
commit 22bb085d5e
4 changed files with 132 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
app/public/css/styles.css
View File

@@ -1,5 +1,9 @@
@import url(./trashcan.css); @import url(./trashcan.css);
*{
box-sizing: border-box;
}
html { html {
background: url("../pictures/Gerätehaus.jpg") no-repeat center center fixed; background: url("../pictures/Gerätehaus.jpg") no-repeat center center fixed;
-webkit-background-size: cover; -webkit-background-size: cover;
@@ -9,29 +13,98 @@ html {
height: 100%; height: 100%;
} }
nav a{ .navbar {
float: right; display: flex;
text-decoration: none; position: relative;
color: #FFFFFF; justify-content: space-between;
font-size: 18px; align-items: center;
padding: 15px 25px; background-color: #090CA9;
display: inline-block; color: white;
transition: all 0.5s ease 0s;
} }
#logo { #logo {
font-size: 20px; font-size: 1.5rem;
text-transform: uppercase; margin: .5rem;
color: #FFFFFF; }
font-weight: bold;
float: left; .navbar-links {
padding: 20px; height: 100%;
margin-left: 0.5rem; }
.navbar-links ul {
display: flex;
margin: 0;
padding: 0;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
display: block;
text-decoration: none;
color: white;
padding: 1rem;
}
.navbar-links li:hover {
background-color: #002e5b;
}
.toggle-button {
position: absolute;
top: .75rem;
right: .1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
@media (max-width: 800px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links ul li {
text-align: end;
}
.navbar-links ul li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
} }
header { header {
overflow: hidden;
background-color: #090CA9;
margin-bottom: 5px; margin-bottom: 5px;
} }
@@ -43,10 +116,6 @@ body {
justify-content: center; justify-content: center;
} }
nav {
margin-right: 0.5rem;
}
h1 { h1 {
margin: 0px auto; margin: 0px auto;
font-size: 26px; font-size: 26px;

2
app/public/header_footer/footer.html
View File

@@ -1,2 +1,2 @@
</body>
</html> </html>

61
app/public/header_footer/header.php
View File

@@ -6,31 +6,40 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/styles.css">
<script src="../js/navbar.js" defer></script>
<script src="js/edit_table.js"></script> <script src="js/edit_table.js"></script>
</head> </head>
<body>
<header> <header>
<section> <nav class="navbar">
<div id="logo"> <div id="logo">
Punktesystem-KSP Punktesystem-KSP
</div> </div>
<nav> <a href="#" class="toggle-button">
<a href="logout.php">Logout</a> <span class="bar"></span>
<a href="index.php">Home</a> <span class="bar"></span>
<?php <span class="bar"></span>
if(isset($_SESSION['user_group'])) { </a>
if ($_SESSION['user_group'] == 'admin') { <div class="navbar-links">
echo "<a href=\"manage_user.php\">Benutzerverwaltung</a>\n"; <ul>
echo "<a href=\"mannschaft.php\">Mannschaftsverwaltung</a>\n"; <li><a href="index.php">Home</a></li>
echo "<a href=\"stationen.php\">Stationen</a>\n"; <?php
} if(isset($_SESSION['user_group'])) {
if ($_SESSION['user_group'] == 'statistics') { if ($_SESSION['user_group'] == 'admin') {
echo "<a href=\"statistik.php\">Ergebnisse</a>"; echo "<li><a href=\"manage_user.php\">Benutzerverwaltung</a></li>\n";
} else { echo "<li><a href=\"mannschaft.php\">Mannschaftsverwaltung</a></li>\n";
echo "<a href=\"statistik.php\">Ergebnisse eintragen</a>"; echo "<li><a href=\"stationen.php\">Stationen</a></li>\n";
} }
} if ($_SESSION['user_group'] == 'statistics') {
?> echo "<li><a href=\"statistik.php\">Ergebnisse</a></li>";
</nav> } else {
</section> echo "<li><a href=\"statistik.php\">Ergebnisse eintragen</a></li>";
</header> }
}
?>
<li><a href="logout.php">Logout</a></li>
</ul>
</div>
</nav>
</header>

6
app/public/js/navbar.js Normal file
View File

@@ -0,0 +1,6 @@
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})