diff --git a/_src/assets/scss/_lib/_burger.scss b/_src/assets/scss/_lib/_burger.scss
deleted file mode 100644
index 4611c60b2da24fc7080087dded960c4f2c12456a..0000000000000000000000000000000000000000
--- a/_src/assets/scss/_lib/_burger.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.burger-icon {
- @include burger(25px, 3px, 5px, #444);
-}
-
-.menu-button.is-active .burger-icon {
- @include burger-to-cross;
-}
-
-#menu {
- float: right;
- margin: ($header-padding + 10px) 10px 0 0;
-}
\ No newline at end of file
diff --git a/_src/assets/scss/_lib/_menu.scss b/_src/assets/scss/_lib/_menu.scss
new file mode 100644
index 0000000000000000000000000000000000000000..34f59007bfdc4a14f7729470c62096762f2608f5
--- /dev/null
+++ b/_src/assets/scss/_lib/_menu.scss
@@ -0,0 +1,47 @@
+@use "sass:color";
+
+.burger-icon {
+ @include burger(25px, 3px, 5px, #444);
+}
+
+#menu {
+ align-content: end;
+ cursor: pointer;
+ float: right;
+ margin: ($header-padding + 10px) 10px 0 0;
+
+ &.is-active .burger-icon {
+ float: right;
+ @include burger-to-cross;
+ }
+ &.is-active #menuContent {
+ display: block;
+ }
+}
+
+#menuContent {
+ background-color: color.adjust($color-primary, $lightness:-20%);
+ display: none;
+ margin: 10px 0 0;
+ ul {
+ list-style-type: none;
+ padding: 0;
+ li {
+ border-bottom: 2px solid color.adjust($color-primary, $lightness:-50%);
+ padding: 3px 15px;
+
+ &:hover{
+ background-color: color.adjust($color-primary, $lightness:-25%);
+ }
+
+ &:last-child{
+ border-bottom: 0;
+ }
+ }
+ a{
+ font-size: $font-size * 1.5;
+ color: $color-text;
+ text-decoration: none;
+ }
+ }
+}
\ No newline at end of file
diff --git a/_src/assets/scss/_lib/_mixins.scss b/_src/assets/scss/_lib/_mixins.scss
index a8212889d65027205824da4d25148539bf13b57e..868116b170e3dd21a00126b6733c674d989e0b0e 100644
--- a/_src/assets/scss/_lib/_mixins.scss
+++ b/_src/assets/scss/_lib/_mixins.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
@mixin font-sizer($size: $font-size){
font-size: $size;
line-height: round($size * 1.2);
@@ -36,7 +38,7 @@
}
@mixin darkBox($roundCorner: false, $padding: 15px){
- background-color: darken($color-primary, 20%);
+ background-color: color.adjust($color-primary, $lightness:-20%);
padding: $padding 0;
@if $roundCorner{
diff --git a/_src/assets/scss/_lib/_typo.scss b/_src/assets/scss/_lib/_typo.scss
index 86be47faea43adaa133a2fb9f5ad0f231998199d..4fa991f5c92aca768db69c4e6f08c1aa04461e57 100644
--- a/_src/assets/scss/_lib/_typo.scss
+++ b/_src/assets/scss/_lib/_typo.scss
@@ -1,7 +1,7 @@
@use "sass:color";
body {
- background-color: lighten($color-primary, 10%);
+ background-color: color.adjust($color-primary, $lightness: 10%);
color: $color-text;
font-family: $font-family;
font-size: $font-size;
diff --git a/_src/assets/scss/style.scss b/_src/assets/scss/style.scss
index 24dd6df1fa4298390dae6f8a9e5bf249158759f2..e06dd5f932f354892580a84aa4f675f43294066a 100644
--- a/_src/assets/scss/style.scss
+++ b/_src/assets/scss/style.scss
@@ -7,4 +7,4 @@
@import "_lib/header";
@import "_lib/icons";
@import "~sass-burger";
-@import "_lib/burger";
\ No newline at end of file
+@import "_lib/menu";
\ No newline at end of file
diff --git a/_src/assets/ts/burger.ts b/_src/assets/ts/menu.ts
similarity index 64%
rename from _src/assets/ts/burger.ts
rename to _src/assets/ts/menu.ts
index aa7044bb36670f6fe6d04913114c2830ca0ec582..ac746066fef858fd870d551749f59b29ab51bde5 100644
--- a/_src/assets/ts/burger.ts
+++ b/_src/assets/ts/menu.ts
@@ -1,4 +1,4 @@
-let menuButton:HTMLElement = document.getElementById('menuButton');
+let menuButton:HTMLElement = document.getElementById('menu');
menuButton.addEventListener('click', function (e) {
menuButton.classList.toggle('is-active');
e.preventDefault();
diff --git a/_src/index.html b/_src/index.html
index 9a9b61bb09885c2aa35026b7a6822757f72f17cc..72ad8c4143c3dd354bbd48325c3b139c88b5ed0e 100644
--- a/_src/index.html
+++ b/_src/index.html
@@ -11,9 +11,14 @@
<body>
<header id="banner">
<span id="menu">
- <a href="#" class="menu-button" id="menuButton">
- <span class="burger-icon"></span>
- </a>
+ <span class="burger-icon"></span>
+ <div id="menuContent">
+ <ul>
+ <li><a href="#">Home</a></li>
+ <li><a href="#">Legal</a></li>
+ <li><a href="#">About</a></li>
+ </ul>
+ </div>
</span>
<h1>Seitenname</h1>
</header>
@@ -37,7 +42,7 @@
<footer id="copyright">
Copyright 2021 Jonas Leder
</footer>
-<script src="assets/ts/burger.ts"></script>
+<script src="assets/ts/menu.ts"></script>
</body>
</html>
\ No newline at end of file