this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Expand "New update available…" menu row

Somehow 2nd section position: sticky stops working

+47 -23
+26 -2
src/components/nav-menu.css
··· 1 1 @media (min-width: 23em) { 2 2 .nav-menu { 3 - display: flex; 3 + display: grid; 4 + grid-template-columns: 1fr 1fr; 5 + grid-template-rows: auto 1fr; 6 + grid-template-areas: 7 + 'top top' 8 + 'left right'; 4 9 padding: 0; 5 10 width: 22em; 6 11 } 12 + .nav-menu .top-menu { 13 + grid-area: top; 14 + padding-top: 8px; 15 + margin-bottom: -8px; 16 + } 7 17 .nav-menu section { 8 18 padding: 8px 0; 9 - width: 50%; 19 + /* width: 50%; */ 10 20 } 11 21 @keyframes phanpying { 12 22 0% { ··· 49 59 width: 28em; 50 60 } 51 61 } 62 + 63 + @keyframes sparkle-icon { 64 + 0% { 65 + transform: scale(1); 66 + color: var(--red-color); 67 + } 68 + 100% { 69 + transform: scale(1.2); 70 + color: var(--orange-color); 71 + } 72 + } 73 + .sparkle-icon { 74 + animation: sparkle-icon 0.3s ease-in-out infinite alternate; 75 + }
+21 -21
src/components/nav-menu.jsx
··· 115 115 boundingBoxPadding={boundingBoxPadding} 116 116 unmountOnClose 117 117 > 118 + {!!snapStates.appVersion?.commitHash && 119 + __COMMIT_HASH__ !== snapStates.appVersion.commitHash && ( 120 + <div class="top-menu"> 121 + <MenuItem 122 + onClick={() => { 123 + const yes = confirm('Reload page now to update?'); 124 + if (yes) { 125 + (async () => { 126 + try { 127 + location.reload(); 128 + } catch (e) {} 129 + })(); 130 + } 131 + }} 132 + > 133 + <Icon icon="sparkles" class="sparkle-icon" size="l" />{' '} 134 + <span>New update available…</span> 135 + </MenuItem> 136 + <MenuDivider /> 137 + </div> 138 + )} 118 139 <section> 119 - {!!snapStates.appVersion?.commitHash && 120 - __COMMIT_HASH__ !== snapStates.appVersion.commitHash && ( 121 - <> 122 - <MenuItem 123 - onClick={() => { 124 - const yes = confirm('Reload page now to update?'); 125 - if (yes) { 126 - (async () => { 127 - try { 128 - location.reload(); 129 - } catch (e) {} 130 - })(); 131 - } 132 - }} 133 - > 134 - <Icon icon="sparkles" size="l" />{' '} 135 - <span>New update available…</span> 136 - </MenuItem> 137 - <MenuDivider /> 138 - </> 139 - )} 140 140 <MenuLink to="/"> 141 141 <Icon icon="home" size="l" /> <span>Home</span> 142 142 </MenuLink>