Implement side menu for narrow screens

beta/assets/default.css

@@ -80,7 +80,7 @@ BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }
 /* END: https://www.w3.org/TR/CSS22/ */
 
 @media not screen {
-    header select.documentBranch, nav, .headerlink {
+    header select.documentBranch, nav, .navButtonContainer, .headerlink {
         display: none;
     }
 

beta/assets/narrow-menu.js

@@ -0,0 +1,15 @@
+window.addEventListener("load", function() {
+    document.querySelector("button[data-name=nav-open]").addEventListener("click", function() {
+        document.documentElement.classList.add("nav-opened");
+    });
+    document.querySelector("button[data-name=nav-close]").addEventListener("click", function() {
+        document.documentElement.classList.remove("nav-opened");
+    });
+    for (let link of document.querySelectorAll("nav a")) {
+        link.addEventListener("click", function() {
+            if (link.parentElement.classList.contains("active") || link.parentElement.classList.contains("level4")) {
+                document.documentElement.classList.remove("nav-opened");
+            }
+        });
+    }
+});

beta/assets/screen-narrow.css

@@ -0,0 +1,76 @@
+.documentContainer {
+    width: 100%;
+}
+
+header .logoContainer {
+    padding: 2em 10px;
+    background-position: 50%;
+    min-height: 320px;
+    text-align: center;
+}
+
+header .logoContainer, header select.documentBranch {
+    text-shadow: 0 0 3px #050a02, 0 0 3px #050a02;
+}
+
+header .logoContainer, header ul, main {
+    max-width: initial;
+}
+
+nav {
+    position: fixed;
+    width: 0;
+    height: 100vh;
+    top: 0;
+    left: 0;
+    background-color: #E4E9F6;
+    z-index: 1;
+    scrollbar-width: initial;
+    transition: width ease .2s;
+    max-height: initial !important;
+}
+
+html.nav-opened {
+    overflow: hidden;
+}
+
+.nav-opened nav {
+    width: 100vw;
+}
+
+nav::-webkit-scrollbar {
+    display: initial;
+}
+
+main, .navContainer {
+    position: relative;
+}
+
+.navButtonContainer {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: start;
+    justify-content: end;
+    pointer-events: none;
+}
+
+.navButtonContainer button {
+    background: #a40000;
+    color: white;
+    border: none;
+    font-size: 1em;
+    font-weight: normal;
+    font-family: sans-serif;
+    cursor: pointer;
+    padding: 10px;
+    top: 10px;
+    position: sticky;
+    margin: 10px;
+    z-index: 1;
+    border-radius: 3px;
+    pointer-events: initial;
+}

beta/assets/screen-noscript.css

@@ -25,3 +25,13 @@ nav .level4 {
 nav .level4 > a::after {
     display: none !important;
 }
+
+@media screen and (max-width: 50em) {
+    nav, .navButtonContainer {
+        display: none;
+    }
+
+    html.nav-opened {
+        overflow: initial;
+    }
+}

beta/assets/screen.css

@@ -236,7 +236,6 @@ nav ul {
 }
 
 nav {
-    padding: 10px 0;
     margin-right: 2rem;
     flex: 1;
     position: sticky;
@@ -246,6 +245,10 @@ nav {
     scrollbar-width: none;
 }
 
+.navContainer {
+    padding: 10px 0;
+}
+
 nav::-webkit-scrollbar {
     display: none;
 }
@@ -307,6 +310,10 @@ nav .active > ul > .level4 {
     display: initial;
 }
 
+.navButtonContainer {
+    display: none;
+}
+
 .documentContainer p, .documentContainer ul, .documentContainer ol {
     max-width: 42em;
     box-sizing: border-box;
@@ -339,28 +346,3 @@ td, th {
 section > *:first-child:hover .headerlink {
     display: initial;
 }
-
-@media all and (max-width: 50em) {
-    nav {
-        display: none;
-    }
-
-    .documentContainer {
-        width: 100%;
-    }
-
-    header .logoContainer {
-        padding: 2em 10px;
-        background-position: 50%;
-        min-height: 320px;
-        text-align: center;
-    }
-
-    header .logoContainer, header select.documentBranch {
-        text-shadow: 0 0 3px #050a02, 0 0 3px #050a02;
-    }
-
-    header .logoContainer, header ul, main {
-        max-width: initial;
-    }
-}

documentation-generator/template.html

@@ -11,6 +11,7 @@ $if(math)$
 $endif$
 <link href="assets/default.css" media="all" rel="stylesheet">
 <link href="assets/screen.css" media="screen" rel="stylesheet">
+<link href="assets/screen-narrow.css" media="screen and (max-width: 50em)" rel="stylesheet">
 <noscript><link href="assets/screen-noscript.css" media="screen" rel="stylesheet"></noscript>
 <link href="https://github.com/Kozea/Radicale/releases.atom" type="application/atom+xml" rel="alternate" title="Radicale Releases">
 <link href="assets/icon.png" type="image/png" rel="shortcut icon">
@@ -18,6 +19,7 @@ $endif$
 <meta name="description" content="Free and Open-Source CalDAV and CardDAV Server">
 <script src="assets/navigation.js"></script>
 <script src="assets/document-branches.js"></script>
+<script src="assets/narrow-menu.js"></script>
 <script>
     const documentBranch = "$branch$";
     const documentBranches = ["$for(branches)$$branches$$sep$", "$endfor$"];
@@ -41,9 +43,17 @@ $endif$
 </header>
 
 <main>
+    <div class="navButtonContainer">
+        <button data-name="nav-open">Contents</button>
+    </div>
     <nav>
-        <h2>Contents</h2>
+        <div class="navContainer">
-        $table-of-contents$
+            <div class="navButtonContainer">
+                <button data-name="nav-close">Close</button>
+            </div>
+            <h2>Contents</h2>
+            $table-of-contents$
+        </div>
     </nav>
     <div class="documentContainer">
 $body$