000-771: multi level navi test2

Author: PowershellScripts

_data/navigation.yml

@@ -114,6 +114,13 @@
       link: /articles/en/Viva/whyviva/
     - name: Viva Engage vs Teams
       link: /articles/en/Viva/vivavsteams/
+    - name: Web Design
+      link: /services/web-design/
+      dropdown:
+        - name: UX Design
+          link: /services/web-design/ux/
+        - name: SEO
+          link: /services/web-design/seo/
 
 - name: Server
   link: /#

_includes/header.html

@@ -19,7 +19,18 @@
                         <a href="{{ item.link | relative_url }}" class="navbar-link {% if page.url contains item.link %}is-active{% endif %}">{{ item.name }}</a>
                         <div class="navbar-dropdown">
                             {% for subitem in item.dropdown %}
-                            <a href="{{ subitem.link | relative_url }}" class="navbar-item {% if subitem.link == page.url %}is-active{% endif %}">{{ subitem.name }}</a>
+                                {% if subitem.dropdown %}
+                                <div class="navbar-item has-dropdown is-hoverable">
+                                    <a href="{{ subitem.link | relative_url }}" class="navbar-link">{{ subitem.name }}</a>
+                                    <div class="navbar-dropdown">
+                                        {% for subsubitem in subitem.dropdown %}
+                                        <a href="{{ subsubitem.link | relative_url }}" class="navbar-item">{{ subsubitem.name }}</a>
+                                        {% endfor %}
+                                    </div>
+                                </div>
+                                {% else %}
+                                <a href="{{ subitem.link | relative_url }}" class="navbar-item {% if subitem.link == page.url %}is-active{% endif %}">{{ subitem.name }}</a>
+                                {% endif %}
                             {% endfor %}
                         </div>
                     </div>
@@ -30,13 +41,11 @@
                 {% endif %}
             </div>
             <div class="navbar-end">
-                <a href=""><img src="../../../../flag.png"/></a>
+                <a href=""><img src="../../../../flag.png" /></a>
                 <a class="navbar-item" href="#">
-                    <i class="fas fa-icon-name"></i> 
+                    <i class="fas fa-icon-name"></i>
                 </a>
             </div>
-
-
         </div>
     </div>
-</nav>
+</nav>

_sass/_main.scss

@@ -17,6 +17,15 @@ $hero-darken: $dark !default;
 @import "showcase";
 @import "../node_modules/bulma-block-list/src/block-list.scss";
 
-.gh-sponsor {
-  color: #ea4aaa;
-}
+
+
+.navbar-dropdown {
+  position: relative;
+
+  .navbar-dropdown {
+      position: absolute;
+      top: 0;
+      left: 100%;
+      margin-left: 0.5rem;
+  }
+}