fix: header

pactus-project · Aug 13, 2024 · 9bd48f5 · 9bd48f5
1 parent 65ba4f5
commit 9bd48f5
Show file tree

Hide file tree

Showing 4 changed files with 134 additions and 1 deletion.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -287,4 +287,9 @@ body {
 
 em, i, .italic {
   font-style: italic !important;
+}
+
+details {
+  position: relative;
+  transition: all 0.3s ease;
 }
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -6,7 +6,6 @@
           for="my-drawer"
           aria-label="toggle sidebar"
           class="btn btn-circle btn-ghost swap swap-rotate">
-          <!-- We'll use a hidden checkbox to control the swap -->
           <input type="checkbox" class="hidden" />
           <svg
             class="swap-off fill-current"

diff --git a/layouts/partials/menu_items.html b/layouts/partials/menu_items.html
@@ -215,3 +215,21 @@
     </ul>
   </details>
 </li>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const detailsElements = document.querySelectorAll('details');
+
+    detailsElements.forEach(detail => {
+      detail.addEventListener('toggle', function () {
+        if (this.open) {
+          detailsElements.forEach(otherDetail => {
+            if (otherDetail !== this) {
+              otherDetail.removeAttribute('open');
+            }
+          });
+        }
+      });
+    });
+  });
+</script>
diff --git a/static/css/main.css b/static/css/main.css
@@ -1048,8 +1048,77 @@ html {
 .drawer-end .drawer-toggle:checked ~ .drawer-side > *:not(.drawer-overlay) {
   transform: translateX(0%);
 }
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+.dropdown > *:not(summary):focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+.dropdown .dropdown-content {
+  position: absolute;
+}
+.dropdown:is(:not(details)) .dropdown-content {
+  visibility: hidden;
+  opacity: 0;
+  transform-origin: top;
+  --tw-scale-x: .95;
+  --tw-scale-y: .95;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  transition-duration: 200ms;
+}
+.dropdown-end .dropdown-content {
+  inset-inline-end: 0px;
+}
+.dropdown-left .dropdown-content {
+  bottom: auto;
+  inset-inline-end: 100%;
+  top: 0px;
+  transform-origin: right;
+}
+.dropdown-right .dropdown-content {
+  bottom: auto;
+  inset-inline-start: 100%;
+  top: 0px;
+  transform-origin: left;
+}
+.dropdown-bottom .dropdown-content {
+  bottom: auto;
+  top: 100%;
+  transform-origin: top;
+}
+.dropdown-top .dropdown-content {
+  bottom: 100%;
+  top: auto;
+  transform-origin: bottom;
+}
+.dropdown-end.dropdown-right .dropdown-content {
+  bottom: 0px;
+  top: auto;
+}
+.dropdown-end.dropdown-left .dropdown-content {
+  bottom: 0px;
+  top: auto;
+}
+.dropdown.dropdown-open .dropdown-content,
+.dropdown:not(.dropdown-hover):focus .dropdown-content,
+.dropdown:focus-within .dropdown-content {
+  visibility: visible;
+  opacity: 1;
+}
 @media (hover: hover) {
 
+  .dropdown.dropdown-hover:hover .dropdown-content {
+    visibility: visible;
+    opacity: 1;
+  }
+
   .btn:hover {
     --tw-border-opacity: 1;
     border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
@@ -1115,6 +1184,12 @@ html {
     }
   }
 
+  .dropdown.dropdown-hover:hover .dropdown-content {
+    --tw-scale-x: 1;
+    --tw-scale-y: 1;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
+
   :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover {
     cursor: pointer;
     outline: 2px solid transparent;
@@ -1128,6 +1203,9 @@ html {
     }
   }
 }
+.dropdown:is(details) summary::-webkit-details-marker {
+  display: none;
+}
 .footer {
   display: grid;
   width: 100%;
@@ -1702,6 +1780,13 @@ details.collapse summary::-webkit-details-marker {
   outline-width: 2px;
   outline-offset: 2px;
 }
+.dropdown.dropdown-open .dropdown-content,
+.dropdown:focus .dropdown-content,
+.dropdown:focus-within .dropdown-content {
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .footer-title {
   margin-bottom: 0.5rem;
   font-weight: 700;
@@ -2946,6 +3031,9 @@ html:has(.drawer-toggle:checked) {
 .z-\[9\] {
   z-index: 9;
 }
+.z-\[1\] {
+  z-index: 1;
+}
 .col-span-1 {
   grid-column: span 1 / span 1;
 }
@@ -2961,6 +3049,9 @@ html:has(.drawer-toggle:checked) {
 .m-auto {
   margin: auto;
 }
+.m-1 {
+  margin: 0.25rem;
+}
 .\!my-0 {
   margin-top: 0px !important;
   margin-bottom: 0px !important;
@@ -3129,6 +3220,9 @@ html:has(.drawer-toggle:checked) {
   width: -moz-max-content;
   width: max-content;
 }
+.w-52 {
+  width: 13rem;
+}
 .min-w-full {
   min-width: 100%;
 }
@@ -3292,6 +3386,9 @@ html:has(.drawer-toggle:checked) {
 .rounded-xl {
   border-radius: 0.75rem;
 }
+.rounded-box {
+  border-radius: var(--rounded-box, 1rem);
+}
 .border {
   border-width: 1px;
 }
@@ -3372,6 +3469,10 @@ html:has(.drawer-toggle:checked) {
 .bg-transparent {
   background-color: transparent;
 }
+.bg-base-100 {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
+}
 .bg-opacity-40 {
   --tw-bg-opacity: 0.4;
 }
@@ -3649,6 +3750,11 @@ html:has(.drawer-toggle:checked) {
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .shadow-\[\#0B0B0F\] {
   --tw-shadow-color: #0B0B0F;
   --tw-shadow: var(--tw-shadow-colored);
@@ -3901,6 +4007,11 @@ em, i, .italic {
   font-style: italic !important;
 }
 
+details {
+  position: relative;
+  transition: all 0.3s ease;
+}
+
 @media (min-width: 768px) {
 
   .md\:btn-lg {