CHANGELOG.md

@@ -1,12 +1,3 @@
-# v1.2.3
-## 11/26/2023
-
-1.  [](#improved)
-    * Updated CSS styles
-    * Macros redefined for navigation (now, clickable parent menu items)
-2.  [](#bugfix)
-    * Fixed pimary image definition in base template
-  
 # v1.2.2
 ## 10/28/2023
 

assets/css/main.css

@@ -79,7 +79,7 @@ body {
 
 @media screen and (max-width: 480px) {
   html, body {
-    min-width: auto;
+    min-width: 320px;
   }
 }
 html {
@@ -2401,7 +2401,7 @@ ul.posts article header > :last-child {
     border-left: 0;
     border-right: 0;
     left: -3em;
-    width: calc(100% + 3em * 2);
+    width: calc(100% + (3em * 2));
   }
   .post > header {
     -moz-flex-direction: column;
@@ -2470,7 +2470,7 @@ ul.posts article header > :last-child {
     padding: 1.5em 1.5em 0.5em 1.5em;
     left: -1.5em;
     margin: 0 0 2em 0;
-    width: calc(100% + 1.5em * 2);
+    width: calc(100% + (1.5em * 2));
   }
   .post > header {
     padding: 3em 1.5em 0.5em 1.5em;
@@ -2939,20 +2939,14 @@ ul.menulink > li > ul {
   list-style: none;
   font-family: "Raleway", Helvetica, sans-serif;
   padding: 0.1em 0 0 0;
-  margin: 0 0 0 1em;
+  margin: 0em;
   line-height: 2.3em;
-  -webkit-transition: color 0.2s ease;
-  transition: color 0.2s ease;
-  text-transform: uppercase;
-  font-weight: 600;
 }
 
 ul.menulink > li a.tags {
   border: dotted 1px rgba(119, 118, 118, 0.65);
   padding: 0.2em;
   font-size: 0.8em;
-  text-transform: uppercase;
-  font-weight: 400;
 }
 
 ul.menulink > li a:hover.tags {
@@ -2960,12 +2954,21 @@ ul.menulink > li a:hover.tags {
   color: #f4f4f4 !important;
 }
 
-ul.menulink > li > ul > li {
+ul.menulink > li > ul,
+ul.menulink > li a span {
   -webkit-transition: color 0.2s ease;
   transition: color 0.2s ease;
+  font-size: 0.9em;
+  text-transform: uppercase;
+  font-weight: 400;
+}
+
+ul.menulink > li a span li {
+  -webkit-transition: color 0.2s ease;
+  transition: color 0.2s ease;
+  font-size: 0.8em;
   font-weight: 400;
   text-transform: uppercase;
-  font-size: 0.9em;
 }
 
 ul.menulink > li * {
@@ -2978,8 +2981,48 @@ ul.menulink > li a:hover span {
 
 ul.subitem {
   display: block;
-  margin: 0 0 0 0.5em;
+}
-  padding-left: 0;
+
+ul.subitem > li > ul,
+ul.subitem > li a span {
+  -webkit-transition: color 0.2s ease;
+  transition: color 0.2s ease;
+  font-size: 0.9em;
+  font-weight: 400;
+  text-transform: capitalize;
+  margin-bottom: 0;
+}
+
+ul.subitem > li {
+  list-style-type: none;
+  margin-left: 0.4em;
+}
+
+ul.subitem_hide {
+  display: none;
+}
+
+ul.subitem_hide > li > ul,
+ul.subitem_hide > li a span {
+  -webkit-transition: color 0.2s ease;
+  transition: color 0.2s ease;
+  margin-bottom: 0;
+  font-weight: 400;
+  text-transform: capitalize;
+}
+
+ul.subitem_hide > li {
+  list-style-type: none;
+  margin-left: 0.4em;
+}
+
+.dropdown-btn {
+  cursor: pointer;
+}
+
+.fa-caret-down {
+  float: right;
+  padding-right: 8px;
 }
 
 /* CSS for Headings */
@@ -3031,7 +3074,7 @@ ul.subitem {
     border-left: 0;
     border-right: 0;
     left: -3em;
-    width: calc(100% + 3em * 2);
+    width: calc(100% + (3em * 2));
   }
   .heading #breadcrumbs {
     margin: 0 0 2em 0;
@@ -3050,7 +3093,7 @@ ul.subitem {
     padding: 1.5em 1.5em 0.5em 1.5em;
     left: -1.5em;
     margin: 0 0 2em 0;
-    width: calc(100% + 1.5em * 2);
+    width: calc(100% + (1.5em * 2));
   }
   .heading .title h2 {
     font-size: 1.1em;

assets/sass/base/_page.scss

@@ -19,7 +19,7 @@
 	// Ensures page width is always >=320px.
 		@include breakpoint('<=xsmall') {
 			html, body {
-				min-width: auto;
+				min-width: 320px;
 			}
 		}
 

assets/sass/components/_sidebarmenu.scss

@@ -20,31 +20,32 @@ ul.menulink > li > ul
     list-style: none;
     font-family: _font(family-heading);
     padding: 0.1em 0 0 0;
-    margin: 0 0 0 1em;
+    margin: 0em;
     line-height: 2.3em;
-    -webkit-transition: color 0.2s ease;
-    transition: color 0.2s ease;
-    text-transform: uppercase;
-    font-weight: _font(weight-medium);
 }
 ul.menulink > li a.tags {
     border: dotted 1px rgba(119, 118, 118, 0.65);
     padding: 0.2em;
     font-size: 0.8em;
-    text-transform: uppercase;
-    font-weight: _font(weight);
 }
 ul.menulink > li a:hover.tags  {
     background-color: _palette(accent);
     color: _palette(bg-alt) !important;
 }
-
+ul.menulink > li > ul,
-ul.menulink > li > ul > li {
+ul.menulink > li a span {
     -webkit-transition: color 0.2s ease;
     transition: color 0.2s ease;
+    font-size: 0.9em;
+    text-transform: uppercase;
+    font-weight: _font(weight);
+}
+ul.menulink > li a span li {
+    -webkit-transition: color 0.2s ease;
+    transition: color 0.2s ease;
+    font-size: 0.8em;
     font-weight: _font(weight);
     text-transform: uppercase;
-    font-size: 0.9em;
 }
 
 ul.menulink > li * {
@@ -56,6 +57,41 @@ ul.menulink > li a:hover span {
 }
 ul.subitem {
     display:block;
-    margin: 0 0 0 0.5em;
+}
-    padding-left: 0;
+ul.subitem > li > ul,
+ul.subitem > li a span {
+    -webkit-transition: color 0.2s ease;
+    transition: color 0.2s ease;
+    font-size: 0.9em;
+    font-weight: _font(weight);
+    text-transform: capitalize;
+    margin-bottom: 0;
+}
+ul.subitem > li {
+    list-style-type: none;
+    margin-left: 0.4em;
+    }
+ul.subitem_hide {
+    display:none;
+}
+ul.subitem_hide > li > ul,
+ul.subitem_hide > li a span
+{
+
+    -webkit-transition: color 0.2s ease;
+    transition: color 0.2s ease;
+    margin-bottom: 0;
+    font-weight: _font(weight);
+    text-transform: capitalize;
+}
+ul.subitem_hide > li {
+    list-style-type: none;
+    margin-left: 0.4em;
+}
+.dropdown-btn {
+    cursor: pointer;
+}
+.fa-caret-down {
+    float: right;
+    padding-right: 8px;
 }

blueprints.yaml

@@ -1,7 +1,7 @@
 name: Future 2021
 slug: future2021
 type: theme
-version: 1.2.3
+version: 1.2.2
 description: Grav Future Imperfect by HTML5 UP (Version 2021)
 icon:  microchip
 author:

templates/macros/macros.html.twig

@@ -20,21 +20,30 @@
 {% macro nav_loop(page) %}
   {% import _self as nav_macros %}
   {% for p in page.children.visible %}
-    {% set active_page = (p.active or p.activeChild) ? 'active' : '' %}
+    {% set current_page = (p.active or p.activeChild) ? 'active' : '' %}
-    {% set has_visible_children = p.children.visible.count > 0 %}
+    {% if p.children.visible.count > 0 %}
-    <li>
+      <li class="{{ current_page }}">
-      <a href="{{ p.url }}" class="{{ active_page }}">
+        <a>
-        {% if p.header.icon %}
+          {% if p.header.icon %}
             <i class="fa fa-{{ p.header.icon }}"></i>
-        {% endif %}
+          {% endif %}
-        {{ p.menu }}
+          {{ p.menu }}
-        {% if has_visible_children %}&nbsp;<i class="fa fa-angle-down"></i>{% endif %}
+            {% if p.routable ?? false %}&nbsp;<i class="fa fa-angle-down"></i>
-      </a>
+            {% endif %}
-      {% if has_visible_children %}
+        </a>
-      <ul>
+        <ul>
-        {{ nav_macros.nav_loop(p) }}
+          {{ nav_macros.nav_loop(p) }}
-      </ul>
+        </ul>
-      {% endif %}
+      </li>
-    </li>
+    {% else %}
+      <li class="{{ current_page }}">
+        <a href="{{ p.url }}">
+          {% if p.header.icon %}
+            <i class="fa fa-{{ p.header.icon }}"></i>
+          {% endif %}
+          <span>{{ p.menu }}</span>
+        </a>
+      </li>
+    {% endif %}
   {% endfor %}
 {% endmacro %}

templates/partials/base.html.twig

@@ -15,7 +15,7 @@
 
 {# Define if the primary image and the attributes of width and height are shown #}
 {% set show_image = header_var('show_pageimage')|defined(true) %}
-{% set image = page.media[page.header.primaryImage] ?: page.media.all|filter((v, k) => k != page.header.avatarImage and (v.type == 'image' or v.type == 'vector'))|first %}
+{% set image = page.media[page.header.primaryImage] ?: page.media.all|filter((v, k) => k != page.header.primaryImage and (v.type == 'image' or v.type == 'vector'))|first %}
 {% set img_width = header_var('image_width')|default(1038) %}
 {% set img_height = header_var('image_height')|default(437) %}
 

templates/partials/sidebar_navigation.html.twig

@@ -1,22 +1,34 @@
 {% block menu_navigation %}
-{% macro loop(page) %}
+  {% macro loop(page) %}
-{% for p in page.children.visible %}
+    {% for p in page.children.visible %}
-    {% set current_page = (p.active or p.activeChild) ? 'active' : '' %}
+      {% set current_page = (p.active or p.activeChild) ? 'active' : '' %}
-    <li class="{{ current_page }}">
+      {% if p.children.visible.count > 0 %}
-        <a href="{{ p.url }}">
+        <li class="{{ current_page }}">
+          <a class="dropdown-btn">
             {% if p.header.icon %}
-                <i class="fa fa-{{ p.header.icon }}"></i>
+              <i class="fa fa-{{ p.header.icon }}"></i>
+            {% endif %}
+            <span>{{ p.menu }}
+              {% if p.routable ?? false %}&nbsp;<i class="fa fa-caret-down"></i>
+              {% endif %}
+            </span>
+          </a>
+          <ul class="subitem_hide">
+            {{ _self.loop(p) }}
+          </ul>
+        </li>
+      {% else %}
+        <li class="{{ current_page }}">
+          <a href="{{ p.url }}">
+            {% if p.header.icon %}
+              <i class="fa fa-{{ p.header.icon }}"></i>
             {% endif %}
             <span>{{ p.menu }}</span>
-        </a>
+          </a>
-        {% if p.children.visible.count > 0 %}
+        </li>
-            <ul class="subitem">
+      {% endif %}
-                {{ _self.loop(p) }}
+    {% endfor %}
-            </ul>
+  {% endmacro %}
-        {% endif %}
-    </li>
-{% endfor %}
-{% endmacro %}
   <ul class="menulink">
     {{ _self.loop(pages) }}
     {% if theme_var('custommenus.enabled') %}
@@ -33,3 +45,15 @@
     {% endif %}
   </ul>
 {% endblock %}
+
+{% block javascripts %}
+<script>
+if ((window.innerWidth || document.documentElement.clientWidth) < 980){ 
+  /* Script for dropdown menu in sidebar */
+  $(".subitem_hide").hide(); /* this hides the list initially */
+      $(".dropdown-btn").click(function () {
+      $(this).next(".subitem_hide").slideToggle();
+  });
+  }
+</script>
+{% endblock %}