Documentation: add submenu for training

arrow-kt · Apr 5, 2021 · 9975019 · 9975019
1 parent 7a02beb
commit 9975019
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 4 deletions.
diff --git a/arrow-site/docs/_data/menu.yml b/arrow-site/docs/_data/menu.yml
@@ -2,12 +2,18 @@ nav:
     - title: Media
       url: https://media.arrow-kt.io
 
-    - title: Training
-      url: https://www.47deg.com/trainings/
-
     - title: Support
       url: https://www.47deg.com/services/
 
+    - title: Training
+      submenu:
+
+        - title: 47 Degrees
+          url: https://www.47deg.com/trainings/
+
+        - title: Instil
+          url: https://instil.co/courses/functional-programming-in-kotlin-with-arrow/
+
     - title: Github
       url: https://github.com/arrow-kt/arrow
 

diff --git a/arrow-site/docs/_includes/_nav.html b/arrow-site/docs/_includes/_nav.html
@@ -14,7 +14,16 @@
           {% for item in site.data.menu.nav%}
           {% if item.title != 'Github' %}
           <li class="nav-menu-item">
-            <a class="menu-links" href="{{ item.url }}" title="{{ item.title }}">{{ item.title }}</a>
+            <a class="menu-links {% if item.submenu %}no-hover{% endif %}" {% if item.url %}href="{{ item.url }}"{% endif %} title="{{ item.title }}">{{ item.title }}</a>
+            {% if item.submenu %}
+            <ul class="nav-submenu">
+              {% for submenu-item in item.submenu %}
+              <li class="nav-submenu-item">
+                <a class="menu-links" href="{{ submenu-item.url }}" title="{{ submenu-item.title }}">{{ submenu-item.title }}</a>
+              </li>
+              {% endfor %}
+            </ul>
+            {% endif %}
           </li>
           {% endif %}
           {% endfor %}

diff --git a/arrow-site/docs/_sass/components/home/_nav.scss b/arrow-site/docs/_sass/components/home/_nav.scss
@@ -89,6 +89,19 @@
             margin-right: ($base-point-grid * 5);
           }
 
+          .nav-submenu {
+            display: none;
+            position: absolute;
+
+            &-item {
+              padding-top: $base-point-grid;
+
+              &::before {
+                content: "-";
+              }
+            }
+          }
+
           .menu-links {
             padding-bottom: 4px;
             text-transform: uppercase;
@@ -105,6 +118,16 @@
               }
             }
           }
+
+          .no-hover {
+            pointer-events: none;
+          }
+
+          &:hover {
+            .nav-submenu {
+              display: block;
+            }
+          }
         }
       }
     }
@@ -164,6 +187,20 @@
             &:not(:last-child) {
               margin-right: 0;
             }
+
+            .nav-submenu {
+              position: relative;
+              display: block;
+
+              &-item {
+                padding-top: ($base-point-grid * 2);
+                padding-left: ($base-point-grid * 2);
+
+                &::before {
+                  content: "-";
+                }
+              }
+            }
           }
 
           .nav-stars {