fix: gandalf navbar placement and mobile behavior

[nschimme]

• Updated Gandalf logo desktop position to 32px for consistency with mume.org.
• Wrapped Gandalf logo in an anchor tag linking to https://mume.org/.
• Refactored mobile menu to use v-model for state management, eliminating double-toggle issues.
• Optimized z-index values (Gandalf: 120, Toggle: 110) to ensure mobile menu clickability.
• Refined scroll-hide logic to ensure navbar visibility at page top (scrollY < 10).

Summary by Sourcery

Adjust navbar scroll behavior and Gandalf logo placement/linking for better desktop and mobile usability.

New Features:

• Make the Gandalf logo act as a link to the mume.org homepage.

Bug Fixes:

• Ensure the navbar and Gandalf logo remain visible when the page is at the top of the scroll.
• Fix mobile menu double-toggle issues by binding the toggle checkbox directly to the menu state.

Enhancements:

• Align the desktop Gandalf logo position and z-index with design requirements for improved visibility and consistency.
• Increase the mobile menu toggle label z-index to keep the menu button clickable over other elements.

[sourcery-ai]

Reviewer's guide (collapsed on small PRs)

Reviewer's Guide

Adjusts Gandalf navbar positioning and behavior, fixes mobile menu state handling using v-model, and tweaks z-index and scroll logic to ensure correct visibility and clickability on both desktop and mobile.

Sequence diagram for mobile menu toggle with v-model

sequenceDiagram
    actor User
    participant Browser
    participant LayoutVue
    participant ToggleInput
    participant isMenuOpen
    participant NavMenu

    User->>Browser: Tap label.toggle
    Browser->>ToggleInput: Toggle checkbox checked state
    ToggleInput-->>LayoutVue: v-model update event
    LayoutVue->>isMenuOpen: Set isMenuOpen to checkbox.checked
    isMenuOpen-->>LayoutVue: New value (true/false)
    LayoutVue->>NavMenu: Re-render with isMenuOpen
    alt isMenuOpen is true
        NavMenu-->>User: Menu visible and clickable
    else isMenuOpen is false
        NavMenu-->>User: Menu hidden
    end

Loading

Flow diagram for updated navbar scroll-hide logic

flowchart TD
    A[Scroll event] --> B[Read window.scrollY as currentScrollPos]
    B --> C[Read window.innerWidth as width]
    C --> D[Get navbarRef and gandalfRef]
    D --> E{prevScrollpos > currentScrollPos
            OR currentScrollPos < 10
            OR width <= 650}
    E -- Yes --> F[Set navbar.style.top = 0]
    F --> G{width <= 650}
    G -- Yes --> H[Set gandalf.style.top = 10px]
    G -- No --> I[Set gandalf.style.top = 32px]
    E -- No --> J[Set navbar.style.top = -70px]
    J --> K[Set gandalf.style.top = -86px]
    H --> L[Set prevScrollpos = currentScrollPos]
    I --> L
    K --> L
    L --> M[Scroll handler ends]

Loading

File-Level Changes

Change	Details	Files
Refine scroll behavior and Gandalf/navbar positioning to ensure visibility at the top of the page and consistent desktop placement.	Update scroll handler to use the current vertical scroll position threshold (scrollY < 10) instead of previous scroll position to keep the navbar visible at the very top of the page. Adjust Gandalf logo fixed top position from 22px to 32px on desktop while preserving a 10px offset on small screens. Ensure corresponding top positioning is updated when the navbar hides and shows on scroll.	docs/.vitepress/theme/Layout.vue
Fix mobile menu toggle behavior by binding the checkbox directly to the menu state via v-model.	Remove the custom toggleMenu click handler and rely solely on the checkbox change to control isMenuOpen. Remove the @click listener from the label to avoid double-toggling when the label is clicked. Replace the manual :checked binding and change handler with v-model="isMenuOpen" on the checkbox input so the state is source-of-truth.	docs/.vitepress/theme/Layout.vue
Make the Gandalf logo act as a link and adjust z-index layering for proper mobile menu clickability.	Wrap the Gandalf logo image in an anchor element linking to https://mume.org/ instead of using a bare img tag. Move the #gandalf ID and positioning to the anchor so the whole clickable area is fixed and animated with scroll. Increase the z-index of the toggle label and Gandalf logo to 110 and 120 respectively to ensure they appear above other content and are clickable on mobile. Align CSS top value for #gandalf with the updated 32px desktop position.	docs/.vitepress/theme/Layout.vue docs/.vitepress/theme/mume.css

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[github-actions]

Build ready

The build for this PR has been completed successfully. A live preview will be available at: https://docs.mume.org/pr-8/

[sourcery-ai]

Hey - I've found 1 issue, and left some high level feedback:

• Now that the Gandalf image is a link, consider updating the alt text or adding an aria-label on the anchor so the destination (mume.org) is clear to screen reader users rather than just describing the character.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- Now that the Gandalf image is a link, consider updating the `alt` text or adding an `aria-label` on the anchor so the destination (mume.org) is clear to screen reader users rather than just describing the character.

## Individual Comments

### Comment 1
<location path="docs/.vitepress/theme/Layout.vue" line_range="111-113" />
<code_context>
     </nav>

-    <img id="gandalf" ref="gandalfRef" :src="gandalfImg" alt="Gandalf" width="45" height="45">
+    <a id="gandalf" ref="gandalfRef" href="https://mume.org/">
+      <img :src="gandalfImg" alt="Gandalf" width="45" height="45">
+    </a>

</code_context>
<issue_to_address>
**suggestion:** Improve accessibility semantics for the Gandalf link by clarifying the purpose of the navigation target.

Since this image is now a link, `alt="Gandalf"` doesn’t convey the link’s purpose to screen readers. Please use alt text that describes the destination (e.g. `alt="MUME homepage"`) or add an `aria-label` on the `<a>` to indicate where the link goes.

```suggestion
    <a id="gandalf" ref="gandalfRef" href="https://mume.org/">
      <img :src="gandalfImg" alt="MUME homepage" width="45" height="45">
    </a>
```
</issue_to_address>

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}