Add example of dark navbar and offcanvas to docs #36510
Conversation
There was a problem hiding this comment.
Good addition to the documentation!
Just wondering if the dark offcanvas shouldn't be detailed in "Offcanvas > Dark offcanvases" (as it is done for the Dark dropdowns) and then in the dark navbar description explain that it uses this dark offcanvas (and keep the reusable code in the doc).
|
Before accepting the PR what do you think about creating "Offcanvas > Dark offcanvases" and then in the dark navbar description explaining that it uses this dark offcanvas (and keep the reusable code in the doc)? |
Co-authored-by: Julien Déramond <juderamond@gmail.com>
mdo
force-pushed
the
docs-navbar-offcanvas-dark
branch
from
d790cc8
to
cfb72ec
Compare
|
@julien-deramond Should be good now! |
| @@ -79,6 +79,22 @@ You can use a link with the `href` attribute, or a button with the `data-bs-targ | |||
| </div> | |||
| {{< /example >}} | |||
|
|
|||
| ### Dark offcanvas | |||
|
|
|||
| Change the appearance of offcanvases with utilities to better match them to different contexts like dark navbars. Here we add `.text-bg-dark` to the `.offcanvas` and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas. If you have dropdowns within, consider also adding `.dropdown-menu-dark` to `.dropdown-menu`. | |||
There was a problem hiding this comment.
I'd have removed the last sentence. More generally in a dark component content, we should use dark variants of components.
It's OK to talk about .text-bg-dark and .btn-close-white because it is part of the offcanvas' structure, but the dropdown would be used only to fill the content.
| @@ -732,6 +732,52 @@ To create an offcanvas navbar that expands into a normal navbar at a specific br | |||
| </nav> | |||
| ``` | |||
|
|
|||
| When using offcanvas in a dark navbar, be aware that you may need to have a dark background on the offcanvas content to avoid the text becoming illegible. In the example below, we add `.navbar-dark` and `.bg-dark` to the `.navbar`, `.text-bg-dark` to the `.offcanvas`, `.dropdown-menu-dark` to `.dropdown-menu`, and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas. | |||
There was a problem hiding this comment.
Proposition of enhancement. I would have used a direct link to the Dark variant of the offcanvas rather than explaining how it is built.
| When using offcanvas in a dark navbar, be aware that you may need to have a dark background on the offcanvas content to avoid the text becoming illegible. In the example below, we add `.navbar-dark` and `.bg-dark` to the `.navbar`, `.text-bg-dark` to the `.offcanvas`, `.dropdown-menu-dark` to `.dropdown-menu`, and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas. | |
| When using offcanvas in a dark navbar, be aware that you may need to have a dark background on the offcanvas content to avoid the text becoming illegible. In the example below, we add `.navbar-dark` and `.bg-dark` to the `.navbar`, `.dropdown-menu-dark` to `.dropdown-menu`, and use a [Dark offcanvas]({{< docsref "/components/offcanvas/#dark-offcanvas" >}})`. |
|
Oops! Didn't read on mobile before merging 😅. I'll do another PR to address the comments :). |
Closes #34685.
We don't show folks currently any example of a dark navbar and offcanvas. This PR adds one in hopes of better demonstrating that additional changes are necessary at the moment for them to work correctly. I hope this can be improved with dark mode theming where we can change the colors on components with
data-theme. In the meantime, some overrides are necessary.