Thanks to visit codestin.com
Credit goes to github.com

Skip to content

feat: add top-level nav styles #883

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

Merged
merged 3 commits into from
Apr 6, 2022
Merged

feat: add top-level nav styles #883

merged 3 commits into from
Apr 6, 2022

Conversation

code-asher
Copy link
Member

@code-asher code-asher commented Apr 6, 2022

Partially addresses #701.

Pretty much just adds the styling for top-level nav items. For now it contains one link (projects, soon to be templates).

I avoided the nested navbar entry component since it looked fairly clean to use ListItem and NavLink at the top to me. NavLink also handles the active link (looks like we were doing that manually before) and I left out the resize handlers.

If we port over the route config or something similar we can add a loop where the projects/template link is.

Originally I had the organizations dropdown in there too but I stashed that for now since I saw there was some overlap in Presley's tickets so I thought I might be stepping on toes with the bordered menu (the row, label, etc, I wanted to flatten things a bit as well), plus it will be easier to implement that dropdown once we actually have some organization stuff to link it to anyway (but let me know if it would be better for me to port that over; I am perfectly happy to do so).

The projects/templates link does feel a little redundant since the logo goes to the same place but I suppose it does have the advantage of explicitly being called "projects" so it is more discoverable.

As an aside, does anyone know why <ListItem button> is a div instead of li? Seems like a bug with MUI potentially. Ideally I would not use button at all but idk how else to get the ripple effect on click. Ideally it would be supported on NavLink.

@code-asher code-asher requested a review from a team as a code owner April 6, 2022 01:07
@code-asher code-asher changed the title Add projects link to the top nav feat: add projects link to the top nav Apr 6, 2022
@codecov
Copy link

codecov bot commented Apr 6, 2022

Codecov Report

Merging #883 (5ba5339) into main (8813788) will decrease coverage by 0.27%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##             main     #883      +/-   ##
==========================================
- Coverage   65.80%   65.53%   -0.28%     
==========================================
  Files         123      216      +93     
  Lines       12570    13734    +1164     
  Branches        0      103     +103     
==========================================
+ Hits         8272     9000     +728     
- Misses       3406     3810     +404     
- Partials      892      924      +32     
Flag Coverage Δ
unittest-go- 65.29% <ø> (-0.03%) ⬇️
unittest-go-macos-latest 52.67% <ø> (+0.11%) ⬆️
unittest-go-ubuntu-latest 55.26% <ø> (+0.06%) ⬆️
unittest-go-windows-2022 52.14% <ø> (?)
unittest-js 58.87% <100.00%> (?)
Impacted Files Coverage Δ
site/src/components/Navbar/NavbarView.tsx 100.00% <100.00%> (ø)
provisionerd/provisionerd.go 77.67% <0.00%> (-2.50%) ⬇️
peerbroker/proxy.go 57.55% <0.00%> (-0.59%) ⬇️
site/src/components/Form/FormTitle.tsx 100.00% <0.00%> (ø)
site/src/components/EmptyState/index.tsx 85.71% <0.00%> (ø)
site/src/theme/overrides.ts 100.00% <0.00%> (ø)
site/src/components/Button/index.ts 100.00% <0.00%> (ø)
site/src/components/Button/SplitButton.tsx 89.47% <0.00%> (ø)
site/src/xServices/StateContext.tsx 100.00% <0.00%> (ø)
pty/start_windows.go 66.95% <0.00%> (ø)
... and 92 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 8813788...5ba5339. Read the comment docs.

Copy link
Contributor

@greyscaled greyscaled left a comment

Choose a reason for hiding this comment

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

@code-asher - might want to update PR title/desc, ticket and impl to match #880 ---> seems it came in recently from external feedback right after this was posted, sorry that it will require adjustments here!

<div className={styles.fullWidth} />
<div className={styles.fixed}>{user && <UserDropdown user={user} onSignOut={onSignOut} />}</div>
</div>
</nav>
Copy link
Contributor

Choose a reason for hiding this comment

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

praise: for fixing the semantics of this HTML

Copy link
Contributor

Choose a reason for hiding this comment

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

yay!

@code-asher
Copy link
Member Author

Oh oops thanks for the heads up!

@code-asher code-asher changed the title feat: add projects link to the top nav feat: add top-level nav styles Apr 6, 2022
},

// NavLink adds this class when the current route matches.
"&.active": {
Copy link
Contributor

Choose a reason for hiding this comment

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

chef's kiss

@code-asher code-asher merged commit fe23dcd into main Apr 6, 2022
@code-asher code-asher deleted the asher/top-nav branch April 6, 2022 18:12
@misskniss misskniss added this to the V2 Beta milestone May 15, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants