Use the default AdminLTEv4 sidebar behavior

[rdwebdesign]

What does this PR aim to accomplish?

Use the default "slide" effect for the side bar.

The default behavior can be seen here (full screen):
https://adminlte.io/themes/v4/layout/unfixed-sidebar.html

And the same behavior applied to our custom "boxed layout":

Internal discussion:
https://team.pi-hole.net/pi-hole/pl/61nadgr6rig8in9hw94pebygzo

How does this PR accomplish the above?

Removing the .sidebar-mini class from the body.

---

By submitting this pull request, I confirm the following:

1. I have read and understood the contributors guide, as well as this entire template. I understand which branch to base my commits and Pull Requests against.
2. I have commented my proposed changes within the code and I have tested my changes.
3. I am willing to help maintain this change if there are issues with it later.
4. It is compatible with the EUPL 1.2 license
5. I have squashed any insignificant commits. (git rebase)
6. I have checked that another pull request for this purpose does not exist.
7. I have considered, and confirmed that this submission will be valuable to others.
8. I accept that this submission may not be used, and the pull request closed at the will of the maintainer.
9. I give this submission freely, and claim no ownership to its content.

---

• I have read the above and my PR is ready for review. Check this box to confirm

[yubiuser]

The new slide effect moves the whole sidebar in its entire length, including the upper part. On mobile, this "covers" the arrows which is a bit strange as they seem to just disappear.
Additionally, on collapsing there is some kind of overlay of the word "Pi-hole" in the upper corner. It seems to double interleaved with two font sizes and one being bold, something like "Pi-Pi-holehole"

[rdwebdesign]

The new slide effect moves the whole sidebar in its entire length, including the upper part. On mobile, this "covers" the arrows which is a bit strange as they seem to just disappear.

This is how the new sidebar was created.

Please check the official AdminLTE examples:

• https://adminlte.io/themes/v4/index.html
• https://adminlte.io/themes/v4/layout/unfixed-sidebar.html

The arrow is not really needed. Clicking anywhere outside the sidebar will close it.

EDIT:
We could add this, to move the arrow button to the right, when the mobile sidebar is expanded:

.sidebar-open .navbar-expand .navbar-nav {
  margin-left: var(--lte-sidebar-width);
}

This is hack. The button won't be really clickable (it will be behind the overlay element). The sidebar will actually close when the overlay area is clicked, but visually it will seem like the button was clicked.

Additionally, on collapsing there is some kind of overlay of the word "Pi-hole" in the upper corner. It seems to double interleaved with two font sizes and one being bold, something like "Pi-Pi-holehole"

Good catch.
It is visible even in video above, but I missed it.

Fixed by the most recent commit.

[yubiuser]

No need to start with hacks again. Let's try to stay close to the default behavior.