Implement basic menu styling for project menu

config.toml

@@ -3,6 +3,8 @@ base_url = "https://teckids.org"
 title = "Teckids"
 description = "Eine verstehbare (digitale) Welt – Gemeinsam, für Alle"
 
+default_language = "de"
+
 output_dir = "public"
 compile_sass = true
 build_search_index = true
@@ -11,8 +13,8 @@ hard_link_static = true
 #minify_html = true
 
 taxonomies = [
-  { name = "Projekt", render = false },
-  { name = "Zielgruppe", render = false },
+  { name = "projekt", render = false },
+  { name = "zielgruppe", render = false },
 ]
 
 [markdown]

content/hack-n-fun/_index.md

++++
+title = "Hack'n'Fun"
+description = "Technik gemeinsam ausprobieren und verstehen"
++++

content/indiedact/_index.md

++++
+title = "Indiedact"
+description = "Partizipatives Lernen für alle"
++++

content/schul-frei/_index.md

++++
+title = "schul-frei"
+description = "Verstehbare digitale Werkzeuge für Bildungseinrichtungen"
++++

sass/menu.scss → sass/_menu.scss

@@ -27,4 +27,8 @@
             display: block;
         }
     }
-}
\ No newline at end of file
+}
+
+.navbar-dropdown.wide-dropdown {
+    width: 100%;
+}

sass/_teckids.scss

+$teckids-orange: #ff6600;
+$teckids-blue: #0084ff;
+
+$projects: hack-n-fun, schul-frei, indiedact;
+$project-colors: (
+    hack-n-fun: #51cb20,
+    schul-frei: #750d37,
+    indiedact: #ffcb47,
+);
+
+.menu-project-section {
+    border-left: 0.5em solid;
+}
+
+@each $project in $projects {
+    #menu-project-section-#{$project} {
+        border-color: map-get($project-colors, $project);
+    }
+}

sass/style.scss

@@ -2,6 +2,8 @@
 
 $family-sans-serif: "Roboto", sans-serif;
 
+@import "./_teckids.scss";
+
 @import "../node_modules/bulma/bulma.sass";
 
-@import "./menu.scss"
+@import "./_menu.scss";

templates/menu.html

@@ -16,14 +16,14 @@
         <div class="navbar-start">
             <div class="navbar-item has-dropdown is-hoverable">
                 <a href="#" class="navbar-item">Projekte</a>
-                <div class="navbar-dropdown">
-                    TBA
+                <div class="navbar-dropdown wide-dropdown">
+                    {% include "menu/projects.html" %}
                 </div>
             </div>
 
             <div class="navbar-item has-dropdown is-hoverable">
                 <a href="#" class="navbar-item">Informationen für…</a>
-                <div class="navbar-dropdown">
+                <div class="navbar-dropdown wide-dropdown">
                     TBA
                 </div>
             </div>

templates/menu/projects.html

+{% set projects = get_taxonomy(kind = "projekt") %}
+
+{% for project in projects.items %}
+<section class="section menu-project-section" id="menu-project-section-{{ project.slug }}">
+  {% set section = get_section(path = project.slug ~ "/_index.md") %}
+  <h1 class="title">{{ section.title }}</h1>
+  <h2 class="subtitle">{{ section.description }}</h2>
+
+  {% for page in project.pages %}
+    <a href="{{ page.permalink }}">{{ page.title }}</a>
+  {% endfor %}
+</section>
+{% endfor %}
\ No newline at end of file