Expand "New update available…" menu row

Somehow 2nd section position: sticky stops working
cheeaun · Sep 3, 2023 · 6c3a700 · 6c3a700
1 parent 8cc85ec
commit 6c3a700
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 23 deletions.
diff --git a/src/components/nav-menu.css b/src/components/nav-menu.css
@@ -1,12 +1,22 @@
 @media (min-width: 23em) {
   .nav-menu {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto 1fr;
+    grid-template-areas:
+      'top top'
+      'left right';
     padding: 0;
     width: 22em;
   }
+  .nav-menu .top-menu {
+    grid-area: top;
+    padding-top: 8px;
+    margin-bottom: -8px;
+  }
   .nav-menu section {
     padding: 8px 0;
-    width: 50%;
+    /* width: 50%; */
   }
   @keyframes phanpying {
     0% {
@@ -49,3 +59,17 @@
     width: 28em;
   }
 }
+
+@keyframes sparkle-icon {
+  0% {
+    transform: scale(1);
+    color: var(--red-color);
+  }
+  100% {
+    transform: scale(1.2);
+    color: var(--orange-color);
+  }
+}
+.sparkle-icon {
+  animation: sparkle-icon 0.3s ease-in-out infinite alternate;
+}
diff --git a/src/components/nav-menu.jsx b/src/components/nav-menu.jsx
@@ -115,28 +115,28 @@ function NavMenu(props) {
         boundingBoxPadding={boundingBoxPadding}
         unmountOnClose
       >
+        {!!snapStates.appVersion?.commitHash &&
+          __COMMIT_HASH__ !== snapStates.appVersion.commitHash && (
+            <div class="top-menu">
+              <MenuItem
+                onClick={() => {
+                  const yes = confirm('Reload page now to update?');
+                  if (yes) {
+                    (async () => {
+                      try {
+                        location.reload();
+                      } catch (e) {}
+                    })();
+                  }
+                }}
+              >
+                <Icon icon="sparkles" class="sparkle-icon" size="l" />{' '}
+                <span>New update available…</span>
+              </MenuItem>
+              <MenuDivider />
+            </div>
+          )}
         <section>
-          {!!snapStates.appVersion?.commitHash &&
-            __COMMIT_HASH__ !== snapStates.appVersion.commitHash && (
-              <>
-                <MenuItem
-                  onClick={() => {
-                    const yes = confirm('Reload page now to update?');
-                    if (yes) {
-                      (async () => {
-                        try {
-                          location.reload();
-                        } catch (e) {}
-                      })();
-                    }
-                  }}
-                >
-                  <Icon icon="sparkles" size="l" />{' '}
-                  <span>New update available…</span>
-                </MenuItem>
-                <MenuDivider />
-              </>
-            )}
           <MenuLink to="/">
             <Icon icon="home" size="l" /> <span>Home</span>
           </MenuLink>