From f56165bc5bed61776e2cbaec61c944e4f6d49119 Mon Sep 17 00:00:00 2001
From: VnPower <vnpower@disroot.org>
Date: Tue, 15 Oct 2024 21:21:44 +0700
Subject: [PATCH] No Javascript navbar

---
 assets/css/bootstrap-style.css        | 27 +++++++++++++++++++----
 assets/css/bootstrap-style.scss       | 31 +++++++++++++++++++++++----
 assets/views/noscript/navbar.jet.html |  9 +++++---
 3 files changed, 56 insertions(+), 11 deletions(-)

diff --git a/assets/css/bootstrap-style.css b/assets/css/bootstrap-style.css
index d007ac3..ca8bda4 100644
--- a/assets/css/bootstrap-style.css
+++ b/assets/css/bootstrap-style.css
@@ -10623,6 +10623,18 @@ textarea.form-control-lg {
   z-index: 3 !important;
 }
 
+.z-4 {
+  z-index: 4 !important;
+}
+
+.z-5 {
+  z-index: 5 !important;
+}
+
+.z-inf {
+  z-index: 1000 !important;
+}
+
 @media (min-width: 576px) {
   .float-sm-start {
     float: left !important;
@@ -14239,12 +14251,19 @@ h6, .h6 {
     display: none !important;
   }
 }
-#noscript-navbar-toggler {
-  display: none;
-}
-#noscript-navbar-toggler:checked ~ #noscriptOffcanvasNavbar {
+#noscript-navbar-toggler:checked ~ #noscript-navbar-close-button:not(:checked) ~ #noscriptOffcanvasNavbar, #noscript-navbar-toggler:not(:checked) ~ #noscript-navbar-close-button:checked ~ #noscriptOffcanvasNavbar {
   transform: translateX(0);
 }
+#noscript-navbar-toggler:checked ~ #noscript-navbar-close-button:not(:checked) + label, #noscript-navbar-toggler:not(:checked) ~ #noscript-navbar-close-button:checked + label {
+  transform: translateX(0);
+}
+
+#noscript-navbar-close-button + label {
+  margin-left: auto;
+  width: 350px;
+  transform: translateX(-100%);
+  transition: transform 0.3s ease-in-out;
+}
 
 #noscriptOffcanvasNavbar {
   top: 3.5rem !important;
diff --git a/assets/css/bootstrap-style.scss b/assets/css/bootstrap-style.scss
index 14c494c..d4e7a04 100644
--- a/assets/css/bootstrap-style.scss
+++ b/assets/css/bootstrap-style.scss
@@ -116,6 +116,18 @@ $custom-colors: (
 );
 $theme-colors: map-merge($theme-colors, $custom-colors);
 
+// More z-index values
+$zindex-levels: (
+  n1: -1,
+  0: 0,
+  1: 1,
+  2: 2,
+  3: 3,
+  4: 4,
+  5: 5,
+  inf: 1000,
+);
+
 @import "./bootstrap/maps";
 @import "./bootstrap/mixins";
 @import "./bootstrap/utilities";
@@ -353,12 +365,23 @@ h6 {
 
 // Noscript components
 #noscript-navbar-toggler {
-  display: none;
-
-  &:checked~#noscriptOffcanvasNavbar {
+  &:checked~#noscript-navbar-close-button:not(:checked)~#noscriptOffcanvasNavbar,
+  &:not(:checked)~#noscript-navbar-close-button:checked~#noscriptOffcanvasNavbar {
     transform: translateX(0);
-
   }
+
+
+  &:checked~#noscript-navbar-close-button:not(:checked)+label,
+  &:not(:checked)~#noscript-navbar-close-button:checked+label {
+    transform: translateX(0);
+  }
+}
+
+#noscript-navbar-close-button + label {
+  margin-left: auto;
+  width: 350px;
+  transform: translateX(-100%);
+  transition: transform 0.3s ease-in-out;
 }
 
 #noscriptOffcanvasNavbar {
diff --git a/assets/views/noscript/navbar.jet.html b/assets/views/noscript/navbar.jet.html
index e8d1cbb..e69e5d2 100644
--- a/assets/views/noscript/navbar.jet.html
+++ b/assets/views/noscript/navbar.jet.html
@@ -4,18 +4,21 @@
     <div class="d-flex">
       <!-- Offcanvas menu for navigation items -->
       <input type="checkbox" class="d-none" id="noscript-navbar-toggler" />
-      <label for="noscript-navbar-toggler" class="navbar-toggler border-0 p-0 me-3" role="button" aria-label="Toggle navigation">
+      <label for="noscript-navbar-toggler" class="navbar-toggler border-0 p-0 me-3 " role="button" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </label>
+      <input type="checkbox" class="d-none" id="noscript-navbar-close-button" />
+      <label for="noscript-navbar-close-button" class="navbar-toggler border-0 p-0 position-fixed top-0 start-0 bg-charcoal-surface1 z-5" role="button" aria-label="Toggle navigation">
+        <div class="btn-close text-reset p-4" aria-label="Close"></div>
+      </label>
 
-  <div class="offcanvas border-0 bg-charcoal-surface1 position-absolute z-5 vh-100 visible" tabindex="-1" id="noscriptOffcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
+  <div class="offcanvas border-0 bg-charcoal-surface1 position-fixed z-5 vh-100 visible" tabindex="-1" id="noscriptOffcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
       <!-- Offcanvas header -->
     <div class="offcanvas-header d-flex align-items-start">
       <div class="d-flex flex-column w-75">
         <h2 class="display-6 offcanvas-title mb-0" id="offcanvasNavbarLabel"><a class="text-body text-decoration-none" href="/">PixivFE</a></h2>
         <span class="text-body-secondary mb-0">An open-source alternative frontend for Pixiv that doesn't suck.</span>
       </div>
-      <!-- TODO: p-4 is a dirty hack to 'align' the close button with the title; inconsistent across devices -->
     </div>
     <!-- Offcanvas body -->
     <div class="offcanvas-body">