From 6c3a700f0101d161ebc0912171d28f9aec4858d5 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 3 Sep 2023 18:41:36 +0800
Subject: [PATCH] =?UTF-8?q?Expand=20"New=20update=20available=E2=80=A6"=20?=
 =?UTF-8?q?menu=20row?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Somehow 2nd section position: sticky stops working
---
 src/components/nav-menu.css | 28 +++++++++++++++++++++++--
 src/components/nav-menu.jsx | 42 ++++++++++++++++++-------------------
 2 files changed, 47 insertions(+), 23 deletions(-)

diff --git a/src/components/nav-menu.css b/src/components/nav-menu.css
index 7c79f6746..7a1d3077f 100644
--- 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
index 3b54dd527..45e978ba7 100644
--- 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>