From 85527b4467d649586628141b4e8b04aae0b16e5a Mon Sep 17 00:00:00 2001
From: Christian Wolf <github@christianwolf.email>
Date: Sun, 7 Jan 2024 10:44:26 +0100
Subject: [PATCH] Create styles for mobile menu

---
 themes/tsc_vfl/assets/css/main.scss | 64 +++++++++++++++++++++++++++++
 1 file changed, 64 insertions(+)

diff --git a/themes/tsc_vfl/assets/css/main.scss b/themes/tsc_vfl/assets/css/main.scss
index f5c9ced..14ff107 100644
--- a/themes/tsc_vfl/assets/css/main.scss
+++ b/themes/tsc_vfl/assets/css/main.scss
@@ -2,7 +2,9 @@
 $total_width: 95%;
 
 $color_red: #cd1013;
+$color_background_mobile_menu: #f5f5f5;
 $color_background_mobile_menu_header: #e0e0e0;
+$color_hor_line: #a5a5a5;
 
 $gap_columns_persons: 25px;
 
@@ -487,6 +489,68 @@ h1 {
     }
 }
 
+.mobile-menu {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    margin: 30px 0;
+    padding: 30px 5% 0 5%;
+    box-sizing: border-box;
+
+    @include media-large() {
+        display: none;
+    }
+
+    border-top: 1px solid $color_hor_line;
+
+    
+    .level-1 {
+        width: 100%;
+
+        a {
+            background-color: $color_background_mobile_menu_header;
+        }
+    }
+    .level-2 {
+        width: 50%;
+
+        a {
+            background-color: $color_background_mobile_menu;
+        }
+    }
+    .level-1, .level-2 {
+        display: flex;
+        padding: 3px;
+        box-sizing: border-box;
+        
+        a {
+            width: 100%;
+            height: 100%;
+            padding: 5px;
+            box-sizing: border-box;
+            @include menu-style();
+
+            &.active {
+                color: white;
+                background-color: $color_red;
+            }
+        }
+    }
+}
+
+.mobile-menu-link {
+    display: block;
+    border: 1px solid black;
+    width: max-content;
+    padding: 5px 75px 5px 15px;
+    margin: 5px 0 5px 20px;
+    @include menu-style();
+
+    @include media-large() {
+        display: none;
+    }
+}
+
 .announcement-list {
     .entry {
         margin: 0 30px;