feat(layout): Navbar component

[vanadium23]

• Implemented a new navbar component that is displayed at the top of the page
• Positioned above all other layout elements for consistent navigation visibility
• Initial styling and functionality added for core navigation needs

Example from personal website:

[aarnphm]

Hmm, there is already a header component. My feeling is that having another field (that sorta work the same, albeit you can do some scss to stick the header on top) would probably make it confusing for end users

[saberzero1]

Hmm, there is already a header component. My feeling is that having another field (that sorta work the same, albeit you can do some scss to stick the header on top) would probably make it confusing for end users

The header component by default contains the page title, breadcrumbs, and metadata. It is not suitable for this purpose.

[vanadium23]

Hmm, there is already a header component. My feeling is that having another field (that sorta work the same, albeit you can do some scss to stick the header on top) would probably make it confusing for end users

@aarnphm I agree; I think this is mainly a naming issue. The header is currently located only in the main part. If we follow semantic elements: https://www.w3schools.com/html/html5_semantic_elements.asp, the header should ideally represent the navbar.

However, renaming navbar to header or header to navbar would be backward incompatible. So, we have two options:

1. Close the PR as a redundant feature.
2. Establish clearer names for each component (e.g., header -> note header, navbar -> page header).

[aarnphm]

The header component by default contains the page title, breadcrumbs, and metadata. It is not suitable for this purpose.

Currently header is empty, all of that component you mention are in beforeBody

[saberzero1]

The header component by default contains the page title, breadcrumbs, and metadata. It is not suitable for this purpose.

Currently header is empty, all of that component you mention are in beforeBody

Check.

Then I suppose we should move the <header> tag out of the center and for accuracy sake?

https://github.com/jackyzha0/quartz/blob/v4/quartz%2Fcomponents%2FrenderPage.tsx#L229-L240

I'm not sure if this would be considered a breaking change. I mean, it technically is, but it is not used by default.

Supposedly the <footer> should also be moved around as it technically supposed to be at the bottom of the page, not the center.

Also, seems we currently have our 'footer' inside the afterBody.

[vanadium23]

@aarnphm what do you think about @saberzero1 suggestion?

[aarnphm]

iirc breadcrumbs is using nav? I might be wrong here

[saberzero1]

iirc breadcrumbs is using nav? I might be wrong here

It appears you are correct. Breadcrumbs uses the <nav> tag.

https://github.com/jackyzha0/quartz/blob/v4/quartz%2Fcomponents%2FBreadcrumbs.tsx#L127-L133

Semantic tags wise:

• We use <footer>, but not for the footer, which is a div with the footer class.
• We don't use <header> by default. Instead we use a div with the header class.
• We use <nav> for the Breadcrumbs.
• We use <article> for the note content and every popover on the page.

Perhaps we should give the semantic elements a pass for accuracy at some point? For example, using the <aside> for sidebars. Using <main> for the center. Splitting parts of the note using <section>, using <nav> for the Explorer component instead of Breadcrumbs, <time> for the published date, etc.

https://www.w3schools.com/html/html5_semantic_elements.asp

[aarnphm]

yeah, we should a semantic pass.

(wrt

i think it is a preference, given that we already have a

)