feat(web): expand/collapse sidebar #16768

ben-basten · 2025-03-10T11:36:04Z

Description

Adding a collapsible sidebar with a hamburger menu for all breakpoints smaller than Tailwind md.

Benefits include:

more space for page content on smaller screen sizes
seeing the full text of the sidebar buttons on small screens, rather than just seeing the mini sidebar with icons only
sidebar contains the same content in mobile vs desktop, such as the supporter badge, server info, and online status

Also in this change:

Migrated all buttons in the sidebar and account info panel to use @immich/ui components, for consistent spacing and look.
Moved the theme toggle into the account info panel, to declutter the top navigation.
Fix the focus out behavior on the search bar so it will properly activate/deactivate. Currently it stays highlighted and never deactivates after focus leaves.
Maintain focus in the sidebar if a tree item is clicked on the folders or tags pages
Use bubbling instead of capturing for the click-outside Svelte action, to allow for finer control of the events, and stopping upward propogation if needed

How Has This Been Tested?

Testing that the sidebar is behaving as expected for all screen sizes in Firefox, Safari, and Chrome on MacOS.
Focusing the search bar highlights it, removing focus removes the color highlighting
Theme toggle working in the account info panel
The sidebar works as expected in the "Administration" settings, Folders page, Tags page, and main Immich sidebar

Screenshots

New account info panel

Sidebar expanded, phone size

Persistent sidebar, tablet size

Purchase options, phone size

Checklist:

I have performed a self-review of my own code
I have made corresponding changes to the documentation if applicable
I have no unrelated changes in the PR.
I have confirmed that any new dependencies are strictly necessary.
I have written tests for new code (if applicable)
I have followed naming conventions/patterns in the surrounding code

github-actions · 2025-03-10T11:50:04Z

Deploying preview environment to https://pr-16768.preview.internal.immich.cloud/

- add skip link unit test - remove unused tailwind styles - adjust asset grid spacing - fix event propogation

jrasm91 · 2025-03-11T02:45:11Z

Looks like the menu items only work once and then they seem to only trigger closing the sidebar (on mobile at least)

ben-basten · 2025-03-11T03:07:20Z

Looks like the menu items only work once and then they seem to only trigger closing the sidebar (on mobile at least)

Nice catch @jrasm91, looks like one of the event handlers wasn't being removed properly. It's now fixed in the preview deployment!

jrasm91

Very nice!

web/src/lib/components/elements/buttons/skip-link.svelte

…/responsive-sidebar

…/responsive-sidebar conflict: navigation-bar.svelte

ben-basten · 2025-03-17T16:36:04Z

This changes the appearance of the account info panel and moves the dark mode button into the account info panel, which sounds like they might not be desired changes at this time. Let me know if these need to be adjusted, I'm also watching for conversation on #16838.

Edit: I reverted the changes to the top nav icons and account info panel.

Screenshot

…/responsive-sidebar conflict: purchase-info.svelte

…/responsive-sidebar

…/responsive-sidebar conflict: asset-grid.svelte

…line

@midzelis

…/responsive-sidebar Folding @midzelis top nav changes into the expand/collapse sidebar. conflicts: user-page-layout.svelte navigation-bar.svelte side-bar-section.svelte

…/responsive-sidebar

alextran1502 · 2025-04-02T02:12:01Z

Thank you <3 sorry for the hassle!

* feat: expand/collapse sidebar * fix: general PR cleanup - add skip link unit test - remove unused tailwind styles - adjust asset grid spacing - fix event propogation * fix: cleaning up event listeners * fix: purchase modal and button on small screens * fix: explicit tailwind classes * fix: no animation on initial page load * fix: sidebar spacing and reactivity * chore: reverting changes to icons in nav and account info panel * fix: remove left margin from the asset grid after merging in new timeline * chore: extract search-bar changes for a separate PR * fix: add margin to memories

github-actions bot added the 🖥️web label Mar 10, 2025

ben-basten added the changelog:feature label Mar 10, 2025

bo0tzz added the preview label Mar 10, 2025

ben-basten added 2 commits March 10, 2025 22:32

feat: expand/collapse sidebar

fc43ec0

fix: general PR cleanup

ec9a70c

- add skip link unit test - remove unused tailwind styles - adjust asset grid spacing - fix event propogation

ben-basten force-pushed the feat/responsive-sidebar branch from cc0b286 to ec9a70c Compare March 11, 2025 02:32

jrasm91 added preview and removed preview labels Mar 11, 2025

fix: cleaning up event listeners

7d8f672

ben-basten added preview and removed preview labels Mar 11, 2025

ben-basten changed the title ~~feat: expand/collapse sidebar~~ feat(web): expand/collapse sidebar Mar 11, 2025

fix: purchase modal and button on small screens

3097a25

This comment was marked as outdated.

Sign in to view

ben-basten added preview and removed preview labels Mar 11, 2025

jrasm91 approved these changes Mar 11, 2025

View reviewed changes

web/src/lib/components/elements/buttons/skip-link.svelte Outdated Show resolved Hide resolved

ben-basten added 2 commits March 11, 2025 12:57

fix: explicit tailwind classes

de5e1cc

fix: no animation on initial page load

03137d4

ben-basten force-pushed the feat/responsive-sidebar branch from db3fd4d to 03137d4 Compare March 11, 2025 22:24

ben-basten added 2 commits March 11, 2025 18:25

Merge branch 'main' of https://github.com/immich-app/immich into feat…

656232e

…/responsive-sidebar

fix: sidebar spacing and reactivity

568a049

ben-basten force-pushed the feat/responsive-sidebar branch from 12358b8 to 568a049 Compare March 12, 2025 04:09

ben-basten added preview and removed preview labels Mar 12, 2025

Merge branch 'main' into feat/responsive-sidebar

43b6b4f

ben-basten marked this pull request as ready for review March 12, 2025 20:45

ben-basten added preview and removed preview labels Mar 12, 2025

Merge branch 'main' of https://github.com/immich-app/immich into feat…

7b30a88

…/responsive-sidebar conflict: navigation-bar.svelte

ben-basten added 3 commits March 18, 2025 21:43

Merge branch 'main' of https://github.com/immich-app/immich into feat…

bb9abf9

…/responsive-sidebar conflict: purchase-info.svelte

Merge branch 'main' of https://github.com/immich-app/immich into feat…

26c5661

…/responsive-sidebar

chore: reverting changes to icons in nav and account info panel

f298087

ben-basten force-pushed the feat/responsive-sidebar branch from a5b949d to f298087 Compare March 21, 2025 01:49

ben-basten added 7 commits March 22, 2025 11:46

Merge branch 'main' of https://github.com/immich-app/immich into feat…

2be0c8d

…/responsive-sidebar conflict: asset-grid.svelte

fix: remove left margin from the asset grid after merging in new time…

fbbecb5

…line

Merge branch 'main' of https://github.com/immich-app/immich into feat…

e3f9298

…/responsive-sidebar Folding @midzelis top nav changes into the expand/collapse sidebar. conflicts: user-page-layout.svelte navigation-bar.svelte side-bar-section.svelte

chore: extract search-bar changes for a separate PR

d9c83b8

Merge branch 'main' of https://github.com/immich-app/immich into feat…

cf53917

…/responsive-sidebar

fix: add margin to memories

cf2aeaf

Merge branch 'main' of https://github.com/immich-app/immich into feat…

268c717

…/responsive-sidebar

zackpollard requested a review from alextran1502 April 1, 2025 00:50

Merge branch 'main' into feat/responsive-sidebar

e9f64fd

alextran1502 merged commit 6e62c09 into main Apr 2, 2025
45 checks passed

alextran1502 deleted the feat/responsive-sidebar branch April 2, 2025 02:12

github-actions bot removed the preview label Apr 2, 2025

ben-basten mentioned this pull request Apr 2, 2025

fix(web): menu button size #17321

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat(web): expand/collapse sidebar #16768

feat(web): expand/collapse sidebar #16768

Uh oh!

ben-basten commented Mar 10, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Mar 10, 2025

Uh oh!

jrasm91 commented Mar 11, 2025

Uh oh!

ben-basten commented Mar 11, 2025

Uh oh!

This comment was marked as outdated.

jrasm91 left a comment

Uh oh!

Uh oh!

ben-basten commented Mar 17, 2025 •

edited

Loading

Uh oh!

alextran1502 commented Apr 2, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

feat(web): expand/collapse sidebar #16768

feat(web): expand/collapse sidebar #16768

Uh oh!

Conversation

ben-basten commented Mar 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How Has This Been Tested?

Screenshots

Checklist:

Uh oh!

github-actions bot commented Mar 10, 2025

Uh oh!

jrasm91 commented Mar 11, 2025

Uh oh!

ben-basten commented Mar 11, 2025

Uh oh!

This comment was marked as outdated.

jrasm91 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ben-basten commented Mar 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alextran1502 commented Apr 2, 2025

Uh oh!

Uh oh!

Uh oh!

ben-basten commented Mar 10, 2025 •

edited

Loading

ben-basten commented Mar 17, 2025 •

edited

Loading