Toggle announce block

[Andygol]

Now, if announce.dismiss option is present in mkdocs.yml, it is possible to hide the announcement bar.

• Is it possible to somehow add an icon to the header, for example, next to the light/dark mode switch, which would show/hide the announcement bar?
• Would it then be possible to add the appropriate parameter to mkdocs.yml so that the announcement bar is hidden by default?

Or it can be a new element, for example an {% block info %}, which will be located either in the header or in the footer, which would behave as suggested.

[squidfunk]

Thanks for asking. That's definitely possible with some template customization and some extra JavaScript! I'm afraid I don't have the time to help you with your very specific customization, but maybe somebody from the community can chip in 🚀

[Andygol]

So far, I've managed to adapt the day/night theme switcher code to add an information icon to the header, specifically in overrides/partials/info.html.

overrides/partials/info.html

<form class="md-header__option" data-md-component="info">
  {% for option in config.theme.info %}
    <input
      class="md-option"
      {% if option.toggle %}
        aria-label="{{ option.toggle.name }}"
      {% else %}
        aria-hidden="true"
      {% endif %}
      type="radio"
      name="__info"
      id="__info_{{ loop.index }}"
    />
    {% if option.toggle %}
      <label
        class="md-header__button md-icon"
        title="{{ option.toggle.name }}"
        for="__info_{{ loop.index0 or loop.length }}"
        hidden
      >
        {% include ".icons/" ~ option.toggle.icon ~ ".svg" %}
      </label>
    {% endif %}
  {% endfor %}
</form>

Additionally, I had to create overrides/partials/header.html, which contains the appropriate block for placing the icon:

overrides/partials/header.html

…
+
+    <!-- Announcement toggle -->
+    {% if config.announce %}
+        {% include "partials/info.html" %}
+    {% endif %}
+
    <!-- Color palette toggle -->
    {% if config.theme.palette %}
      {% if not config.theme.palette is mapping %}
        {% include "partials/palette.html" %}
      {% endif %}
    {% endif %}
…

I added the following parameters to the mkdocs.yml file:

announce: >
  Here is the text of your Announcement

themes:
  info:
    # To show the announcement
    - toggle:
        icon: material/information-outline
        name: Show info
    # To hide the announcement
    - toggle:
        icon: material/information
        name: Hide info

Initially, everything appeared to be working correctly, but the icon to show/hide the Announcement bar wasn't displaying. Later, I discovered that the "info" component does not exist, and that's why both of its elements are hidden.

If you change data-md-component to "palette", you will see the ℹ️ icon next to 🌙 .

- <form class="md-header__option" data-md-component="info">
+ <form class="md-header__option" data-md-component="palette">

However, making this adjustment using data-md-component="palette", affects day/night toggling. There must be a data-md-component="info" component that will trigger the display of the Announcement bar.

🙏 I would appreciate any guidance and help from the community to assist me in progressing with this task, building the component, and getting it up and running. Please note that I have no prior experience with TypeScript and RxJS (https://squidfunk.github.io/mkdocs-material/customization/#theme-development).

[Andygol]

While reviewing the documentation, I came across the Cookie Consent section (https://squidfunk.github.io/mkdocs-material/setup/ensuring-data-privacy/#cookie-consent), which appears to be a partial solution for my requirements. However, I need the ability to display an information block without making any additional adjustments. Additionally, it is essential that there is a prominent UI element (icon) available in a highly visible location to toggle the information box.

[kamilkrzyskow]

Hmm, so from the OP I got that you want:

1. The announcement block to be hidden by default even though the user never dismissed the message. Which means also that after a page refresh it will go back to being hidden, right?
2. The option to open and close the announcement bar at will with a button located next to dark mode switch.

With that information, I guess, you can omit adding any cookies, as after opening the announcement block and refreshing the website it would close and return to the default behaviour.

Here is a working example given the points above:
custom-info.zip

I made some changes to the approach and the info.html partial (it now hides only the second button, also the labels are attached to inputs differently),
but if you only want the JavaScript code, as reference to toggle the announcement bar, here you go:

let announceBar = document.querySelector("[data-md-component=announce]");
let infoForm = document.querySelector("[data-md-component=info]");
let infoInputs = infoForm.querySelectorAll("input");

let infoToggleHandler = (el) => {
  for (input of infoInputs) {
    let isHidden = input.hidden === true;
    input.hidden = !isHidden;
    if (isHidden) {
      input.removeAttribute("aria-hidden");
    } else {
      input.setAttribute("aria-hidden", "true");
    }
    input.nextElementSibling.hidden = !isHidden;
  }
  announceBar.hidden = !announceBar.hidden;
};

if (announceBar) {
  announceBar.hidden = true;
  for (input of infoInputs) {
    input.addEventListener("click", infoToggleHandler);
  }
}

[Andygol]

Thank you very much for provided resolution 👏