Refactor styling for site-nav, page-nav, overlaysource

[gerteck]

Please confirm that you have searched existing issues in the repo

Yes, I have searched the existing issues

Any related issues?

No response

Tell us about your environment

Win 11

MarkBind version

5.6.0

Describe the bug and the steps to reproduce it

Due to a difference in portal-vue rendering mechanism from vue 2 to vue 3, the styling applied to site-nav, page-nav, overlaysource etc. and components that may use portal-vue may have become overly complicated and less sensible.

Let's take the chance to refactor the styling logic.

Additionally, anyone who might want to take on this issue could possibly also do some investigation into using Vue 3's Teleport feature, since it is related. I think that handling this issue would be a good way to start to understand how portal-vue, and Teleport work.

Vue 3 has a new Teleport feature which replaces the portal-vue plugin in vue 2. Vue 3 is the current, latest major version of Vue. It contains new features that are not present in Vue 2, such as Teleport, Suspense, and multiple root elements per template

https://vuejs.org/guide/built-ins/teleport

This means that MarkBind could possibly do away with having portal-vue as a dependency in the vue components that use it. This could make the code base much easier to understand as it would be more unified.

The investigation of using Teleport can cumulate into a separate issue, handled by a separate PR.

---

I have investigated and identified the cause of regression for site-nav and page-nav whitespace.

This was due to a change in portal-vue rendering mechanism, specifically portal-target no longer rendering a root element

• A high-level explanation - Due to this expectation, the style attribute accounting for the --sticky-header-height was applied twice, causing this whitespace.

• Fix: applied a parent div to portal-target to 'absorb' this styling to maintain the expectation as per vue-portal v2. I have also done a rough check for other components that use portal-vue if such fix is required, but not needed as their styling is not affected as per a preliminary check.

• We can consider refactoring this in the future. However, note that the change to refactor is not too trivial and requires some significant understanding of current styling in main.css, with regards to #page-nav and #site-nav, and how it interacts with Overlay, OverlaySource, and portal-vue.

Originally posted by @gerteck in https://github.com/MarkBind/markbind/issues/2622#issuecomment-2744983002

Expected behavior

Simplify Styling Logic

Possibly use Teleport instead of portal-vue (handle in separate PR?)

Anything else?

No response