Sidebar Nav on mobile

[kulmann]

Initial Checklist

• I understand this is a user story and questions should be posted in the Community Discussions
• I searched issues and couldn’t find anything (or linked relevant results below)

User Story

• As a mobile browser user, I want to use the sidebar for navigation so that I can reach anything I could reach from a desktop device as well.

User Value

Navigation

Acceptance Criteria

• the SidebarNav is available on mobile viewports
• sidebar nav replaces the current mobile navigation (dropdown in the files app, nav items presented as bottom drawer)
• triggered by burger menu icon button on the left of the opencloud logo (only on mobile)
• app switcher trigger button moved to the right (see comment below by Tobi)
• slides in from left to right, uses 95-98% of the viewport width (depending on what looks best)
• breadcrumb root element (wherever we have breadcrumbs) is a title, not a dropdown button anymore

[tbsbdr]

Proposal

Move App switcher to the right

(to make room for the mobile burger menu)

Show burger menu

to toggle left sidebar, same logic like in the Console

[tbsbdr]

@db-ot could you please provide proper icons? i think we need custom ones to better distinguish Tiles view vs. Spaces vs. 9-dots menu.

[AlexAndBear]

@tbsbdr it get's even worse, I changed the icon of the app menu/drawer, so we can have a filled icon to make it more clear to the user

[tbsbdr]

for tiles view i suggest gallery-view-2
for list view i suggest list-unordered so that there is no mixup with the mobile burger menu

custom icon for the app switcher:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path d="M4.875 7.25C6.18125 7.25 7.25 6.18125 7.25 4.875C7.25 3.56875 6.18125 2.5 4.875 2.5C3.56875 2.5 2.5 3.56875 2.5 4.875C2.5 6.18125 3.56875 7.25 4.875 7.25ZM12 21.5C13.3063 21.5 14.375 20.4313 14.375 19.125C14.375 17.8187 13.3063 16.75 12 16.75C10.6937 16.75 9.625 17.8187 9.625 19.125C9.625 20.4313 10.6937 21.5 12 21.5ZM4.875 21.5C6.18125 21.5 7.25 20.4313 7.25 19.125C7.25 17.8187 6.18125 16.75 4.875 16.75C3.56875 16.75 2.5 17.8187 2.5 19.125C2.5 20.4313 3.56875 21.5 4.875 21.5ZM4.875 14.375C6.18125 14.375 7.25 13.3063 7.25 12C7.25 10.6937 6.18125 9.625 4.875 9.625C3.56875 9.625 2.5 10.6937 2.5 12C2.5 13.3063 3.56875 14.375 4.875 14.375ZM12 14.375C13.3063 14.375 14.375 13.3063 14.375 12C14.375 10.6937 13.3063 9.625 12 9.625C10.6937 9.625 9.625 10.6937 9.625 12C9.625 13.3063 10.6937 14.375 12 14.375ZM16.75 4.875C16.75 6.18125 17.8187 7.25 19.125 7.25C20.4313 7.25 21.5 6.18125 21.5 4.875C21.5 3.56875 20.4313 2.5 19.125 2.5C17.8187 2.5 16.75 3.56875 16.75 4.875ZM12 7.25C13.3063 7.25 14.375 6.18125 14.375 4.875C14.375 3.56875 13.3063 2.5 12 2.5C10.6937 2.5 9.625 3.56875 9.625 4.875C9.625 6.18125 10.6937 7.25 12 7.25ZM19.125 14.375C20.4313 14.375 21.5 13.3063 21.5 12C21.5 10.6937 20.4313 9.625 19.125 9.625C17.8187 9.625 16.75 10.6937 16.75 12C16.75 13.3063 17.8187 14.375 19.125 14.375ZM19.125 21.5C20.4313 21.5 21.5 20.4313 21.5 19.125C21.5 17.8187 20.4313 16.75 19.125 16.75C17.8187 16.75 16.75 17.8187 16.75 19.125C16.75 20.4313 17.8187 21.5 19.125 21.5Z" />
</svg>