Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Create Left Sidebar layout #672

Merged
merged 7 commits into from
Sep 20, 2023
Merged

Create Left Sidebar layout #672

merged 7 commits into from
Sep 20, 2023

Conversation

negreirosleo
Copy link
Contributor

This PR implements the Left Sidebar for the Layout.

  • When it is expanded it shows the full logo with text, the link texts and the horizontal dark-mode switch
  • When it is collapsed it shows the small logo, the navigation icons only and the vertical dark-mode switch
Screencast.from.2023-09-18.16-29-29.webm

@negreirosleo negreirosleo changed the title Create Left Sidebar layout [WIP] Create Left Sidebar layout Sep 18, 2023
anarute
anarute approved these changes Sep 19, 2023
View reviewed changes
Copy link
Member

@anarute anarute left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall it looks good to me!

dmtrek14
dmtrek14 reviewed Sep 19, 2023
View reviewed changes
Copy link
Collaborator

@dmtrek14 dmtrek14 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall, this is looking great. I have a number of small accessibility related changes marked throughout.

One small nit: the focus border on the menu items seems to get cut off on the sides (in both Chromium and Firefox). Can you see if you can fix it?

Screenshot from 2023-09-19 10-02-38

frontend/src/ui/sidebar/Sidebar.tsx Outdated Show resolved Hide resolved
frontend/src/ui/sidebar/Sidebar.tsx Outdated Show resolved Hide resolved
frontend/src/ui/sidebar/DarkModeSwitch.tsx Outdated Show resolved Hide resolved
frontend/src/ui/sidebar/DarkModeSwitch.tsx Outdated Show resolved Hide resolved
frontend/src/ui/sidebar/DarkModeSwitch.tsx Outdated Show resolved Hide resolved
frontend/src/ui/sidebar/DarkModeSwitch.tsx Outdated Show resolved Hide resolved
frontend/src/ui/sidebar/DarkModeSwitch.tsx Outdated Show resolved Hide resolved
frontend/src/ui/sidebar/DarkModeSwitch.tsx Outdated Show resolved Hide resolved
dmtrek14
dmtrek14 approved these changes Sep 19, 2023
View reviewed changes
Copy link
Collaborator

@dmtrek14 dmtrek14 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the latest round of changes - this all looks good to me.

@negreirosleo negreirosleo changed the title [WIP] Create Left Sidebar layout Create Left Sidebar layout Sep 20, 2023
@negreirosleo negreirosleo merged commit 9498e08 into main Sep 20, 2023
1 check passed
@negreirosleo negreirosleo deleted the create-sidebar branch September 20, 2023 13:02
negreirosleo added a commit that referenced this pull request Mar 4, 2024
@negreirosleo
Create Left Sidebar layout (#672)
04f57d7 
* Create Left Sidebar layout

* Setup Jest on the project

* Create SideBar test

* Fix DarkModeSwitch color contrast

* Add ScreenReaderOnly Text to expand/collapse button

* Create SkipNavigation anchor

* Remove unnecessary button from AuthorizedPage
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@anarute anarute anarute approved these changes

@dmtrek14 dmtrek14 dmtrek14 approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@negreirosleo @anarute @dmtrek14