add dropdown menu to donation web

district/migrations/0127_alter_districthomepage_menu.py

+# Generated by Django 4.1.10 on 2024-02-10 15:31
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('district', '0126_districtpdfpage'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='districthomepage',
+            name='menu',
+            field=wagtail.fields.StreamField([('menu_item', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock(label='Titulek', required=True)), ('page', wagtail.blocks.PageChooserBlock(label='Stránka', required=False)), ('link', wagtail.blocks.URLBlock(label='Odkaz', required=False))])), ('menu_parent', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock(label='Titulek', required=True)), ('menu_items', wagtail.blocks.ListBlock(wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock(label='Titulek', required=True)), ('page', wagtail.blocks.PageChooserBlock(label='Stránka', required=False)), ('link', wagtail.blocks.URLBlock(label='Odkaz', required=False))]), label='Položky menu'))]))], blank=True, use_json_field=True, verbose_name='Menu'),
+        ),
+    ]

donate/menu.py

 from wagtail.fields import StreamField
 
 from shared.blocks import MenuItemBlock as MenuItemBlockBase
+from shared.blocks import MenuParentBlock
 from shared.models import MenuMixin as MenuMixinBase
 
 
@@ -20,7 +21,10 @@ class MenuItemBlock(MenuItemBlockBase):
 
 class MenuMixin(MenuMixinBase):
     menu = StreamField(
-        [("menu_item", MenuItemBlock())],  # , ("menu_parent", MenuParentBlock())
+        [
+            ("menu_item", MenuItemBlock()),
+            ("menu_parent", MenuParentBlock(template="donate/blocks/navbar_submenu.html")),
+        ],  # , ("menu_parent", MenuParentBlock())
         verbose_name="Menu",
         blank=True,
         use_json_field=True,

donate/migrations/0044_alter_donatehomepage_menu.py

+# Generated by Django 4.1.10 on 2024-02-10 15:52
+
+from django.db import migrations
+import wagtail.blocks
+import wagtail.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('donate', '0043_alter_donateprojectpage_form_title'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='donatehomepage',
+            name='menu',
+            field=wagtail.fields.StreamField([('menu_item', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock(label='Titulek', required=True)), ('page', wagtail.blocks.PageChooserBlock(label='Stránka', required=False)), ('link', wagtail.blocks.URLBlock(label='Odkaz', required=False))])), ('menu_parent', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock(label='Titulek', required=True)), ('menu_items', wagtail.blocks.ListBlock(wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock(label='Titulek', required=True)), ('page', wagtail.blocks.PageChooserBlock(label='Stránka', required=False)), ('link', wagtail.blocks.URLBlock(label='Odkaz', required=False))]), label='Položky menu'))]))], blank=True, use_json_field=True, verbose_name='Menu'),
+        ),
+    ]

donate/static/donate/assets/css/icons.css

@@ -55,6 +55,9 @@ i[class^="icon"] {
 .icon-chevron-right:before {
   content: "\f054";
 }
+.icon-chevron-down:before {
+  content: "\e925";
+}
 .icon-external-link:before {
   content: "\f08e";
 }

donate/static/donate/assets/css/style.css

@@ -1279,3 +1279,65 @@ img.full-width {
 }
 
 /* END TailwindCSS-based image formatting */
+
+/* The container <div> - needed to position the dropdown content */
+.dropdown {
+  position: relative;
+  cursor: pointer;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+  display: none;
+  position: absolute;
+  z-index: 1;
+}
+
+@media screen and (max-width: 1200px) {
+  .dropdown-content {
+    display: block;
+    position: unset;
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  .dropbtn {
+    display: none;
+  }
+}
+
+/* Links inside the dropdown */
+.dropdown-content a {
+  display: block;
+  color: white;
+}
+
+@media screen and (min-width: 1200px) {
+  /* Show the dropdown menu on hover */
+  .dropdown:hover .dropdown-content,
+  .dropdown:focus .dropdown-content{
+      display: block;
+      background: black;
+      padding: 0.8rem;
+      margin-left: -0.8rem;
+      width: 100%;
+  }
+
+  .dropdown:hover,
+  .dropdown:focus {
+      background: black
+  }
+}
+
+.drop-arrow {
+    margin-left: 2px;
+    color: #8a8a8a;
+    position: relative;
+    top: -3px;
+}
+
+@media screen and (max-width: 1200px) {
+    .drop-arrow {
+        display: none;
+    }
+}

donate/templates/donate/blocks/navbar_submenu.html

+<div
+    class="dropdown nav-link js-scroll-anchor"
+    tabindex="0"
+>
+    <div class="dropbtn">
+        {{ self.title }}
+
+        <span class="drop-arrow">🞃</span>
+    </div>
+
+    <div class="dropdown-content">
+        {% for nested_item in self.menu_items %}
+            <li>
+                {% firstof nested_item.page.url nested_item.link as target %}
+                <a href="{{ target }}">
+                    {{ nested_item.title }}
+                </a>
+            </li>
+        {% endfor %}
+    </div>
+</div>

donate/templates/donate/donate_home_page.html

@@ -9,6 +9,17 @@
     <div class="container">
       <div class="row align-items-center">
 
+        <div class="col-12 col-lg-5">
+          {% image page.lead_preview width-500 as lead_preview %}
+          {% if page.lead_video %}
+          <a data-fancybox="" href="{{ page.lead_video }}" title="Přehrát video">
+            <img class="img-fluid lazyload w-100" data-src="{{ lead_preview.url }}" alt="Náhled videa">
+          </a>
+          {% else %}
+          <img class="img-fluid lazyload" data-src="{{ lead_preview.url }}" alt="Náhled videa">
+          {% endif %}
+        </div><!-- /column -->
+
         <div class="col-12 col-lg-7 mb-4 mb-lg-0 py-4 text-md-left">
           <h1 class="lead homepage-heading">{{ page.lead_title }}</h1>
           <div class="lead lead-small mb-4">{{ page.lead_body|richtext }}</div>
@@ -22,17 +33,6 @@
           </div> <!-- /row -->
         </div><!-- /column -->
 
-        <div class="col-12 col-lg-5">
-          {% image page.lead_preview width-500 as lead_preview %}
-          {% if page.lead_video %}
-          <a data-fancybox="" href="{{ page.lead_video }}" title="Přehrát video">
-            <img class="img-fluid lazyload w-100" data-src="{{ lead_preview.url }}" alt="Náhled videa">
-          </a>
-          {% else %}
-          <img class="img-fluid lazyload" data-src="{{ lead_preview.url }}" alt="Náhled videa">
-          {% endif %}
-        </div><!-- /column -->
-
       </div> <!-- /row -->
     </div> <!-- /container -->
   </section>

shared/blocks/base.py

@@ -74,9 +74,7 @@ class MenuItemBlock(blocks.StructBlock):
 
 class MenuParentBlock(blocks.StructBlock):
     title = blocks.CharBlock(label="Titulek", required=True)
-    menu_items = blocks.ListBlock(
-        MenuItemBlock(),
-    )
+    menu_items = blocks.ListBlock(MenuItemBlock(), label="Položky menu")
 
     class Meta:
         label = "Podmenu"