alice.mosphere.at / phanpy
this repo has no description
0
fork

Configure Feed

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

Transform nav menu into 2 columns

Lim Chee Aun 4b45375b a52bd7ca

+128 -95
+26
src/components/nav-menu.css
··· 1 + @media (min-width: 23em) { 2 + .nav-menu { 3 + display: flex; 4 + width: auto; 5 + padding: 0; 6 + /* 1px background image */ 7 + background-image: linear-gradient( 8 + to right, 9 + var(--divider-color), 10 + var(--divider-color) 11 + ); 12 + background-size: 1px 1px; 13 + background-repeat: repeat-y; 14 + background-position: center; 15 + } 16 + .nav-menu section { 17 + width: 50%; 18 + padding: 8px 0; 19 + } 20 + .nav-menu section:last-child > .szh-menu__divider:first-child { 21 + display: none; 22 + } 23 + .nav-menu .szh-menu__item span { 24 + white-space: normal; 25 + } 26 + }
+102 -95
src/components/nav-menu.jsx
··· 1 + import './nav-menu.css'; 2 + 1 3 import { ControlledMenu, MenuDivider, MenuItem } from '@szhsin/react-menu'; 2 4 import { useRef, useState } from 'preact/hooks'; 3 5 import { useLongPress } from 'use-long-press'; ··· 73 75 <Icon icon="menu" size={moreThanOneAccount ? 's' : 'l'} /> 74 76 </button> 75 77 <ControlledMenu 78 + menuClassName="nav-menu" 76 79 state={menuState} 77 80 anchorRef={buttonRef} 78 81 onClose={() => { ··· 97 100 boundingBoxPadding="8 8 8 8" 98 101 unmountOnClose 99 102 > 100 - {!!snapStates.appVersion?.commitHash && 101 - __COMMIT_HASH__ !== snapStates.appVersion.commitHash && ( 103 + <section> 104 + {!!snapStates.appVersion?.commitHash && 105 + __COMMIT_HASH__ !== snapStates.appVersion.commitHash && ( 106 + <> 107 + <MenuItem 108 + onClick={() => { 109 + const yes = confirm('Reload page now to update?'); 110 + if (yes) { 111 + (async () => { 112 + try { 113 + location.reload(); 114 + } catch (e) {} 115 + })(); 116 + } 117 + }} 118 + > 119 + <Icon icon="sparkles" size="l" />{' '} 120 + <span>New update available…</span> 121 + </MenuItem> 122 + <MenuDivider /> 123 + </> 124 + )} 125 + <MenuLink to="/"> 126 + <Icon icon="home" size="l" /> <span>Home</span> 127 + </MenuLink> 128 + {authenticated && ( 129 + <> 130 + {showFollowing && ( 131 + <MenuLink to="/following"> 132 + <Icon icon="following" size="l" /> <span>Following</span> 133 + </MenuLink> 134 + )} 135 + <MenuLink to="/mentions"> 136 + <Icon icon="at" size="l" /> <span>Mentions</span> 137 + </MenuLink> 138 + <MenuLink to="/notifications"> 139 + <Icon icon="notification" size="l" /> <span>Notifications</span> 140 + {snapStates.notificationsShowNew && ( 141 + <sup title="New" style={{ opacity: 0.5 }}> 142 + {' '} 143 + &bull; 144 + </sup> 145 + )} 146 + </MenuLink> 147 + <MenuDivider /> 148 + <MenuLink to="/l"> 149 + <Icon icon="list" size="l" /> <span>Lists</span> 150 + </MenuLink> 151 + <MenuLink to="/ft"> 152 + <Icon icon="hashtag" size="l" /> <span>Followed Hashtags</span> 153 + </MenuLink> 154 + <MenuLink to="/b"> 155 + <Icon icon="bookmark" size="l" /> <span>Bookmarks</span> 156 + </MenuLink> 157 + <MenuLink to="/f"> 158 + <Icon icon="heart" size="l" /> <span>Favourites</span> 159 + </MenuLink> 160 + </> 161 + )} 162 + <MenuDivider /> 163 + <MenuLink to={`/search`}> 164 + <Icon icon="search" size="l" /> <span>Search</span> 165 + </MenuLink> 166 + <MenuLink to={`/${instance}/p/l`}> 167 + <Icon icon="group" size="l" /> <span>Local</span> 168 + </MenuLink> 169 + <MenuLink to={`/${instance}/p`}> 170 + <Icon icon="earth" size="l" /> <span>Federated</span> 171 + </MenuLink> 172 + <MenuLink to={`/${instance}/trending`}> 173 + <Icon icon="chart" size="l" /> <span>Trending</span> 174 + </MenuLink> 175 + </section> 176 + <section> 177 + {authenticated && ( 102 178 <> 179 + <MenuDivider /> 180 + {currentAccount?.info?.id && ( 181 + <MenuLink to={`/${instance}/a/${currentAccount.info.id}`}> 182 + <Icon icon="user" size="l" /> <span>Profile</span> 183 + </MenuLink> 184 + )} 103 185 <MenuItem 104 186 onClick={() => { 105 - const yes = confirm('Reload page now to update?'); 106 - if (yes) { 107 - (async () => { 108 - try { 109 - location.reload(); 110 - } catch (e) {} 111 - })(); 112 - } 187 + states.showAccounts = true; 188 + }} 189 + > 190 + <Icon icon="group" size="l" /> <span>Accounts&hellip;</span> 191 + </MenuItem> 192 + <MenuItem 193 + onClick={() => { 194 + states.showShortcutsSettings = true; 195 + }} 196 + > 197 + <Icon icon="shortcut" size="l" />{' '} 198 + <span>Shortcuts Settings&hellip;</span> 199 + </MenuItem> 200 + <MenuItem 201 + onClick={() => { 202 + states.showSettings = true; 113 203 }} 114 204 > 115 - <Icon icon="sparkles" size="l" />{' '} 116 - <span>New update available…</span> 205 + <Icon icon="gear" size="l" /> <span>Settings&hellip;</span> 117 206 </MenuItem> 118 - <MenuDivider /> 119 207 </> 120 208 )} 121 - <MenuLink to="/"> 122 - <Icon icon="home" size="l" /> <span>Home</span> 123 - </MenuLink> 124 - {authenticated && ( 125 - <> 126 - {showFollowing && ( 127 - <MenuLink to="/following"> 128 - <Icon icon="following" size="l" /> <span>Following</span> 129 - </MenuLink> 130 - )} 131 - <MenuLink to="/mentions"> 132 - <Icon icon="at" size="l" /> <span>Mentions</span> 133 - </MenuLink> 134 - <MenuLink to="/notifications"> 135 - <Icon icon="notification" size="l" /> <span>Notifications</span> 136 - {snapStates.notificationsShowNew && ( 137 - <sup title="New" style={{ opacity: 0.5 }}> 138 - {' '} 139 - &bull; 140 - </sup> 141 - )} 142 - </MenuLink> 143 - <MenuDivider /> 144 - <MenuLink to="/l"> 145 - <Icon icon="list" size="l" /> <span>Lists</span> 146 - </MenuLink> 147 - <MenuLink to="/ft"> 148 - <Icon icon="hashtag" size="l" /> <span>Followed Hashtags</span> 149 - </MenuLink> 150 - <MenuLink to="/b"> 151 - <Icon icon="bookmark" size="l" /> <span>Bookmarks</span> 152 - </MenuLink> 153 - <MenuLink to="/f"> 154 - <Icon icon="heart" size="l" /> <span>Favourites</span> 155 - </MenuLink> 156 - </> 157 - )} 158 - <MenuDivider /> 159 - <MenuLink to={`/search`}> 160 - <Icon icon="search" size="l" /> <span>Search</span> 161 - </MenuLink> 162 - <MenuLink to={`/${instance}/p/l`}> 163 - <Icon icon="group" size="l" /> <span>Local</span> 164 - </MenuLink> 165 - <MenuLink to={`/${instance}/p`}> 166 - <Icon icon="earth" size="l" /> <span>Federated</span> 167 - </MenuLink> 168 - <MenuLink to={`/${instance}/trending`}> 169 - <Icon icon="chart" size="l" /> <span>Trending</span> 170 - </MenuLink> 171 - {authenticated && ( 172 - <> 173 - <MenuDivider /> 174 - {currentAccount?.info?.id && ( 175 - <MenuLink to={`/${instance}/a/${currentAccount.info.id}`}> 176 - <Icon icon="user" size="l" /> <span>Profile</span> 177 - </MenuLink> 178 - )} 179 - <MenuItem 180 - onClick={() => { 181 - states.showAccounts = true; 182 - }} 183 - > 184 - <Icon icon="group" size="l" /> <span>Accounts&hellip;</span> 185 - </MenuItem> 186 - <MenuItem 187 - onClick={() => { 188 - states.showShortcutsSettings = true; 189 - }} 190 - > 191 - <Icon icon="shortcut" size="l" />{' '} 192 - <span>Shortcuts Settings&hellip;</span> 193 - </MenuItem> 194 - <MenuItem 195 - onClick={() => { 196 - states.showSettings = true; 197 - }} 198 - > 199 - <Icon icon="gear" size="l" /> <span>Settings&hellip;</span> 200 - </MenuItem> 201 - </> 202 - )} 209 + </section> 203 210 </ControlledMenu> 204 211 </> 205 212 );