Transparent navbar#182 #185
Conversation
app/components/top-nav-bar.jsx
Outdated
| @@ -222,6 +247,7 @@ const useStylesFromThemeFunction = createUseStyles(theme => ({ | |||
| position: 'relative', | |||
| }, | |||
| logo: { | |||
| zIndex: 1, | |||
There was a problem hiding this comment.
I don't think zIndex is needed here. (I turned it off and it seemed to work the same). I'm I missing something?
I try not to use zIndex because down the road there ends up being conflicts if there's competing zIndexes. But if it is needed, could you add a comment about why?
There was a problem hiding this comment.
Yeah, I remember in a previous issue we discussed not using zIndex when possible. If I recall correctly, the logo wasn't appearing in the navbar for me when I tried it in Enciv Home, but the bar itself was. Then when I added zIndex it showed again.
My thoughts were that if another component caused this, it'd block the entire bar and not just the logo. I'm not entirely sure though.
Since the changes here weren't merged yet I copied the top-nav-bar code from this branch into node_modules/civil-pursuit/dist/components/top-nav-bar.js, and replaced the useStylesFromThemeFunction() part to test layout when using transparent mode in Enciv Home.
There was a problem hiding this comment.
Also, if you do need zIndex please put it in theme.zIndexes. Also, see the one that is already there.
There was a problem hiding this comment.
Also, see the one that is already there.
Ah, I must've missed that. I moved the theme.zIndexes.menu to apply to the entire component.
There was a problem hiding this comment.
Okay, so standalone it looks good. But if you npm run dev you get the image below.
I thought it was the zIndex, but even if you go back to master, the problem is there too. So it's one of the recent changes to navbar.
There should be a bunch of white space between the bottom of the nav-bar and the top of the sign-in component.
Also I want to clarify that the nav-bar should scroll up and away when the user scrolls the page. We are not trying to have it stick to the top.
Anyway - can you look into this, even though its a bug that started from a previous PR that I accepted.
Thanks,
@ddfridley I noticed the parent div was in proper place and taking space below the nav bar. The signup component was too on the initial load, but popped out after a second. There were a bunch of errors logged in the console - one was a warning about a missing button tag in button.jsx even though it was there. The rest were various status-box statuses saying they weren't defined even though they were. I don't really understand why those errors appeared, but seeing as status-box was just merged I figured I'd do a fresh
|
This change adds a transparent mode to the top-nav-bar, which also makes the navbar absolutely positioned so elements can display behind it, and fixes padding in the mobile menu to improve spacing.
Part of the changes are included in EnCiv/enciv-home#57