From 7119c155cd8ee673c8605bd7933d59b5ac5e2ffc Mon Sep 17 00:00:00 2001
From: Piotr Spieker <orzechow@posteo.de>
Date: Fri, 15 Nov 2024 19:27:17 +0100
Subject: [PATCH] Add menu to tutorial pages

---
 docs/_layouts/default.html                   | 34 ++++++++++++++
 docs/assets/_sass/toc.scss                   | 49 +++++++++++++++-----
 docs/assets/_sass/variables.scss             |  2 +
 docs/assets/css/style.scss                   |  4 ++
 docs/tasks/1_implement_behavior_component.md |  1 +
 docs/tasks/2_extend_arbitration_graph.md     |  1 +
 docs/tasks/3_add_more_behaviors.md           |  1 +
 docs/tasks/4_nested_arbitrators.md           |  1 +
 docs/tasks/5_cost_arbitration.md             |  1 +
 docs/tasks/6_verification.md                 |  1 +
 10 files changed, 84 insertions(+), 11 deletions(-)

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index 0b87f8ed..eef64762 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -29,6 +29,40 @@ <h2 class="project-tagline">{{ page.description | default: site.description | de
 
     <div id="page-container">
       <main id="content" class="main-content" role="main">
+        <!-- Show the menu on docs pages only -->
+        <nav id="menu" class="pages-nav">
+        {% assign urlfolders = page.url | split: '/' %}
+        {% if urlfolders[1] == "docs" %}
+          <ul>
+            <!-- Main -->
+            {% assign classes = "" %}
+            {% if page.url == "/" %}
+              {% assign classes = "active" %}
+            {% endif %}
+            <li class="{{ classes }}"><a href="/">🢄 Main</a></li>
+
+            <!-- Tutorial Home -->
+            {% assign classes = "" %}
+            {% if page.url == "/docs/Tutorial.html" %}
+              {% assign classes = "active" %}
+            {% endif %}
+            <li class="{{ classes }}"><a href="/docs/Tutorial.html">⌂ Tutorial Home</a></li>
+
+            <!-- Tutorial Tasks -->
+            {% for sitepage in site.pages %}
+              {% assign urlfolders = sitepage.url | split: '/' %}
+              {% if urlfolders[1] == 'docs' and urlfolders[2] == 'tasks' %}
+                {% assign classes = "" %}
+                {% if page.url == sitepage.url %}
+                  {% assign classes = "active" %}
+                {% endif %}
+                <li class="{{ classes }}"><a href="{{ sitepage.url }}">{{ sitepage.menu_title }}</a></li>
+              {% endif %}
+            {% endfor %}
+          </ul>
+          {% endif %}
+        </nav>
+
         {{ content }}
 
         <footer class="site-footer">
diff --git a/docs/assets/_sass/toc.scss b/docs/assets/_sass/toc.scss
index 1ee23572..1c6a0bda 100644
--- a/docs/assets/_sass/toc.scss
+++ b/docs/assets/_sass/toc.scss
@@ -4,7 +4,7 @@ html {
 }
 
 // Hide navbar on small/medium screens
-#page-container>nav {
+#page-container nav {
   display: none;
 }
 
@@ -13,6 +13,7 @@ html {
   // Style table of content
   /** page layout **/
   #page-container {
+    background-color: $section-bg-color;
     display: grid;
     grid-template-columns: 1fr 15em;
     max-width: 100em;
@@ -20,14 +21,18 @@ html {
     margin: 0 auto;
   }
 
+  #page-container .main-content {
+    padding-top: 0;
+  }
+
   // Make nav sticky
-  #page-container>nav {
+  #page-container nav {
     display: block;
     position: sticky;
-    top: 2rem;
-    margin-top: 2rem;
+    top: 0;
+    padding-bottom: .4rem;
     align-self: start;
-
+    background-color: $section-bg-color;
 
     ul,
     ol {
@@ -41,18 +46,40 @@ html {
     }
   }
 
+  .pages-nav {
+    padding: .4rem 0;
+  }
+
   // ScrollSpy active styles (see toc.js tab for activation)
-  .section-nav li.active>a {
+  nav li.active>a {
     color: $nav-text-active-color;
     font-weight: 500;
   }
 
-  .section-nav {
+  #page-container .pages-nav > ul {
+    display: flex;
+    width: 100%;
+  }
+
+  #page-container .pages-nav li {
+    margin-left: 1.5rem;
+    text-wrap: nowrap;
+  }
+
+  #page-container .pages-nav li:first-of-type {
+    margin-left: .5rem;
+  }
+
+  #page-container .section-nav > ul {
+    margin-top: 4rem;
+  }
+
+  #page-container .section-nav>ul {
     padding-left: 0;
-    border-left: 1px solid #efefef;
+    border-left: 1px solid $nav-border-color;
   }
 
-  .section-nav a {
+  nav a {
     text-decoration: none;
     display: block;
     padding: .125rem 0;
@@ -61,8 +88,8 @@ html {
     /* 💡 This small transition makes setting of the active state smooth */
   }
 
-  .section-nav a:hover,
-  .section-nav a:focus {
+  nav a:hover,
+  nav a:focus {
     color: $nav-text-focus-color;
   }
 }
\ No newline at end of file
diff --git a/docs/assets/_sass/variables.scss b/docs/assets/_sass/variables.scss
index cc625fe8..8d8da1c4 100644
--- a/docs/assets/_sass/variables.scss
+++ b/docs/assets/_sass/variables.scss
@@ -14,6 +14,7 @@ $header-bg-color-secondary: #00001D !default;
 
 // Text
 $section-headings-color: #257180 !default;
+$section-bg-color: #fff !default;
 $body-text-color: #606c71 !default;
 $body-link-color: #008383 !default;
 $blockquote-text-color: #819198 !default;
@@ -26,3 +27,4 @@ $code-text-color: #f8f8f2 !default;
 $border-color: #dce6f0 !default;
 $table-border-color: #e9ebec !default;
 $hr-border-color: #eff0f1 !default;
+$nav-border-color: #efefef !default;
diff --git a/docs/assets/css/style.scss b/docs/assets/css/style.scss
index 34adf923..2a446219 100644
--- a/docs/assets/css/style.scss
+++ b/docs/assets/css/style.scss
@@ -14,6 +14,10 @@
 // Add table of contents navbar
 @import 'toc';
 
+#page-container {
+  background-color: $section-bg-color;
+}
+
 // Improve collapsible sections
 details summary {
   cursor: pointer;
diff --git a/docs/tasks/1_implement_behavior_component.md b/docs/tasks/1_implement_behavior_component.md
index 1d68345d..24346bf0 100644
--- a/docs/tasks/1_implement_behavior_component.md
+++ b/docs/tasks/1_implement_behavior_component.md
@@ -1,5 +1,6 @@
 ---
 title: "Arbitration Graphs Tutorial"
+menu_title: "First Behavior"
 ---
 
 # Task 1: Implement a Behavior Component
diff --git a/docs/tasks/2_extend_arbitration_graph.md b/docs/tasks/2_extend_arbitration_graph.md
index b9712ae6..300c12f9 100644
--- a/docs/tasks/2_extend_arbitration_graph.md
+++ b/docs/tasks/2_extend_arbitration_graph.md
@@ -1,5 +1,6 @@
 ---
 title: "Arbitration Graphs Tutorial"
+menu_title: "Extending the Graph"
 ---
 
 # Task 2: Extend the Arbitration Graph
diff --git a/docs/tasks/3_add_more_behaviors.md b/docs/tasks/3_add_more_behaviors.md
index 191e2934..c0c1aa4b 100644
--- a/docs/tasks/3_add_more_behaviors.md
+++ b/docs/tasks/3_add_more_behaviors.md
@@ -1,5 +1,6 @@
 ---
 title: "Arbitration Graphs Tutorial"
+menu_title: "More Behaviors"
 ---
 
 # Task 3: Even more behavior components
diff --git a/docs/tasks/4_nested_arbitrators.md b/docs/tasks/4_nested_arbitrators.md
index 04dfe5ba..83becf4e 100644
--- a/docs/tasks/4_nested_arbitrators.md
+++ b/docs/tasks/4_nested_arbitrators.md
@@ -1,5 +1,6 @@
 ---
 title: "Arbitration Graphs Tutorial"
+menu_title: "Nesting"
 ---
 
 # Task 4: Nested arbitration graphs
diff --git a/docs/tasks/5_cost_arbitration.md b/docs/tasks/5_cost_arbitration.md
index d9c99a29..2592f47a 100644
--- a/docs/tasks/5_cost_arbitration.md
+++ b/docs/tasks/5_cost_arbitration.md
@@ -1,5 +1,6 @@
 ---
 title: "Arbitration Graphs Tutorial"
+menu_title: "Cost Arbitrator"
 ---
 
 # Task 5: Arbitrate based on predicted utility
diff --git a/docs/tasks/6_verification.md b/docs/tasks/6_verification.md
index debbab4a..7b007f62 100644
--- a/docs/tasks/6_verification.md
+++ b/docs/tasks/6_verification.md
@@ -1,5 +1,6 @@
 ---
 title: "Arbitration Graphs Tutorial"
+menu_title: "Verification and Fallbacks"
 ---
 
 # Task 6: Better safe than sorry