From ab16a7652e57950f097f9cf0d0de568c06b4afef Mon Sep 17 00:00:00 2001
From: reverend <reverend@reverend2048.de>
Date: Sun, 27 Dec 2020 23:49:06 +0100
Subject: [PATCH] new component for a menu

---
 components/05_Components/menu/_menu.scss      | 38 +++++++++++++++++
 components/05_Components/menu/menu.hbs        | 41 +++++++++++++++++++
 .../05_Components/menu/meun.config.json       |  1 +
 3 files changed, 80 insertions(+)
 create mode 100644 components/05_Components/menu/_menu.scss
 create mode 100644 components/05_Components/menu/menu.hbs
 create mode 100644 components/05_Components/menu/meun.config.json

diff --git a/components/05_Components/menu/_menu.scss b/components/05_Components/menu/_menu.scss
new file mode 100644
index 0000000..0fb06cb
--- /dev/null
+++ b/components/05_Components/menu/_menu.scss
@@ -0,0 +1,38 @@
+@mixin RV-Menu {
+
+    &--vertical &__List {
+        @include RV-FlexRow__Container--vertical;
+        width: 100%;
+    }
+
+    &--horizontal &__List {
+        @include RV-FlexRow__Container--horizontal;
+    }
+
+    &--spaced &__List {
+        gap: $-spacing-medium;
+    }
+
+    &__List {
+        @include RV-FlexRow__Container($-prefix: '.RV-Menu');
+        @include RV-ElementList;
+        padding: $-spacing-small;
+    }
+
+    &__Item {
+        @include RV-FlexRow__Item;
+        @include RV-FlexRow__Item--shorthands;
+
+        .RV-Link {
+            padding: $-spacing-small;
+            background-color: beige;
+            display: block;
+            white-space: nowrap;
+        }
+    }
+
+}
+
+.RV-Menu {
+    @include RV-Menu;
+}
\ No newline at end of file
diff --git a/components/05_Components/menu/menu.hbs b/components/05_Components/menu/menu.hbs
new file mode 100644
index 0000000..0082ec7
--- /dev/null
+++ b/components/05_Components/menu/menu.hbs
@@ -0,0 +1,41 @@
+<div class="RV-Menu RV-Menu--horizontal">
+	<ul class="RV-Menu__List">
+		<li class="RV-Menu__Item"><a href="#" class="RV-Link">Home</a></li>
+		<li class="RV-Menu__Item"><a href="#" class="RV-Link">Projects</a></li>
+		<li class="RV-Menu__Item"><a href="#" class="RV-Link">About</a></li>
+		<li class="RV-Menu__Item"><a href="#" class="RV-Link">Legal</a></li>
+	</ul>
+</div>
+
+<br><br>
+
+<div class="RV-Menu RV-Menu--vertical RV-Menu">
+	<ul class="RV-Menu__List">
+		<li class="RV-Menu__Item"><a href="#" class="RV-Link">Home</a></li>
+		<li class="RV-Menu__Item"><a href="#" class="RV-Link">Projects</a></li>
+		<li class="RV-Menu__Item"><a href="#" class="RV-Link">About</a></li>
+		<li class="RV-Menu__Item"><a href="#" class="RV-Link">Legal</a></li>
+	</ul>
+</div>
+
+<br><br>
+
+<div class="RV-Menu RV-Menu--horizontal RV-Menu--spaced">
+	<ul class="RV-Menu__List">
+		<li class="RV-Menu__Item"><a href="#" class="RV-Link">Home</a></li>
+		<li class="RV-Menu__Item"><a href="#" class="RV-Link">Projects</a></li>
+		<li class="RV-Menu__Item"><a href="#" class="RV-Link">About</a></li>
+		<li class="RV-Menu__Item"><a href="#" class="RV-Link">Legal</a></li>
+	</ul>
+</div>
+
+<br><br>
+
+<div class="RV-Menu RV-Menu--vertical RV-Menu--spaced">
+	<ul class="RV-Menu__List">
+		<li class="RV-Menu__Item"><a href="#" class="RV-Link">Home</a></li>
+		<li class="RV-Menu__Item"><a href="#" class="RV-Link">Projects</a></li>
+		<li class="RV-Menu__Item"><a href="#" class="RV-Link">About</a></li>
+		<li class="RV-Menu__Item"><a href="#" class="RV-Link">Legal</a></li>
+	</ul>
+</div>
\ No newline at end of file
diff --git a/components/05_Components/menu/meun.config.json b/components/05_Components/menu/meun.config.json
new file mode 100644
index 0000000..9e26dfe
--- /dev/null
+++ b/components/05_Components/menu/meun.config.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file