Sidebar Menu Order Misalignment with Navbar on Mobile View

[chitvs]

Description

The sidebar menu items on the mobile view do not match the order of the navbar items when the viewport size changes. Specifically, the order of menu items displayed in the sidebar (accessible via the hamburger menu) is different from the order of items in the navbar on desktop view.

Steps To Reproduce

1. Visit the website: chitvs.github.io.
2. Observe the order of the menu items in the desktop navbar.
3. Resize the browser window until the navbar collapses into a mobile menu (three-line "hamburger" button).
4. Click on the "hamburger" button to open the mobile menu.
5. Compare the order of the sidebar menu items with the order of the navbar items.

Expected Behavior

The order of the menu items in the sidebar (when accessed on mobile) should be consistent with the order of items in the desktop navbar.

Actual Behavior

The sidebar menu items displayed on mobile devices appear in a different sequence compared to the items in the desktop navbar.

Screenshots

Desktop:

Mobile/Restricted:

As you can see the order "byWeight" is not consistent with the first one.

Environment

• Hugo Version: v0.133.1
• Browser/OS: Chrome, Safari, Opera, Firefox, Linux, Windows (all where tested)
• Theme Version: latest version as per Hextra GitHub repository

Additional Context

• The config.yaml file is configured with a weight attribute for menu items to define their order. However, this order is not reflected in the mobile sidebar.
• The source code is available in the repository: GitHub Repository.

Here is the relevant section of the config.yaml file:

menu:
  main:
    - name: Blog
      pageRef: /blog
      weight: 1
    - name: Projects
      url: /projects
      weight: 2
    - name: Photography
      url: /photography
      weight: 3
    - name: Bookshelf
      url: /bookshelf
      weight: 4
    - name: Search
      weight: 5
      params:
        type: search
    - name: GitHub
      weight: 6
      url: "https://github.com/chitvs"
      params:
        icon: github
    - name: LinkedIn
      weight: 7
      url: "https://linkedin.com/in/alessandro-chitarrini"
      params:
        icon: linkedin

Requested Assistance

• Consistency in Ordering: Help with ensuring that the sidebar menu items on mobile devices appear in the same order as they do in the desktop navbar.
• Potential Solutions: Recommendations for any necessary adjustments or configurations to resolve this issue.

Thank you for your assistance with this matter.

Best regards,

Alessandro Chitarrini

[icannotfly]

i am seeing this as well. furthermore, the hamburger menu on mobile has added a page that I have specifically not included on the desktop menu

[chitvs]

i am seeing this as well. furthermore, the hamburger menu on mobile has added a page that I have specifically not included on the desktop menu

I hope someone can help us.

[chitvs]

I no longer use Hextra for unrelated reasons, but the issue still persists. It's a minor detail given how good the theme is overall. However, please note that I'm unable to reproduce the issue on my personal website anymore.