TreeView v1

app/assets/stylesheets/layout.scss

@@ -72,6 +72,14 @@
   background-size: cover;
 }
 
+@mixin toggle-off-icon($color) {
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(#{$color})" class="bi bi-toggle-off" viewBox="0 0 16 16"><path d="M11 4a4 4 0 0 1 0 8H8a5 5 0 0 0 2-4 5 5 0 0 0-2-4zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8M0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5"/></svg>')
+}
+
+@mixin toggle-on-icon($color) {
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(#{$color})" class="bi bi-toggle-on" viewBox="0 0 16 16"><path d="M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10zm6 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8" /> </svg>')
+}
+
 .page_nav nav ul {
   padding-left: 0;
   list-style-type: none;
@@ -83,27 +91,79 @@
   }
 
   a:hover {
-    text-decoration: underline;
+    // text-decoration: underline;
   }
 
   ul {
-    // padding-left: 1.5rem;
+    padding-left: 0rem;
   }
 }
 
+details.switch {
+  >summary {
+    display: flex;
+  }
 
-summary,
-summary a {
+  >summary::after {
+    @include toggle-off-icon(to-rgb(map-get($theme-colors, "dark")));
+    width: 1rem;
+    height: 1rem;
+    float: inline-end;
+    transition: 0.4s;
+    content: '';
+    margin-top: 0.25rem;
+    margin-right: 0;
+    margin-left: 0.5rem
+  }
+}
+
+details.switch[open]>summary::after {
+  @include toggle-on-icon(to-rgb(map-get($theme-colors, "dark")));
+}
+
+@include color-mode(dark) {
+  details.switch summary::after {
+    @include toggle-off-icon(to-rgb(map-get($theme-colors, "light")));
+  }
+}
+
+@include color-mode(dark) {
+  details.switch[open]>summary::after {
+    @include toggle-on-icon(to-rgb(map-get($theme-colors, "light")));
+  }
+}
+
+// details.tree[open]:has(summary.active) {
+//   border: solid 1px $primary;
+
+// }
+
+details.tree {
+
+  >summary,
+  >summary a {
     font-size: 1rem;
     font-style: normal;
   }
 
-summary {
+  >summary {
     display: flex;
     line-height: 2rem;
+    padding-left: 12px;
+    // padding-top: 8px;
+    // padding-bottom: 8px;
   }
 
-summary::before {
+  >summary.active {
+    border-left: solid 8px $primary;
+    border-right: solid 8px $primary;
+    // border: solid 1px $primary;
+    // background-color: $gray-800;
+    padding-left: 8px;
+    // padding-top: 8px;
+  }
+
+  >summary::before {
     @include details-icon(to-rgb(map-get($theme-colors, "dark")));
     content: '';
     float: inline-end;
@@ -113,26 +173,44 @@ summary::before {
     margin-right: 6px;
     // background: url('chevron-right.svg');
     // background-size: cover;
-  margin-left: 0;
+    margin-left: 0px;
     transition: 0.2s;
   }
 
-@include color-mode(dark) {
-  summary::before {
-    @include details-icon(to-rgb(map-get($theme-colors, "light")));
-    // content: '';
-    // float: inline-end;
-    // width: 0.7rem;
-    // height: 1rem;
-    // margin-top: 0.5rem;
-    // margin-right: 6px;
-    // // background: url('chevron-right.svg');
-    // // background-size: cover;
-    // margin-left: 0;
-    // transition: 0.2s;
+  ul {
+    // li:hover {
+    //   border-left: solid 2px $white;
+    //   padding-left: 36px;
+    // }
+
+    li {
+      padding-left: 38px;
+
+      a {
+        display: block;
       }
     }
 
-details[open]>summary::before {
-  transform: rotate(90deg);
+    li:has(a.active) {
+      border-left: solid 2px $primary;
+      padding-left: 36px;
+      // background-color: $gray-900;
     }
+  }
+}
+
+@include color-mode(dark) {
+  details.tree summary::before {
+    @include details-icon(to-rgb(map-get($theme-colors, "light")));
+  }
+}
+
+details.tree[open]>summary::before {
+  transform: rotate(90deg);
+  padding-bottom: 0;
+}
+
+
+// summary.active::before {
+//   @include details-icon(to-rgb($primary));
+// }

app/javascript/controllers/bs_scrollspy_controller.js

@@ -0,0 +1,13 @@
+import { Controller } from "@hotwired/stimulus"
+import * as bootstrap from 'bootstrap'
+
+// Connects to data-controller="bs-scrollspy"
+export default class extends Controller {
+  connect() {
+    // console.log(this.element)
+    const target = this.element.getAttribute("data-bs-scrollspy-target")
+    const scrollSpy = new bootstrap.ScrollSpy(this.element, {
+      target: target
+    })
+  }
+}

app/javascript/controllers/index.js

@@ -7,6 +7,9 @@ import { application } from "./application"
 import AutosubmitController from "./autosubmit_controller"
 application.register("autosubmit", AutosubmitController)
 
+import BsScrollspyController from "./bs_scrollspy_controller"
+application.register("bs-scrollspy", BsScrollspyController)
+
 import CheckLinkController from "./check_link_controller"
 application.register("check-link", CheckLinkController)
 

app/views/pages/_page.html.erb

@@ -1,4 +1,4 @@
-<div id="<%= dom_id page %>" class="mb-3">
+<div id="<%= dom_id page %>" class="mb-3"data-bs-scrollspy-target="#<%= dom_id(page.report, :page_nav) %>" data-controller="bs-scrollspy">
   <h2>
     <i class="bi bi-file-earmark-check"></i>
     <%= page.position %> <%= page.path %></h2>

app/views/reports/_page_nav.html.slim

@@ -1,26 +1,30 @@
 div id=dom_id(report, :page_nav)
   - if report.pages.any?
-    details open=true 
-      summary Struktur
+    details.switch open=true 
+      summary.justify-content-end
+        span Pfade
       nav
         ul
           - report.pages.each do |page|
             - is_current = current_page == page
             li
-              details open=current_page_displayed(page) class=""
-                summary
-                  i.bi.me-1 class="bi-file-earmark-check#{is_current ? "-fill" : "" }"
+              details.tree open=current_page_displayed(page) class=""
+                summary class=(is_current ? "active" : nil)
+                  i.bi.me-1 class="bi-file-earmark-check#{is_current ? "" : "" }"
                   - if is_current
                       =< "#{page.position} #{page.path}" 
                   - else
-                    =< link_to("#{page.position} #{page.path}", report_path(report, page_id: page.id), class: "#{is_current ? " active text-decoration-underline" : nil  }", data: { "turbo-frame": :_top })
+                    =< link_to("#{page.position} #{page.path}", report_path(report, page_id: page.id), data: { "turbo-frame": :_top })
                 ul id=dom_id(page, :page_nav_elements)
                   - page.elements.each do |element| 
                     li 
-                      i.bi.bi-boxes.me-1
                       - if current_page == page
-                        =< link_to("#{element.number} #{element.title}", "##{dom_id(element)}", data: { "turbo": false })
+                        =< link_to("##{dom_id(element)}", data: { "turbo": false }) do
+                          i.bi.bi-boxes.me-1
+                          =< "#{element.number} #{element.title}"
                       - else 
-                        =< link_to("#{element.number} #{element.title}", report_path(report, page_id: page.id, anchor: dom_id(element)), data: { "turbo": false })
+                        =< link_to(report_path(report, page_id: page.id, anchor: dom_id(element)), data: { "turbo": false }) do
+                          i.bi.bi-boxes.me-1
+                          =< "#{element.number} #{element.title}"
   = turbo_frame_tag "new_page_frame" do
     = render partial: "reports/new_page_button", locals: { report: report }

app/views/reports/show.html.slim

@@ -11,13 +11,13 @@ h1
   .smb-4.lead.mb-3
     = @report.comment
 .row 
-  .col-lg-3.col-md-6.col-sm-12
+  .col-lg-4.col-md-6.col-sm-12
     .page_nav.sticky-top
       = render partial: "reports/page_nav", locals: { report: @report, current_page: @current_page }
       - if @current_page
         = turbo_frame_tag(dom_id(@current_page, :notes)) do 
           = render partial: "pages/notes", locals: { page: @current_page }
-  .col-lg-9.col-md-6.col-sm-12
+  .col-lg-8.col-md-6.col-sm-12
     - if @current_page
         = render @current_page
     - else