Move warning count to sidebar (when sidebar is visible).

[rdwebdesign]

By submitting this pull request, I confirm the following:

• I have read and understood the contributors guide, as well as this entire template.
• I have made only one major change in my proposed changes.
• I have commented my proposed changes within the code.
• I have tested my proposed changes.
• I am willing to help maintain this change if there are issues with it later.
• I give this submission freely and claim no ownership.
• It is compatible with the EUPL 1.2 license
• I have squashed any insignificant commits. (git rebase)
• I have Signed Off all commits. (git commit --signoff)

---

What does this PR aim to accomplish?:

If sidebar is visible, the warning count will be shown there, if it's hidden (mobile) or collapsed the count will be shown on the "hamburger" icon.

How does this PR accomplish the above?:

Add tags to the sidebar to hold the warning count.
Remove the triangle icon.
Change the javascript function to update the new sidebar items

What documentation changes (if any) are needed to support this PR?:

none

[PromoFaux]

Personally I like this a lot more than the triangle - but I would like the opinion(s) of other @pi-hole/web-maintainers, too

Some screenshots:

[yubiuser]

I like the change. Two questions:

1. The color of the icon on the sidebar seems brighter than on the hamburger menu. Is this really the case or only my color weakness?
2. On mobile, the icon on the hamburger is still there even when the menu is expanded. Is this on purpose?

[rdwebdesign]

The color of the icon on the sidebar seems brighter than on the hamburger menu. Is this really the case or only my color weakness?
The circle color is the same (set here).
The sidebar is darker. It looks brighter on the sidebar because the contrast is greater.

On mobile, the icon on the hamburger is still there even when the menu is expanded. Is this on purpose?
I didn't think it would be necessary to remove the icon.

[yubiuser]

The sidebar is darker. It looks brighter on the sidebar because the contrast is greater.

I knew I was tricked ;-)

I didn't think it would be necessary to remove the icon.

I think it would be more streamlined with the behavior on bigger screens if it would be removed. But this is just my taste.

---

I got two more points:

• When collapsing the Tools submenu the icon instantly appears behind Tools but also stays behind Pi-hole diagnosis during the animation. I think this looks a bit odd. Can you remove the icon behind Pi-hole diagnosis the moment the animation starts?
• On mobile the icon behind Tools is not removed when the submenu is expanded.

[rdwebdesign]

I got two more points:

* When collapsing the `Tools` submenu the icon instantly appears behind `Tools` but also stays behind `Pi-hole diagnosis` during the animation. I think this looks a bit odd. Can you remove the icon behind `Pi-hole diagnosis` the moment the animation starts?

* On mobile the icon behind `Tools` is not removed when the submenu is expanded.

Changed.

[pralor-bot]

This pull request has been mentioned on Pi-hole Userspace. There might be relevant details there:

https://discourse.pi-hole.net/t/pi-hole-ftl-v5-15-web-v5-12-and-core-v5-10-released/54987/1