Add ability to toggle sidebar for mobile

This commit is contained in:
Peter Stockings
2023-07-25 19:43:19 +10:00
parent efc662360b
commit 8ff4359ace

View File

@@ -59,7 +59,8 @@
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center justify-start"> <div class="flex items-center justify-start">
<button id="toggleSidebarMobile" aria-expanded="true" aria-controls="sidebar" <button id="toggleSidebarMobile" aria-expanded="true" aria-controls="sidebar"
class="lg:hidden mr-2 text-gray-600 hover:text-gray-900 cursor-pointer p-2 hover:bg-gray-100 focus:bg-gray-100 focus:ring-2 focus:ring-gray-100 rounded"> class="lg:hidden mr-2 text-gray-600 hover:text-gray-900 cursor-pointer p-2 hover:bg-gray-100 focus:bg-gray-100 focus:ring-2 focus:ring-gray-100 rounded"
_="on click toggle .hidden on #sidebar then toggle .ml-64 on #main">
<svg id="toggleSidebarMobileHamburger" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" <svg id="toggleSidebarMobileHamburger" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" <path fill-rule="evenodd"
@@ -135,7 +136,7 @@
</div> </div>
</aside> </aside>
<div class="h-full w-full bg-gray-50 relative overflow-y-auto lg:ml-64"> <div class="h-full w-full bg-gray-50 relative overflow-y-auto lg:ml-64">
<main> <main id="main">
<div class="pt-6 px-4" id="container"> <div class="pt-6 px-4" id="container">
{% block content %} {% block content %}
{% endblock %} {% endblock %}