+26 -2

src/components/nav-menu.css

reviewed

··· 1 1 @media (min-width: 23em) { 2 2 .nav-menu { 3 3 - display: flex; 3 3 + display: grid; 4 4 + grid-template-columns: 1fr 1fr; 5 5 + grid-template-rows: auto 1fr; 6 6 + grid-template-areas: 7 7 + 'top top' 8 8 + 'left right'; 4 9 padding: 0; 5 10 width: 22em; 6 11 } 12 12 + .nav-menu .top-menu { 13 13 + grid-area: top; 14 14 + padding-top: 8px; 15 15 + margin-bottom: -8px; 16 16 + } 7 17 .nav-menu section { 8 18 padding: 8px 0; 9 9 - width: 50%; 19 19 + /* width: 50%; */ 10 20 } 11 21 @keyframes phanpying { 12 22 0% { ··· 49 59 width: 28em; 50 60 } 51 61 } 62 62 + 63 63 + @keyframes sparkle-icon { 64 64 + 0% { 65 65 + transform: scale(1); 66 66 + color: var(--red-color); 67 67 + } 68 68 + 100% { 69 69 + transform: scale(1.2); 70 70 + color: var(--orange-color); 71 71 + } 72 72 + } 73 73 + .sparkle-icon { 74 74 + animation: sparkle-icon 0.3s ease-in-out infinite alternate; 75 75 + }

+21 -21

src/components/nav-menu.jsx

reviewed

··· 115 115 boundingBoxPadding={boundingBoxPadding} 116 116 unmountOnClose 117 117 > 118 118 + {!!snapStates.appVersion?.commitHash && 119 119 + __COMMIT_HASH__ !== snapStates.appVersion.commitHash && ( 120 120 + <div class="top-menu"> 121 121 + <MenuItem 122 122 + onClick={() => { 123 123 + const yes = confirm('Reload page now to update?'); 124 124 + if (yes) { 125 125 + (async () => { 126 126 + try { 127 127 + location.reload(); 128 128 + } catch (e) {} 129 129 + })(); 130 130 + } 131 131 + }} 132 132 + > 133 133 + <Icon icon="sparkles" class="sparkle-icon" size="l" />{' '} 134 134 + <span>New update available…</span> 135 135 + </MenuItem> 136 136 + <MenuDivider /> 137 137 + </div> 138 138 + )} 118 139 <section> 119 119 - {!!snapStates.appVersion?.commitHash && 120 120 - __COMMIT_HASH__ !== snapStates.appVersion.commitHash && ( 121 121 - <> 122 122 - <MenuItem 123 123 - onClick={() => { 124 124 - const yes = confirm('Reload page now to update?'); 125 125 - if (yes) { 126 126 - (async () => { 127 127 - try { 128 128 - location.reload(); 129 129 - } catch (e) {} 130 130 - })(); 131 131 - } 132 132 - }} 133 133 - > 134 134 - <Icon icon="sparkles" size="l" />{' '} 135 135 - <span>New update available…</span> 136 136 - </MenuItem> 137 137 - <MenuDivider /> 138 138 - </> 139 139 - )} 140 140 <MenuLink to="/"> 141 141 <Icon icon="home" size="l" /> <span>Home</span> 142 142 </MenuLink>