Add menu to tutorial pages

KIT-MRT · Nov 18, 2024 · 7119c15 · 7119c15
1 parent 662abd0
commit 7119c15
Show file tree

Hide file tree

Showing 10 changed files with 84 additions and 11 deletions.
diff --git 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
@@ -4,7 +4,7 @@ html {
 }
 
 // Hide navbar on small/medium screens
-#page-container>nav {
+#page-container nav {
   display: none;
 }
 
@@ -13,21 +13,26 @@ html {
   // Style table of content
   /** page layout **/
   #page-container {
+    background-color: $section-bg-color;
     display: grid;
     grid-template-columns: 1fr 15em;
     max-width: 100em;
     width: 90%;
     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;
   }
 }
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,5 +1,6 @@
 ---
 title: "Arbitration Graphs Tutorial"
+menu_title: "Verification and Fallbacks"
 ---
 
 # Task 6: Better safe than sorry