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.

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

ui: Sidebar navigation / redesign #9553

Merged
merged 4 commits into from
Jan 26, 2021
Merged

ui: Sidebar navigation / redesign #9553

merged 4 commits into from
Jan 26, 2021

Conversation

johncowen
Copy link
Contributor

This is the first PR of another couple/few which re-arrange our main application 'chrome' to use a redesigned sidebar navigation.

This is still currently part way through, but as I've hit a stage with is a working shippable re-design, I thought I'd PR it here and iterate more on it.

The majority of the changes are CSS as the HTML is semantically fine as is (I slightly changed component HTML template to use a tagless component and tweak the order of the toggle button). I'll probably upgrade the component to glimmer completely in the next PR.

There's also a little work here for the basis of a high/low contrast and dark/light mode for better accessibility.

sidebar

Copy link
Contributor

@kaxcode kaxcode left a comment

Choose a reason for hiding this comment

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

✨ 💄 Looks awesome! Glad this is going in before Auth Methods.

@vercel
Copy link

vercel bot commented Jan 21, 2021

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/hashicorp/consul/3kxwgn5zh
✅ Preview: Canceled

John Cowen and others added 3 commits January 26, 2021 15:49
* Add <App /> Component and rearrange <HashcorpConsul /> to use it

1. HashicorpConsul now uses <App />
2. <App /> is now translated and adds 'skip to main content' functionality
3. Adds ember-in-viewport addon in order to visibly hide main navigation
items in order to take them out of focus/tabbing
4. Slight amends to the dom service while I was there

* Additional CSS amends for side menus, increased header etc

1. We use dark popover-menus in the side nav
2. Main header is slightly bigger now
3. Undo global themeing but keep component based theming

* Remove old ACLs subnav and 're-title-ize'

* Fix up pageobjects

* Apparently scrolling is a thing, whoops!
@vercel vercel bot temporarily deployed to Preview – consul January 26, 2021 16:28 Inactive
@vercel vercel bot temporarily deployed to Preview – consul-ui-staging January 26, 2021 16:28 Inactive
@johncowen johncowen merged commit 82a62cd into master Jan 26, 2021
@johncowen johncowen deleted the ui/feature/sidebar-nav branch January 26, 2021 17:40
@hashicorp-ci
Copy link
Contributor

🍒 If backport labels were added before merging, cherry-picking will start automatically.

To retroactively trigger a backport after merging, add backport labels and re-run https://circleci.com/gh/hashicorp/consul/317471.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
theme/ui Anything related to the UI
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants