Expand "New update available…" menu row

Somehow 2nd section position: sticky stops working

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;
+}

src/components/nav-menu.jsx

@@ -115,10 +115,9 @@ function NavMenu(props) {
         boundingBoxPadding={boundingBoxPadding}
         unmountOnClose
       >
-        <section>
         {!!snapStates.appVersion?.commitHash &&
           __COMMIT_HASH__ !== snapStates.appVersion.commitHash && (
-              <>
+            <div class="top-menu">
               <MenuItem
                 onClick={() => {
                   const yes = confirm('Reload page now to update?');
@@ -131,12 +130,13 @@ function NavMenu(props) {
                   }
                 }}
               >
-                  <Icon icon="sparkles" size="l" />{' '}
+                <Icon icon="sparkles" class="sparkle-icon" size="l" />{' '}
                 <span>New update available…</span>
               </MenuItem>
               <MenuDivider />
-              </>
+            </div>
           )}
+        <section>
           <MenuLink to="/">
             <Icon icon="home" size="l" /> <span>Home</span>
           </MenuLink>