Multiple Navigations in Sidebar (mul-behavior showed by gif)

[WhymustIhaveaname]

Environment

• Minimal Mistakes version: cloned from this repo's master 5 mins ago.
• Ruby gem or remote theme version: ruby 2.7.3p183 (2021-04-05 revision 6847ee089d) [x86_64-linux]
• Jekyll version: 4.2.0
• Operating system: Fedora 32

Steps to reproduce the behavior

When the mouse hovering on the sidebar, the sidebar's opacity will change. However, when there are multiple nav's in the sidebar, their opacity will all changed or not changed. This is not beautiful. What's more, when the screen is small ("Toggle menu" appears), all the "toggle menu" buttons could only open the first nav.

The codes are as follows.

home.md:

---
title: "Gauge Theory Workshop"
permalink: /home.html
layout: single
classes: wide
toc: false
sidebar:
    - nav: sitemap
    - nav: contact
---

* Dates: 24-26 Sept 2021
* Venue: Yau Mathematical Sciences Center, Tsinghua University
* Contact Information
    <ul>{% for child in site.data.navigation.contact[0].children %}
            <li><div>{{child.title}}</div><a href="mailto:{{ child.mail }}">{{ child.mail }}</a></li>
    {% endfor %} </ul>

navigation.yml:

sitemap:
    - title: "Sitemap"
      children:
          - title: "Home"
            url: /home.html
          - title: "Schedule"
            url: /schedule.html
          - title: "Speakers"
            url: /speakers.html
          - title: "Participants"
            url: /participants.html

contact:
    - title: "Contact Information"
      children:
          - title: "Person A"
            mail: "[email protected]"
          - title: "Person B"
            mail: "[email protected]"

This behavior is due to all the nav's are using the same CSS class or id. I cure the first issue by add nav.title to id="ac-toc" in _includes/nav_list.

<input id="ac-toc {{ nav.title }}" name="accordion-toc" type="checkbox" />
<label for="ac-toc {{ nav.title }}">{{ nav.title | site.data.ui-text[site.locale].menu_label | default: "Toggle Menu" }}</label>
<!--Original-->
<input id="ac-toc" name="accordion-toc" type="checkbox" />
<label for="ac-toc">{{ site.data.ui-text[site.locale].menu_label | default: "Toggle Menu" }}</label>

For the second issue, I disabled hover in the CSS class file and rewrite the behavior in _includes/nav_list. using inline js.

<nav class="nav__list" style="opacity:0.75" onMouseOver="this.style.opacity=1" onMouseOut="this.style.opacity=0.75">
<!--Original-->
<nav class="nav__list">

My repo with above changes is ymsc-strings/gauge-theory-workshop-sept-2021.

I did not submit a pull request because I think this is a mere ad-hoc solution and I believe you have better solutions. This repo is excellent! Thank you very much for your template anyhow.

[iBug]

This doesn't look like its intended usage.

[WhymustIhaveaname]

Thank you for so prompt reply! Indeed, I put together several Stackoverflows and finally made this Frankenstein.

From the source code _includes\sidebar.html and _includes\nav_list, it seems that the author wanted to support this usage and it works. What's more, I want to show the two nav's on every page (there are and will be many pages) so this is the most convenient way.

[iBug]

Multiple nav_lists, however, is probably not intended. The ability to add multiple sidebar items allows you to add text, images, and up to one nav_list. If you want multiple menus in the navigation bar, do it this way instead:

sitemap:
    - title: "Sitemap"
      children:
          - title: "Home"
            url: /home.html
          - title: "Schedule"
            url: /schedule.html
          - title: "Speakers"
            url: /speakers.html
          - title: "Participants"
            url: /participants.html
    - title: "Contact Information"
      children:
          - title: "Person A"
            mail: "[email protected]"
          - title: "Person B"
            mail: "[email protected]"

[mmistakes]

@iBug is correct. Unintended use having two nav lists on the same page as it looks really clunky with the two collapse toggles. The YAML above is how the theme expects a nav with multiple headings to be structured.

[WhymustIhaveaname]

Maybe seldom people want to put two sidebars, but my case is an example. As the two nav's are different things, I do not want them to be highlighted at the same time. In @iBug 's solution, the two nav's will still change the opacity simultaneously.

After all, your template is great and helps me a lot! And I think my workaround is good for my demend.