feat: animate the menu

etchteam · Oct 4, 2024 · 7e26383 · 7e26383
1 parent 9ee3f5c
commit 7e26383
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 8 deletions.
diff --git a/src/components/control/d-sidebar-nav.webc b/src/components/control/d-sidebar-nav.webc
@@ -2,9 +2,25 @@
   d-sidebar-nav {
     details {
       border-block-end: var(--diamond-border);
-
-      @media (width >= 600px) {
-        margin-block-start: var(--diamond-spacing-fluid);
+      margin-block-start: var(--diamond-spacing-fluid);
+
+      @media (width < 600px) {
+        background: var(--color-blue-darker);
+        border-block-start: var(--diamond-border);
+        margin-block-start: calc(var(--diamond-border-width) * -1);
+        margin-inline: calc(var(--diamond-spacing) * -1);
+        padding-inline: var(--diamond-spacing);
+
+        @supports (interpolate-size: allow-keywords) {
+          interpolate-size: allow-keywords;
+          transition: height .5s var(--diamond-transition-timing);
+          height: calc(((var(--diamond-spacing-sm) * 2) + var(--diamond-font-size-lg)) * var(--diamond-font-line-height));
+
+          &[open] {
+            height: auto;
+            overflow: clip; /* Clip off contents while animating */
+          }
+        }
       }
     }
 
@@ -15,9 +31,11 @@
       cursor: pointer;
       display: inline-flex;
       list-style: none;
-      padding-block: var(--diamond-spacing-sm);
+      padding: var(--diamond-spacing-sm) var(--diamond-spacing);
+      margin-inline: calc(var(--diamond-spacing) * -1);
       font-size: var(--diamond-font-size-lg);
       transition: color var(--diamond-transition);
+      user-select: none;
 
       &::-webkit-details-marker {
         display: none;

diff --git a/src/layouts/default.webc b/src/layouts/default.webc
@@ -19,6 +19,7 @@
 
     <!--- Bundled base styles --->
     <link rel="stylesheet" href="../../node_modules/@etchteam/diamond-ui/diamond-ui.css" webc:bucket="styles">
+    <link rel="stylesheet" href="../styles/reset.css" webc:bucket="styles">
     <link rel="stylesheet" href="../styles/color.css" webc:bucket="styles">
     <link rel="stylesheet" href="../styles/font.css" webc:bucket="styles">
     <link rel="stylesheet" href="../styles/spacing.css" webc:bucket="styles">

diff --git a/src/styles/base.css b/src/styles/base.css
@@ -1,7 +1,3 @@
-[hidden] {
-  display: none !important;
-}
-
 h1,
 h2,
 h3 {

diff --git a/src/styles/reset.css b/src/styles/reset.css
@@ -0,0 +1,4 @@
+/* Custom elements don't respect the global hidden attribute */
+[hidden] {
+  display: none !important;
+}