diff options
author | Ricardo Cino <ricardo@cino.io> | 2022-06-27 00:02:24 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-06-26 22:02:24 +0000 |
commit | 43acb4145e0d19ec9a28a59583510499af624fb7 (patch) | |
tree | b6e0a17424b936f9478c41785c2cdee208d50d26 /src/components/layout | |
parent | chore: turned all auth containers into typescript (#375) (diff) | |
download | ferdium-app-43acb4145e0d19ec9a28a59583510499af624fb7.tar.gz ferdium-app-43acb4145e0d19ec9a28a59583510499af624fb7.tar.zst ferdium-app-43acb4145e0d19ec9a28a59583510499af624fb7.zip |
feat: remember collapsed state of hamburger menu on refresh/reboot (#373)
Diffstat (limited to 'src/components/layout')
-rw-r--r-- | src/components/layout/Sidebar.jsx (renamed from src/components/layout/Sidebar.js) | 99 |
1 files changed, 52 insertions, 47 deletions
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.jsx index 1d3c81dcd..6949544b4 100644 --- a/src/components/layout/Sidebar.js +++ b/src/components/layout/Sidebar.jsx | |||
@@ -93,6 +93,8 @@ class Sidebar extends Component { | |||
93 | wakeUpService: PropTypes.func.isRequired, | 93 | wakeUpService: PropTypes.func.isRequired, |
94 | toggleMuteApp: PropTypes.func.isRequired, | 94 | toggleMuteApp: PropTypes.func.isRequired, |
95 | isAppMuted: PropTypes.bool.isRequired, | 95 | isAppMuted: PropTypes.bool.isRequired, |
96 | toggleCollapseMenu: PropTypes.func.isRequired, | ||
97 | isMenuCollapsed: PropTypes.bool.isRequired, | ||
96 | isWorkspaceDrawerOpen: PropTypes.bool.isRequired, | 98 | isWorkspaceDrawerOpen: PropTypes.bool.isRequired, |
97 | toggleWorkspaceDrawer: PropTypes.func.isRequired, | 99 | toggleWorkspaceDrawer: PropTypes.func.isRequired, |
98 | isTodosServiceActive: PropTypes.bool.isRequired, | 100 | isTodosServiceActive: PropTypes.bool.isRequired, |
@@ -105,10 +107,13 @@ class Sidebar extends Component { | |||
105 | }).isRequired, | 107 | }).isRequired, |
106 | }; | 108 | }; |
107 | 109 | ||
108 | state = { | 110 | constructor(props) { |
109 | tooltipEnabled: true, | 111 | super(props); |
110 | isCollapsed: false | 112 | |
111 | }; | 113 | this.state = { |
114 | tooltipEnabled: true, | ||
115 | }; | ||
116 | } | ||
112 | 117 | ||
113 | componentDidUpdate() { | 118 | componentDidUpdate() { |
114 | ReactTooltip.rebuild(); | 119 | ReactTooltip.rebuild(); |
@@ -122,10 +127,6 @@ class Sidebar extends Component { | |||
122 | this.setState({ tooltipEnabled: false }); | 127 | this.setState({ tooltipEnabled: false }); |
123 | } | 128 | } |
124 | 129 | ||
125 | collapseMenu() { | ||
126 | this.setState((prevState) => ({ isCollapsed: !prevState.isCollapsed })); | ||
127 | } | ||
128 | |||
129 | updateToolTip() { | 130 | updateToolTip() { |
130 | this.disableToolTip(); | 131 | this.disableToolTip(); |
131 | setTimeout(this.enableToolTip.bind(this)); | 132 | setTimeout(this.enableToolTip.bind(this)); |
@@ -135,6 +136,7 @@ class Sidebar extends Component { | |||
135 | const { | 136 | const { |
136 | openSettings, | 137 | openSettings, |
137 | toggleMuteApp, | 138 | toggleMuteApp, |
139 | toggleCollapseMenu, | ||
138 | isAppMuted, | 140 | isAppMuted, |
139 | isWorkspaceDrawerOpen, | 141 | isWorkspaceDrawerOpen, |
140 | toggleWorkspaceDrawer, | 142 | toggleWorkspaceDrawer, |
@@ -167,9 +169,11 @@ class Sidebar extends Component { | |||
167 | !hideNotificationsButton, | 169 | !hideNotificationsButton, |
168 | !hideSettingsButton, | 170 | !hideSettingsButton, |
169 | !hideSplitModeButton, | 171 | !hideSplitModeButton, |
170 | todosStore.isFeatureEnabledByUser | 172 | todosStore.isFeatureEnabledByUser, |
171 | ].filter(Boolean).length; | 173 | ].filter(Boolean).length; |
172 | 174 | ||
175 | const { isMenuCollapsed } = stores.settings.all.app; | ||
176 | |||
173 | return ( | 177 | return ( |
174 | <div className="sidebar"> | 178 | <div className="sidebar"> |
175 | <Tabbar | 179 | <Tabbar |
@@ -179,25 +183,26 @@ class Sidebar extends Component { | |||
179 | useVerticalStyle={stores.settings.all.app.useVerticalStyle} | 183 | useVerticalStyle={stores.settings.all.app.useVerticalStyle} |
180 | /> | 184 | /> |
181 | <> | 185 | <> |
182 | {numberActiveButtons <= 1 || hideCollapseButton ? ( | 186 | {numberActiveButtons <= 1 || hideCollapseButton ? null : ( |
183 | null | ||
184 | ) : | ||
185 | <button | 187 | <button |
186 | type="button" | 188 | type="button" |
187 | onClick={() => this.collapseMenu()} | 189 | onClick={() => toggleCollapseMenu()} |
188 | className="sidebar__button sidebar__button--hamburger-menu" | 190 | className="sidebar__button sidebar__button--hamburger-menu" |
189 | > | 191 | > |
190 | {this.state.isCollapsed ? | 192 | {isMenuCollapsed && !useVerticalStyle ? ( |
191 | <Icon icon={mdiMenu} size={1.5} /> | 193 | <Icon icon={mdiMenu} size={1.5} /> |
192 | : | 194 | ) : null} |
193 | (useVerticalStyle) ? | 195 | |
194 | <Icon icon={mdiChevronRight} size={1.5} /> | 196 | {isMenuCollapsed && useVerticalStyle ? ( |
195 | : | 197 | <Icon icon={mdiChevronRight} size={1.5} /> |
196 | <Icon icon={mdiChevronDown} size={1.5} /> | 198 | ) : null} |
197 | } | 199 | |
200 | {!isMenuCollapsed ? ( | ||
201 | <Icon icon={mdiChevronDown} size={1.5} /> | ||
202 | ) : null} | ||
198 | </button> | 203 | </button> |
199 | } | 204 | )} |
200 | {!hideRecipesButton && !this.state.isCollapsed ? ( | 205 | {!hideRecipesButton && !isMenuCollapsed ? ( |
201 | <button | 206 | <button |
202 | type="button" | 207 | type="button" |
203 | onClick={() => openSettings({ path: 'recipes' })} | 208 | onClick={() => openSettings({ path: 'recipes' })} |
@@ -209,7 +214,7 @@ class Sidebar extends Component { | |||
209 | <Icon icon={mdiPlusBox} size={1.5} /> | 214 | <Icon icon={mdiPlusBox} size={1.5} /> |
210 | </button> | 215 | </button> |
211 | ) : null} | 216 | ) : null} |
212 | {!hideSplitModeButton && !this.state.isCollapsed ? ( | 217 | {!hideSplitModeButton && !isMenuCollapsed ? ( |
213 | <button | 218 | <button |
214 | type="button" | 219 | type="button" |
215 | onClick={() => { | 220 | onClick={() => { |
@@ -228,7 +233,7 @@ class Sidebar extends Component { | |||
228 | <Icon icon={mdiViewSplitVertical} size={1.5} /> | 233 | <Icon icon={mdiViewSplitVertical} size={1.5} /> |
229 | </button> | 234 | </button> |
230 | ) : null} | 235 | ) : null} |
231 | {!hideWorkspacesButton && !this.state.isCollapsed ? ( | 236 | {!hideWorkspacesButton && !isMenuCollapsed ? ( |
232 | <button | 237 | <button |
233 | type="button" | 238 | type="button" |
234 | onClick={() => { | 239 | onClick={() => { |
@@ -245,7 +250,7 @@ class Sidebar extends Component { | |||
245 | <Icon icon={mdiViewGrid} size={1.5} /> | 250 | <Icon icon={mdiViewGrid} size={1.5} /> |
246 | </button> | 251 | </button> |
247 | ) : null} | 252 | ) : null} |
248 | {!hideNotificationsButton && !this.state.isCollapsed ? ( | 253 | {!hideNotificationsButton && !isMenuCollapsed ? ( |
249 | <button | 254 | <button |
250 | type="button" | 255 | type="button" |
251 | onClick={() => { | 256 | onClick={() => { |
@@ -262,7 +267,7 @@ class Sidebar extends Component { | |||
262 | <Icon icon={isAppMuted ? mdiBellOff : mdiBell} size={1.5} /> | 267 | <Icon icon={isAppMuted ? mdiBellOff : mdiBell} size={1.5} /> |
263 | </button> | 268 | </button> |
264 | ) : null} | 269 | ) : null} |
265 | {todosStore.isFeatureEnabledByUser && !this.state.isCollapsed ? ( | 270 | {todosStore.isFeatureEnabledByUser && !isMenuCollapsed ? ( |
266 | <button | 271 | <button |
267 | type="button" | 272 | type="button" |
268 | onClick={() => { | 273 | onClick={() => { |
@@ -303,26 +308,26 @@ class Sidebar extends Component { | |||
303 | {this.state.tooltipEnabled && ( | 308 | {this.state.tooltipEnabled && ( |
304 | <ReactTooltip place="right" type="dark" effect="solid" /> | 309 | <ReactTooltip place="right" type="dark" effect="solid" /> |
305 | )} | 310 | )} |
306 | {!hideSettingsButton && !this.state.isCollapsed ? ( | 311 | {!hideSettingsButton && !isMenuCollapsed ? ( |
307 | <button | 312 | <button |
308 | type="button" | 313 | type="button" |
309 | onClick={() => openSettings({ path: 'app' })} | 314 | onClick={() => openSettings({ path: 'app' })} |
310 | className="sidebar__button sidebar__button--settings" | 315 | className="sidebar__button sidebar__button--settings" |
311 | data-tip={`${intl.formatMessage( | 316 | data-tip={`${intl.formatMessage( |
312 | globalMessages.settings, | 317 | globalMessages.settings, |
313 | )} (${settingsShortcutKey(false)})`} | 318 | )} (${settingsShortcutKey(false)})`} |
314 | > | 319 | > |
315 | <Icon icon={mdiCog} size={1.5} /> | 320 | <Icon icon={mdiCog} size={1.5} /> |
316 | { | 321 | {this.props.stores.settings.app.automaticUpdates && |
317 | this.props.stores.settings.app.automaticUpdates && | 322 | (this.props.stores.app.updateStatus === |
318 | (this.props.stores.app.updateStatus === this.props.stores.app.updateStatusTypes.AVAILABLE || | 323 | this.props.stores.app.updateStatusTypes.AVAILABLE || |
319 | this.props.stores.app.updateStatus === this.props.stores.app.updateStatusTypes.DOWNLOADED || | 324 | this.props.stores.app.updateStatus === |
320 | this.props.showServicesUpdatedInfoBar) && ( | 325 | this.props.stores.app.updateStatusTypes.DOWNLOADED || |
321 | <span className="update-available">•</span> | 326 | this.props.showServicesUpdatedInfoBar) && ( |
322 | ) | 327 | <span className="update-available">•</span> |
323 | } | 328 | )} |
324 | </button> | 329 | </button> |
325 | ) : null} | 330 | ) : null} |
326 | </div> | 331 | </div> |
327 | ); | 332 | ); |
328 | } | 333 | } |