Backport navbar rendering from upstream

[julien-deramond]

Description

This PR backports the navbar rendering from upstream:

• src/assets/scss/_navbar.scss is basically a copy of the upstream file. The only specificity is the hr { margin: 1rem 0; } that is added in order to override the global hr rule defined in this project
• src/layouts/partials/icons/bootstrap-white-fill.svg has been replaced by upstream version to include <title>{{ with .title }}{{ . }}{{ else }}Bootstrap{{ end }}</title>
• src/layouts/partials/navbar.html:
  • Drop deprecated .navbar-dark class
  • Change to <div class="d-lg-none" style="width: 2rem;"></div> so that the logo is perfectly aligned with the one of the main website when switching from one to another
  • Added missing tabindex="-1" to the offcanvas
  • Didn't add data-bs-scroll="true" to the offcanvas. Waiting for Docs: drop data-bs-scroll="true" from navbar bootstrap#39766 to be merged to confirm this choice.

Live preview

https://deploy-preview-422--bootstrapblog.netlify.app/

[XhmikosR]

I don't think we need the changes in src/_includes/icons/bootstrap-white-fill.svg. We only include the icon once in this repo.

[julien-deramond]

I don't think we need the changes in src/_includes/icons/bootstrap-white-fill.svg. We only include the icon once in this repo.

In this repo and upstream, we use it 2 times: in the navbar and in the footer:

1. In the navbar:

{{ partial "icons/bootstrap-white-fill.svg" (dict "class" "d-block my-1" "width" "40" "height" "32") }}

2. In the footer:

{{ partial "icons/bootstrap-white-fill.svg" (dict "class" "d-block me-2" "width" "40" "height" "32") }}

Since we never use the title parameter, I can modify this change by letting the <title>Bootstrap</title> for a11y in the SVG but by removing the unused title parameter management (<title>{{ with .title }}{{ . }}{{ else }}Bootstrap{{ end }}</title>)

If you're OK with that change, you can thumb up this comment and I'll make the change in this PR and upstream.

[XhmikosR]

I just cannot tell what this change in the icon brings us since the diff doesn't show the changes.

…

On Sun, Mar 10, 2024, 19:06 Julien Déramond ***@***.***> wrote: I don't think we need the changes in src/_includes/icons/bootstrap-white-fill.svg. We only include the icon once in this repo. In this repo and upstream, we use it 2 times: in the navbar and in the footer: 1. In the navbar: {{ partial "icons/bootstrap-white-fill.svg" (dict "class" "d-block my-1" "width" "40" "height" "32") }} 1. In the footer: {{ partial "icons/bootstrap-white-fill.svg" (dict "class" "d-block me-2" "width" "40" "height" "32") }} Since we never use the title parameter, I can modify this change by letting the <title>Bootstrap</title> for a11y in the SVG but by removing the unused title parameter management (<title>{{ with .title }}{{ . }}{{ else }}Bootstrap{{ end }}</title>) If you're OK with that change, you can thumb up this comment and I'll make the change in this PR and upstream. — Reply to this email directly, view it on GitHub <#422 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACVLNI6KFJJ4LQ3JRS64HDYXSHJXAVCNFSM6AAAAABEMLRPPWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSOBXGI4TMNBQGA> . You are receiving this because you commented.Message ID: ***@***.***>

[julien-deramond]

It only added this part to the SVG: <title>{{ with .title }}{{ . }}{{ else }}Bootstrap{{ end }}</title>

[XhmikosR]

@julien-deramond it seems the navbar logo now is black but the preview was looking fine

I'm going to revert the merge and we can revert the revert and fix it later.

[XhmikosR]

I could have been CloudFlare caching, totally forgot to purge the cache before reverting this...