Merge pull request #284 from cinnamon-coder-hub/#283-rework-and-split-menu

#283: modified left and added right menu

Author: maybeec

asciidoctor-backend/erb/html5/document.html.erb

@@ -101,6 +101,8 @@ end
 
 <script src="/website/components/header/search-engine/bundle.js"></script>
 
+<script src="/website/shared/rightmenu.js"></script>
+
 <!-- ************** Google analytics ************ -->
 
 <!-- Global site tag (gtag.js) - Google Analytics -->

asciidoctor-stylesheet/sass/devonfw.scss

@@ -222,17 +222,116 @@ tr:nth-child(even) {
   }
 }
 
+
+
+#content {
+  max-width: 90em;
+  padding-left: 1em;
+  padding-right: 1em;
+
+}
+
 @media screen and (min-width: 768px) {
   .sect1 {
     padding-bottom: 3rem;
   }
 }
 
-#content {
-  max-width: 90em;
-  padding-left: 1em;
-  padding-right: 1em;
+@media only screen and (min-width: 1025px) {
+  body.book.toc2.toc-left {
+    display: grid;
+    grid-template-rows: auto 0 40px 1fr auto;
+    grid-template-columns: calc(90em * 0.01) calc(90em * 0.20) calc(90em * 0.52) calc(90em * 0.01) calc(90em * 0.25);
+    padding-left: 0;
+}
+
+    body.book.toc2.toc-left .website-navbar {
+    max-width: 100vw;
+    grid-row-start: 1;
+    grid-row-end: 2;
+    grid-column-start: 1;
+    grid-column-end: 7;
+}
+
+    body.book.toc2.toc-left #header > :nth-child(3) {
+    grid-row-start: 3;
+    position: relative;
+    background-color: white;
+    border: none;
+    grid-column-start: 1;
+    grid-column-end: 2;
+    width: 66%;
+    padding-right: 2rem;
+}
+
+    #toc .sectlevel1 > li > a::before { position: relative; top: 6px; content:url('/images/[email protected]');}
+    #toc #actSectLev::before { content: var(--link-to-chevron); }
+
+    #toc.toc2 .sectlevel3 { padding-left: 2.5em; }
+
+    .sectlevel3 { max-width: 100%; top: 8.2%; position: fixed; left: 80%; margin-left: 3%; color: #555555; }
+    .sectlevel3 li { margin: 9px 0 10px; }
+
+
+    #toc .sectlevel3 .activeLine { color: #4cbdec;}
+
+
+    body.book.toc2.toc-left #content {
+        padding: 1.25em 1.75em 2em 0;
+    }
+
+    #toc .sectlevel3 .activeLine::before {
+        position: relative;
+        content: '';
+        display: inline-block;
+        width: 3px;
+        height: 32px;
+        background: #4cbdec;
+        top: 12px;
+        left: -10px;
+        margin-top: -20px;
+        margin-right: -3px;
+    }
+
+    #content-caption-li {
+        font-size: 18px;
+        margin-bottom: 30px;
+        margin-left: -8.2px;
+    }
+
+    #content-caption {
+        font-weight: bold;
+    }
+
+    .sectlevel2 > li > a {
+        margin-left: 8px;
+    }
+    body.book.toc2.toc-left #footer {
+      max-width: 100vw;
+      margin-left: 0;
+      grid-row-start: 5;
+      grid-column-start: 1;
+      grid-column-end: 7;
+     }
+    
+     .footnote {
+      grid-row-start: 6;
+      grid-column-start: 2;
+      grid-row-end: 7;
+      grid-column-end: 3;
+     }
+
+}
+
+#content h3, h4 { color: #23576e; }
+#content p { color: #555555; }
+
+.toc-root { 
+    display: none
+}
 
+h3 { 
+    font-weight: bold;
 }
 
 .white-button-overlay {

website/images/[email protected]

@@ -1,6 +1,7 @@
 const editLinksModule = (function(window) {
     // Function definitions
 
+
     function executeRules(rules) {
       let result;
       let path = $("li").has(".sectlevel1").has(".toc-current").find("a").first().attr("href") || window.location.pathname;

website/images/[email protected]

@@ -0,0 +1,53 @@
+document.addEventListener("DOMContentLoaded", function(event) {
+
+    document.querySelector('.sectlevel2').previousElementSibling.setAttribute("id", "actSectLev");
+    document.getElementById("actSectLev").setAttribute("style","--link-to-chevron: url('/images/[email protected]')");
+
+
+    let sections = document.querySelectorAll(".sectlevel3 a");
+
+    let sectHref = sections[0].getAttribute('href');
+    sectHref  = sectHref.split("#").pop();
+
+
+    let sectId = document.querySelectorAll(".sect3 h4");
+
+    sections = sectId;
+
+    //include li-a-tag for Content headline over right menu
+    document.getElementsByClassName('sectlevel3')[0].innerHTML += '<li id="content-caption-li"> <a id="content-caption" class="" href="">Content</a> </li>';
+
+    document.getElementsByClassName('sectlevel3')[0].prepend(document.getElementById('content-caption-li'))
+
+    const sectlevA = document.querySelectorAll('.sectlevel3 li a');
+    let flag = 0;
+
+    window.addEventListener('scroll', ()=> {
+        let current = '';
+
+        sections.forEach( section => {
+            const sectionTop = section.offsetTop;
+            if( scrollY >= sectionTop) 
+            {
+                current = section.getAttribute('id');
+            }
+        })
+
+        //adding id to current sectlevel3-heading element on the right sight
+        sectlevA.forEach( a => {
+            if(a.getAttribute('id') != 'content-caption')
+            {
+            a.classList.remove('activeLine');
+            flag = 0;
+            if(a.getAttribute('href').split("#").pop() == current)
+                {
+                    document.getElementsByClassName('activeLine');
+                    a.classList.add('activeLine');
+                    flag  = 1;
+                }
+            }
+            
+        })
+    })
+
+})