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);
*{
box-sizing: border-box;
}
html {
background: url("../pictures/Gerätehaus.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
@@ -9,29 +13,98 @@ html {
height: 100%;
}
nav a{
float: right;
text-decoration: none;
color: #FFFFFF;
font-size: 18px;
padding: 15px 25px;
display: inline-block;
transition: all 0.5s ease 0s;
.navbar {
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
background-color: #090CA9;
color: white;
}
#logo {
font-size: 20px;
text-transform: uppercase;
color: #FFFFFF;
font-weight: bold;
float: left;
padding: 20px;
margin-left: 0.5rem;
font-size: 1.5rem;
margin: .5rem;
}
.navbar-links {
height: 100%;
}
.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 {
overflow: hidden;
background-color: #090CA9;
margin-bottom: 5px;
}
@@ -43,10 +116,6 @@ body {
justify-content: center;
}
nav {
margin-right: 0.5rem;
}
h1 {
margin: 0px auto;
font-size: 26px;

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

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

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

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