diff --git a/dist/account/index.html b/dist/account/index.html
index eb94a76..3b144dd 100644
--- a/dist/account/index.html
+++ b/dist/account/index.html
@@ -29,6 +29,7 @@
 </head>
 
 <body x-data="{
+            sidebarOpen: false,
             search: {
                 blank: false,
                 count: window.search.length,
@@ -61,8 +62,8 @@
         }">
     <a class="btn btn--primary skip-link" href="#content">Skip to content</a>
     <div class="l-main">
-        <div class="l-main__sidebar" data-item="sidebar">
-            <aside class="app-sidebar">
+        <div class="l-main__sidebar" :class="{ 'l-main__sidebar--open': sidebarOpen }">
+            <aside @keyup.escape.window="sidebarOpen = false" class="app-sidebar" x-trap.noscroll="sidebarOpen">
                 <div class="app-sidebar__header">
                     <a class="app-sidebar__logo" href="/" aria-label="Spruce CSS Root Admin Template">
                         <svg width='75' height='20' viewBox='0 0 120 32' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;' class='icon'>
@@ -138,7 +139,7 @@
                             </button>
                         </span>
                     </div>
-                    <button class="btn btn--outline-dark btn--sm btn--icon display--none:md" data-action="sidebar-close" aria-label="Close navigation" aria-expanded="false">
+                    <button :aria-expanded="sidebarOpen" @click="sidebarOpen = false" aria-label="Close navigation" class="btn btn--outline-dark btn--sm btn--icon display--none:md">
                         <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                             <line x1='18' y1='6' x2='6' y2='18'></line>
                             <line x1='6' y1='6' x2='18' y2='18'></line>
@@ -318,7 +319,7 @@ <h3 class="block-navigation__title">
                             </svg>
                         </a>
                         <div class="app-header__actions app-header__actions--secondary display--none:md">
-                            <button class="btn btn--outline-dark btn--sm btn--icon" data-action="sidebar-open" aria-label="Open navigation" aria-expanded="false">
+                            <button :aria-expanded="sidebarOpen" @click="sidebarOpen = ! sidebarOpen" aria-label="Open navigation" class="btn btn--outline-dark btn--sm btn--icon" data-action="sidebar-open">
                                 <svg aria-hidden='true' focusable='false' height='24' style='fill:currentColor;' version='1.1' viewBox='0 0 24 24' width='24' xml:space='preserve' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                                     <path d='M1.016,20.13c-0.288,-0 -0.529,-0.098 -0.724,-0.294c-0.195,-0.196 -0.292,-0.439 -0.292,-0.729c0,-0.289 0.097,-0.53 0.292,-0.722c0.195,-0.192 0.436,-0.288 0.724,-0.288l15.582,0c0.288,0 0.529,0.098 0.724,0.294c0.195,0.196 0.292,0.439 0.292,0.728c0,0.29 -0.097,0.531 -0.292,0.723c-0.195,0.192 -0.436,0.288 -0.724,0.288l-15.582,-0Zm0,-7.182c-0.288,0 -0.529,-0.098 -0.724,-0.293c-0.195,-0.196 -0.292,-0.439 -0.292,-0.729c0,-0.289 0.097,-0.53 0.292,-0.722c0.195,-0.192 0.436,-0.288 0.724,-0.288l11.517,0c0.288,0 0.529,0.098 0.724,0.294c0.195,0.196 0.292,0.439 0.292,0.728c0,0.29 -0.097,0.531 -0.292,0.723c-0.195,0.191 -0.436,0.287 -0.724,0.287l-11.517,0Zm0,-7.045c-0.288,-0 -0.529,-0.098 -0.724,-0.294c-0.195,-0.196 -0.292,-0.439 -0.292,-0.728c0,-0.29 0.097,-0.531 0.292,-0.723c0.195,-0.192 0.436,-0.288 0.724,-0.288l15.582,0c0.288,0 0.529,0.098 0.724,0.294c0.195,0.196 0.292,0.439 0.292,0.729c0,0.289 -0.097,0.53 -0.292,0.722c-0.195,0.192 -0.436,0.288 -0.724,0.288l-15.582,-0Zm18.461,6.063l4.234,4.234c0.203,0.204 0.299,0.441 0.288,0.712c-0.011,0.271 -0.118,0.508 -0.322,0.711c-0.203,0.203 -0.446,0.305 -0.728,0.305c-0.282,-0 -0.525,-0.102 -0.728,-0.305l-4.946,-4.946c-0.203,-0.203 -0.305,-0.44 -0.305,-0.711c0,-0.271 0.102,-0.508 0.305,-0.711l4.946,-4.946c0.203,-0.203 0.446,-0.305 0.728,-0.305c0.282,0 0.525,0.102 0.728,0.305c0.204,0.204 0.305,0.446 0.305,0.729c0,0.282 -0.101,0.525 -0.305,0.728l-4.2,4.2Z'></path>
                                 </svg>
@@ -698,8 +699,6 @@ <h3 class="app-card__title">Notifications</h3>
     <script defer src="/js/data-table.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
-    <script defer src="/js/theme-change-assets.js"></script>
-    <script defer src="/js/navigation.js"></script>
     <script defer src="/js/theme-switcher.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
     <script defer src="/js/charts.js" type="module"></script>
diff --git a/dist/account/notifications/index.html b/dist/account/notifications/index.html
index ea28e10..b9544b5 100644
--- a/dist/account/notifications/index.html
+++ b/dist/account/notifications/index.html
@@ -29,6 +29,7 @@
 </head>
 
 <body x-data="{
+            sidebarOpen: false,
             search: {
                 blank: false,
                 count: window.search.length,
@@ -61,8 +62,8 @@
         }">
     <a class="btn btn--primary skip-link" href="#content">Skip to content</a>
     <div class="l-main">
-        <div class="l-main__sidebar" data-item="sidebar">
-            <aside class="app-sidebar">
+        <div class="l-main__sidebar" :class="{ 'l-main__sidebar--open': sidebarOpen }">
+            <aside @keyup.escape.window="sidebarOpen = false" class="app-sidebar" x-trap.noscroll="sidebarOpen">
                 <div class="app-sidebar__header">
                     <a class="app-sidebar__logo" href="/" aria-label="Spruce CSS Root Admin Template">
                         <svg width='75' height='20' viewBox='0 0 120 32' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;' class='icon'>
@@ -138,7 +139,7 @@
                             </button>
                         </span>
                     </div>
-                    <button class="btn btn--outline-dark btn--sm btn--icon display--none:md" data-action="sidebar-close" aria-label="Close navigation" aria-expanded="false">
+                    <button :aria-expanded="sidebarOpen" @click="sidebarOpen = false" aria-label="Close navigation" class="btn btn--outline-dark btn--sm btn--icon display--none:md">
                         <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                             <line x1='18' y1='6' x2='6' y2='18'></line>
                             <line x1='6' y1='6' x2='18' y2='18'></line>
@@ -318,7 +319,7 @@ <h3 class="block-navigation__title">
                             </svg>
                         </a>
                         <div class="app-header__actions app-header__actions--secondary display--none:md">
-                            <button class="btn btn--outline-dark btn--sm btn--icon" data-action="sidebar-open" aria-label="Open navigation" aria-expanded="false">
+                            <button :aria-expanded="sidebarOpen" @click="sidebarOpen = ! sidebarOpen" aria-label="Open navigation" class="btn btn--outline-dark btn--sm btn--icon" data-action="sidebar-open">
                                 <svg aria-hidden='true' focusable='false' height='24' style='fill:currentColor;' version='1.1' viewBox='0 0 24 24' width='24' xml:space='preserve' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                                     <path d='M1.016,20.13c-0.288,-0 -0.529,-0.098 -0.724,-0.294c-0.195,-0.196 -0.292,-0.439 -0.292,-0.729c0,-0.289 0.097,-0.53 0.292,-0.722c0.195,-0.192 0.436,-0.288 0.724,-0.288l15.582,0c0.288,0 0.529,0.098 0.724,0.294c0.195,0.196 0.292,0.439 0.292,0.728c0,0.29 -0.097,0.531 -0.292,0.723c-0.195,0.192 -0.436,0.288 -0.724,0.288l-15.582,-0Zm0,-7.182c-0.288,0 -0.529,-0.098 -0.724,-0.293c-0.195,-0.196 -0.292,-0.439 -0.292,-0.729c0,-0.289 0.097,-0.53 0.292,-0.722c0.195,-0.192 0.436,-0.288 0.724,-0.288l11.517,0c0.288,0 0.529,0.098 0.724,0.294c0.195,0.196 0.292,0.439 0.292,0.728c0,0.29 -0.097,0.531 -0.292,0.723c-0.195,0.191 -0.436,0.287 -0.724,0.287l-11.517,0Zm0,-7.045c-0.288,-0 -0.529,-0.098 -0.724,-0.294c-0.195,-0.196 -0.292,-0.439 -0.292,-0.728c0,-0.29 0.097,-0.531 0.292,-0.723c0.195,-0.192 0.436,-0.288 0.724,-0.288l15.582,0c0.288,0 0.529,0.098 0.724,0.294c0.195,0.196 0.292,0.439 0.292,0.729c0,0.289 -0.097,0.53 -0.292,0.722c-0.195,0.192 -0.436,0.288 -0.724,0.288l-15.582,-0Zm18.461,6.063l4.234,4.234c0.203,0.204 0.299,0.441 0.288,0.712c-0.011,0.271 -0.118,0.508 -0.322,0.711c-0.203,0.203 -0.446,0.305 -0.728,0.305c-0.282,-0 -0.525,-0.102 -0.728,-0.305l-4.946,-4.946c-0.203,-0.203 -0.305,-0.44 -0.305,-0.711c0,-0.271 0.102,-0.508 0.305,-0.711l4.946,-4.946c0.203,-0.203 0.446,-0.305 0.728,-0.305c0.282,0 0.525,0.102 0.728,0.305c0.204,0.204 0.305,0.446 0.305,0.729c0,0.282 -0.101,0.525 -0.305,0.728l-4.2,4.2Z'></path>
                                 </svg>
@@ -694,8 +695,6 @@ <h3>Notifications</h3>
     <script defer src="/js/data-table.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
-    <script defer src="/js/theme-change-assets.js"></script>
-    <script defer src="/js/navigation.js"></script>
     <script defer src="/js/theme-switcher.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
     <script defer src="/js/charts.js" type="module"></script>
diff --git a/dist/account/password/index.html b/dist/account/password/index.html
index 20ceb0e..d6c1957 100644
--- a/dist/account/password/index.html
+++ b/dist/account/password/index.html
@@ -29,6 +29,7 @@
 </head>
 
 <body x-data="{
+            sidebarOpen: false,
             search: {
                 blank: false,
                 count: window.search.length,
@@ -61,8 +62,8 @@
         }">
     <a class="btn btn--primary skip-link" href="#content">Skip to content</a>
     <div class="l-main">
-        <div class="l-main__sidebar" data-item="sidebar">
-            <aside class="app-sidebar">
+        <div class="l-main__sidebar" :class="{ 'l-main__sidebar--open': sidebarOpen }">
+            <aside @keyup.escape.window="sidebarOpen = false" class="app-sidebar" x-trap.noscroll="sidebarOpen">
                 <div class="app-sidebar__header">
                     <a class="app-sidebar__logo" href="/" aria-label="Spruce CSS Root Admin Template">
                         <svg width='75' height='20' viewBox='0 0 120 32' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;' class='icon'>
@@ -138,7 +139,7 @@
                             </button>
                         </span>
                     </div>
-                    <button class="btn btn--outline-dark btn--sm btn--icon display--none:md" data-action="sidebar-close" aria-label="Close navigation" aria-expanded="false">
+                    <button :aria-expanded="sidebarOpen" @click="sidebarOpen = false" aria-label="Close navigation" class="btn btn--outline-dark btn--sm btn--icon display--none:md">
                         <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                             <line x1='18' y1='6' x2='6' y2='18'></line>
                             <line x1='6' y1='6' x2='18' y2='18'></line>
@@ -318,7 +319,7 @@ <h3 class="block-navigation__title">
                             </svg>
                         </a>
                         <div class="app-header__actions app-header__actions--secondary display--none:md">
-                            <button class="btn btn--outline-dark btn--sm btn--icon" data-action="sidebar-open" aria-label="Open navigation" aria-expanded="false">
+                            <button :aria-expanded="sidebarOpen" @click="sidebarOpen = ! sidebarOpen" aria-label="Open navigation" class="btn btn--outline-dark btn--sm btn--icon" data-action="sidebar-open">
                                 <svg aria-hidden='true' focusable='false' height='24' style='fill:currentColor;' version='1.1' viewBox='0 0 24 24' width='24' xml:space='preserve' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                                     <path d='M1.016,20.13c-0.288,-0 -0.529,-0.098 -0.724,-0.294c-0.195,-0.196 -0.292,-0.439 -0.292,-0.729c0,-0.289 0.097,-0.53 0.292,-0.722c0.195,-0.192 0.436,-0.288 0.724,-0.288l15.582,0c0.288,0 0.529,0.098 0.724,0.294c0.195,0.196 0.292,0.439 0.292,0.728c0,0.29 -0.097,0.531 -0.292,0.723c-0.195,0.192 -0.436,0.288 -0.724,0.288l-15.582,-0Zm0,-7.182c-0.288,0 -0.529,-0.098 -0.724,-0.293c-0.195,-0.196 -0.292,-0.439 -0.292,-0.729c0,-0.289 0.097,-0.53 0.292,-0.722c0.195,-0.192 0.436,-0.288 0.724,-0.288l11.517,0c0.288,0 0.529,0.098 0.724,0.294c0.195,0.196 0.292,0.439 0.292,0.728c0,0.29 -0.097,0.531 -0.292,0.723c-0.195,0.191 -0.436,0.287 -0.724,0.287l-11.517,0Zm0,-7.045c-0.288,-0 -0.529,-0.098 -0.724,-0.294c-0.195,-0.196 -0.292,-0.439 -0.292,-0.728c0,-0.29 0.097,-0.531 0.292,-0.723c0.195,-0.192 0.436,-0.288 0.724,-0.288l15.582,0c0.288,0 0.529,0.098 0.724,0.294c0.195,0.196 0.292,0.439 0.292,0.729c0,0.289 -0.097,0.53 -0.292,0.722c-0.195,0.192 -0.436,0.288 -0.724,0.288l-15.582,-0Zm18.461,6.063l4.234,4.234c0.203,0.204 0.299,0.441 0.288,0.712c-0.011,0.271 -0.118,0.508 -0.322,0.711c-0.203,0.203 -0.446,0.305 -0.728,0.305c-0.282,-0 -0.525,-0.102 -0.728,-0.305l-4.946,-4.946c-0.203,-0.203 -0.305,-0.44 -0.305,-0.711c0,-0.271 0.102,-0.508 0.305,-0.711l4.946,-4.946c0.203,-0.203 0.446,-0.305 0.728,-0.305c0.282,0 0.525,0.102 0.728,0.305c0.204,0.204 0.305,0.446 0.305,0.729c0,0.282 -0.101,0.525 -0.305,0.728l-4.2,4.2Z'></path>
                                 </svg>
@@ -648,8 +649,6 @@ <h3>Set up a new password</h3>
     <script defer src="/js/data-table.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
-    <script defer src="/js/theme-change-assets.js"></script>
-    <script defer src="/js/navigation.js"></script>
     <script defer src="/js/theme-switcher.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
     <script defer src="/js/charts.js" type="module"></script>
diff --git a/dist/account/profile/index.html b/dist/account/profile/index.html
index d28b905..100129b 100644
--- a/dist/account/profile/index.html
+++ b/dist/account/profile/index.html
@@ -29,6 +29,7 @@
 </head>
 
 <body x-data="{
+            sidebarOpen: false,
             search: {
                 blank: false,
                 count: window.search.length,
@@ -61,8 +62,8 @@
         }">
     <a class="btn btn--primary skip-link" href="#content">Skip to content</a>
     <div class="l-main">
-        <div class="l-main__sidebar" data-item="sidebar">
-            <aside class="app-sidebar">
+        <div class="l-main__sidebar" :class="{ 'l-main__sidebar--open': sidebarOpen }">
+            <aside @keyup.escape.window="sidebarOpen = false" class="app-sidebar" x-trap.noscroll="sidebarOpen">
                 <div class="app-sidebar__header">
                     <a class="app-sidebar__logo" href="/" aria-label="Spruce CSS Root Admin Template">
                         <svg width='75' height='20' viewBox='0 0 120 32' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;' class='icon'>
@@ -138,7 +139,7 @@
                             </button>
                         </span>
                     </div>
-                    <button class="btn btn--outline-dark btn--sm btn--icon display--none:md" data-action="sidebar-close" aria-label="Close navigation" aria-expanded="false">
+                    <button :aria-expanded="sidebarOpen" @click="sidebarOpen = false" aria-label="Close navigation" class="btn btn--outline-dark btn--sm btn--icon display--none:md">
                         <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                             <line x1='18' y1='6' x2='6' y2='18'></line>
                             <line x1='6' y1='6' x2='18' y2='18'></line>
@@ -318,7 +319,7 @@ <h3 class="block-navigation__title">
                             </svg>
                         </a>
                         <div class="app-header__actions app-header__actions--secondary display--none:md">
-                            <button class="btn btn--outline-dark btn--sm btn--icon" data-action="sidebar-open" aria-label="Open navigation" aria-expanded="false">
+                            <button :aria-expanded="sidebarOpen" @click="sidebarOpen = ! sidebarOpen" aria-label="Open navigation" class="btn btn--outline-dark btn--sm btn--icon" data-action="sidebar-open">
                                 <svg aria-hidden='true' focusable='false' height='24' style='fill:currentColor;' version='1.1' viewBox='0 0 24 24' width='24' xml:space='preserve' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                                     <path d='M1.016,20.13c-0.288,-0 -0.529,-0.098 -0.724,-0.294c-0.195,-0.196 -0.292,-0.439 -0.292,-0.729c0,-0.289 0.097,-0.53 0.292,-0.722c0.195,-0.192 0.436,-0.288 0.724,-0.288l15.582,0c0.288,0 0.529,0.098 0.724,0.294c0.195,0.196 0.292,0.439 0.292,0.728c0,0.29 -0.097,0.531 -0.292,0.723c-0.195,0.192 -0.436,0.288 -0.724,0.288l-15.582,-0Zm0,-7.182c-0.288,0 -0.529,-0.098 -0.724,-0.293c-0.195,-0.196 -0.292,-0.439 -0.292,-0.729c0,-0.289 0.097,-0.53 0.292,-0.722c0.195,-0.192 0.436,-0.288 0.724,-0.288l11.517,0c0.288,0 0.529,0.098 0.724,0.294c0.195,0.196 0.292,0.439 0.292,0.728c0,0.29 -0.097,0.531 -0.292,0.723c-0.195,0.191 -0.436,0.287 -0.724,0.287l-11.517,0Zm0,-7.045c-0.288,-0 -0.529,-0.098 -0.724,-0.294c-0.195,-0.196 -0.292,-0.439 -0.292,-0.728c0,-0.29 0.097,-0.531 0.292,-0.723c0.195,-0.192 0.436,-0.288 0.724,-0.288l15.582,0c0.288,0 0.529,0.098 0.724,0.294c0.195,0.196 0.292,0.439 0.292,0.729c0,0.289 -0.097,0.53 -0.292,0.722c-0.195,0.192 -0.436,0.288 -0.724,0.288l-15.582,-0Zm18.461,6.063l4.234,4.234c0.203,0.204 0.299,0.441 0.288,0.712c-0.011,0.271 -0.118,0.508 -0.322,0.711c-0.203,0.203 -0.446,0.305 -0.728,0.305c-0.282,-0 -0.525,-0.102 -0.728,-0.305l-4.946,-4.946c-0.203,-0.203 -0.305,-0.44 -0.305,-0.711c0,-0.271 0.102,-0.508 0.305,-0.711l4.946,-4.946c0.203,-0.203 0.446,-0.305 0.728,-0.305c0.282,0 0.525,0.102 0.728,0.305c0.204,0.204 0.305,0.446 0.305,0.729c0,0.282 -0.101,0.525 -0.305,0.728l-4.2,4.2Z'></path>
                                 </svg>
@@ -671,8 +672,6 @@ <h3>Address</h3>
     <script defer src="/js/data-table.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
-    <script defer src="/js/theme-change-assets.js"></script>
-    <script defer src="/js/navigation.js"></script>
     <script defer src="/js/theme-switcher.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
     <script defer src="/js/charts.js" type="module"></script>
diff --git a/dist/categories/index.html b/dist/categories/index.html
index 386008c..5e69894 100644
--- a/dist/categories/index.html
+++ b/dist/categories/index.html
@@ -29,6 +29,7 @@
 </head>
 
 <body x-data="{
+            sidebarOpen: false,
             search: {
                 blank: false,
                 count: window.search.length,
@@ -61,8 +62,8 @@
         }">
     <a class="btn btn--primary skip-link" href="#content">Skip to content</a>
     <div class="l-main">
-        <div class="l-main__sidebar" data-item="sidebar">
-            <aside class="app-sidebar">
+        <div class="l-main__sidebar" :class="{ 'l-main__sidebar--open': sidebarOpen }">
+            <aside @keyup.escape.window="sidebarOpen = false" class="app-sidebar" x-trap.noscroll="sidebarOpen">
                 <div class="app-sidebar__header">
                     <a class="app-sidebar__logo" href="/" aria-label="Spruce CSS Root Admin Template">
                         <svg width='75' height='20' viewBox='0 0 120 32' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;' class='icon'>
@@ -138,7 +139,7 @@
                             </button>
                         </span>
                     </div>
-                    <button class="btn btn--outline-dark btn--sm btn--icon display--none:md" data-action="sidebar-close" aria-label="Close navigation" aria-expanded="false">
+                    <button :aria-expanded="sidebarOpen" @click="sidebarOpen = false" aria-label="Close navigation" class="btn btn--outline-dark btn--sm btn--icon display--none:md">
                         <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                             <line x1='18' y1='6' x2='6' y2='18'></line>
                             <line x1='6' y1='6' x2='18' y2='18'></line>
@@ -318,7 +319,7 @@ <h3 class="block-navigation__title">
                             </svg>
                         </a>
                         <div class="app-header__actions app-header__actions--secondary display--none:md">
-                            <button class="btn btn--outline-dark btn--sm btn--icon" data-action="sidebar-open" aria-label="Open navigation" aria-expanded="false">
+                            <button :aria-expanded="sidebarOpen" @click="sidebarOpen = ! sidebarOpen" aria-label="Open navigation" class="btn btn--outline-dark btn--sm btn--icon" data-action="sidebar-open">
                                 <svg aria-hidden='true' focusable='false' height='24' style='fill:currentColor;' version='1.1' viewBox='0 0 24 24' width='24' xml:space='preserve' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                                     <path d='M1.016,20.13c-0.288,-0 -0.529,-0.098 -0.724,-0.294c-0.195,-0.196 -0.292,-0.439 -0.292,-0.729c0,-0.289 0.097,-0.53 0.292,-0.722c0.195,-0.192 0.436,-0.288 0.724,-0.288l15.582,0c0.288,0 0.529,0.098 0.724,0.294c0.195,0.196 0.292,0.439 0.292,0.728c0,0.29 -0.097,0.531 -0.292,0.723c-0.195,0.192 -0.436,0.288 -0.724,0.288l-15.582,-0Zm0,-7.182c-0.288,0 -0.529,-0.098 -0.724,-0.293c-0.195,-0.196 -0.292,-0.439 -0.292,-0.729c0,-0.289 0.097,-0.53 0.292,-0.722c0.195,-0.192 0.436,-0.288 0.724,-0.288l11.517,0c0.288,0 0.529,0.098 0.724,0.294c0.195,0.196 0.292,0.439 0.292,0.728c0,0.29 -0.097,0.531 -0.292,0.723c-0.195,0.191 -0.436,0.287 -0.724,0.287l-11.517,0Zm0,-7.045c-0.288,-0 -0.529,-0.098 -0.724,-0.294c-0.195,-0.196 -0.292,-0.439 -0.292,-0.728c0,-0.29 0.097,-0.531 0.292,-0.723c0.195,-0.192 0.436,-0.288 0.724,-0.288l15.582,0c0.288,0 0.529,0.098 0.724,0.294c0.195,0.196 0.292,0.439 0.292,0.729c0,0.289 -0.097,0.53 -0.292,0.722c-0.195,0.192 -0.436,0.288 -0.724,0.288l-15.582,-0Zm18.461,6.063l4.234,4.234c0.203,0.204 0.299,0.441 0.288,0.712c-0.011,0.271 -0.118,0.508 -0.322,0.711c-0.203,0.203 -0.446,0.305 -0.728,0.305c-0.282,-0 -0.525,-0.102 -0.728,-0.305l-4.946,-4.946c-0.203,-0.203 -0.305,-0.44 -0.305,-0.711c0,-0.271 0.102,-0.508 0.305,-0.711l4.946,-4.946c0.203,-0.203 0.446,-0.305 0.728,-0.305c0.282,0 0.525,0.102 0.728,0.305c0.204,0.204 0.305,0.446 0.305,0.729c0,0.282 -0.101,0.525 -0.305,0.728l-4.2,4.2Z'></path>
                                 </svg>
@@ -752,8 +753,6 @@ <h1 class="app-heading__title">Categories</h1>
     <script defer src="/js/data-table.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
-    <script defer src="/js/theme-change-assets.js"></script>
-    <script defer src="/js/navigation.js"></script>
     <script defer src="/js/theme-switcher.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
     <script defer src="/js/charts.js" type="module"></script>
diff --git a/dist/customers/index.html b/dist/customers/index.html
index 75b7e41..3aa6d18 100644
--- a/dist/customers/index.html
+++ b/dist/customers/index.html
@@ -29,6 +29,7 @@
 </head>
 
 <body x-data="{
+            sidebarOpen: false,
             search: {
                 blank: false,
                 count: window.search.length,
@@ -61,8 +62,8 @@
         }">
     <a class="btn btn--primary skip-link" href="#content">Skip to content</a>
     <div class="l-main">
-        <div class="l-main__sidebar" data-item="sidebar">
-            <aside class="app-sidebar">
+        <div class="l-main__sidebar" :class="{ 'l-main__sidebar--open': sidebarOpen }">
+            <aside @keyup.escape.window="sidebarOpen = false" class="app-sidebar" x-trap.noscroll="sidebarOpen">
                 <div class="app-sidebar__header">
                     <a class="app-sidebar__logo" href="/" aria-label="Spruce CSS Root Admin Template">
                         <svg width='75' height='20' viewBox='0 0 120 32' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;' class='icon'>
@@ -138,7 +139,7 @@
                             </button>
                         </span>
                     </div>
-                    <button class="btn btn--outline-dark btn--sm btn--icon display--none:md" data-action="sidebar-close" aria-label="Close navigation" aria-expanded="false">
+                    <button :aria-expanded="sidebarOpen" @click="sidebarOpen = false" aria-label="Close navigation" class="btn btn--outline-dark btn--sm btn--icon display--none:md">
                         <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                             <line x1='18' y1='6' x2='6' y2='18'></line>
                             <line x1='6' y1='6' x2='18' y2='18'></line>
@@ -318,7 +319,7 @@ <h3 class="block-navigation__title">
                             </svg>
                         </a>
                         <div class="app-header__actions app-header__actions--secondary display--none:md">
-                            <button class="btn btn--outline-dark btn--sm btn--icon" data-action="sidebar-open" aria-label="Open navigation" aria-expanded="false">
+                            <button :aria-expanded="sidebarOpen" @click="sidebarOpen = ! sidebarOpen" aria-label="Open navigation" class="btn btn--outline-dark btn--sm btn--icon" data-action="sidebar-open">
                                 <svg aria-hidden='true' focusable='false' height='24' style='fill:currentColor;' version='1.1' viewBox='0 0 24 24' width='24' xml:space='preserve' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                                     <path d='M1.016,20.13c-0.288,-0 -0.529,-0.098 -0.724,-0.294c-0.195,-0.196 -0.292,-0.439 -0.292,-0.729c0,-0.289 0.097,-0.53 0.292,-0.722c0.195,-0.192 0.436,-0.288 0.724,-0.288l15.582,0c0.288,0 0.529,0.098 0.724,0.294c0.195,0.196 0.292,0.439 0.292,0.728c0,0.29 -0.097,0.531 -0.292,0.723c-0.195,0.192 -0.436,0.288 -0.724,0.288l-15.582,-0Zm0,-7.182c-0.288,0 -0.529,-0.098 -0.724,-0.293c-0.195,-0.196 -0.292,-0.439 -0.292,-0.729c0,-0.289 0.097,-0.53 0.292,-0.722c0.195,-0.192 0.436,-0.288 0.724,-0.288l11.517,0c0.288,0 0.529,0.098 0.724,0.294c0.195,0.196 0.292,0.439 0.292,0.728c0,0.29 -0.097,0.531 -0.292,0.723c-0.195,0.191 -0.436,0.287 -0.724,0.287l-11.517,0Zm0,-7.045c-0.288,-0 -0.529,-0.098 -0.724,-0.294c-0.195,-0.196 -0.292,-0.439 -0.292,-0.728c0,-0.29 0.097,-0.531 0.292,-0.723c0.195,-0.192 0.436,-0.288 0.724,-0.288l15.582,0c0.288,0 0.529,0.098 0.724,0.294c0.195,0.196 0.292,0.439 0.292,0.729c0,0.289 -0.097,0.53 -0.292,0.722c-0.195,0.192 -0.436,0.288 -0.724,0.288l-15.582,-0Zm18.461,6.063l4.234,4.234c0.203,0.204 0.299,0.441 0.288,0.712c-0.011,0.271 -0.118,0.508 -0.322,0.711c-0.203,0.203 -0.446,0.305 -0.728,0.305c-0.282,-0 -0.525,-0.102 -0.728,-0.305l-4.946,-4.946c-0.203,-0.203 -0.305,-0.44 -0.305,-0.711c0,-0.271 0.102,-0.508 0.305,-0.711l4.946,-4.946c0.203,-0.203 0.446,-0.305 0.728,-0.305c0.282,0 0.525,0.102 0.728,0.305c0.204,0.204 0.305,0.446 0.305,0.729c0,0.282 -0.101,0.525 -0.305,0.728l-4.2,4.2Z'></path>
                                 </svg>
@@ -788,8 +789,6 @@ <h1 class="app-heading__title">Customers</h1>
     <script defer src="/js/data-table.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
-    <script defer src="/js/theme-change-assets.js"></script>
-    <script defer src="/js/navigation.js"></script>
     <script defer src="/js/theme-switcher.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
     <script defer src="/js/charts.js" type="module"></script>
diff --git a/dist/index.html b/dist/index.html
index 098964a..7ba279b 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -29,6 +29,7 @@
 </head>
 
 <body x-data="{
+            sidebarOpen: false,
             search: {
                 blank: false,
                 count: window.search.length,
@@ -61,8 +62,8 @@
         }">
     <a class="btn btn--primary skip-link" href="#content">Skip to content</a>
     <div class="l-main">
-        <div class="l-main__sidebar" data-item="sidebar">
-            <aside class="app-sidebar">
+        <div class="l-main__sidebar" :class="{ 'l-main__sidebar--open': sidebarOpen }">
+            <aside @keyup.escape.window="sidebarOpen = false" class="app-sidebar" x-trap.noscroll="sidebarOpen">
                 <div class="app-sidebar__header">
                     <a class="app-sidebar__logo" href="/" aria-label="Spruce CSS Root Admin Template">
                         <svg width='75' height='20' viewBox='0 0 120 32' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;' class='icon'>
@@ -138,7 +139,7 @@
                             </button>
                         </span>
                     </div>
-                    <button class="btn btn--outline-dark btn--sm btn--icon display--none:md" data-action="sidebar-close" aria-label="Close navigation" aria-expanded="false">
+                    <button :aria-expanded="sidebarOpen" @click="sidebarOpen = false" aria-label="Close navigation" class="btn btn--outline-dark btn--sm btn--icon display--none:md">
                         <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                             <line x1='18' y1='6' x2='6' y2='18'></line>
                             <line x1='6' y1='6' x2='18' y2='18'></line>
@@ -318,7 +319,7 @@ <h3 class="block-navigation__title">
                             </svg>
                         </a>
                         <div class="app-header__actions app-header__actions--secondary display--none:md">
-                            <button class="btn btn--outline-dark btn--sm btn--icon" data-action="sidebar-open" aria-label="Open navigation" aria-expanded="false">
+                            <button :aria-expanded="sidebarOpen" @click="sidebarOpen = ! sidebarOpen" aria-label="Open navigation" class="btn btn--outline-dark btn--sm btn--icon" data-action="sidebar-open">
                                 <svg aria-hidden='true' focusable='false' height='24' style='fill:currentColor;' version='1.1' viewBox='0 0 24 24' width='24' xml:space='preserve' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                                     <path d='M1.016,20.13c-0.288,-0 -0.529,-0.098 -0.724,-0.294c-0.195,-0.196 -0.292,-0.439 -0.292,-0.729c0,-0.289 0.097,-0.53 0.292,-0.722c0.195,-0.192 0.436,-0.288 0.724,-0.288l15.582,0c0.288,0 0.529,0.098 0.724,0.294c0.195,0.196 0.292,0.439 0.292,0.728c0,0.29 -0.097,0.531 -0.292,0.723c-0.195,0.192 -0.436,0.288 -0.724,0.288l-15.582,-0Zm0,-7.182c-0.288,0 -0.529,-0.098 -0.724,-0.293c-0.195,-0.196 -0.292,-0.439 -0.292,-0.729c0,-0.289 0.097,-0.53 0.292,-0.722c0.195,-0.192 0.436,-0.288 0.724,-0.288l11.517,0c0.288,0 0.529,0.098 0.724,0.294c0.195,0.196 0.292,0.439 0.292,0.728c0,0.29 -0.097,0.531 -0.292,0.723c-0.195,0.191 -0.436,0.287 -0.724,0.287l-11.517,0Zm0,-7.045c-0.288,-0 -0.529,-0.098 -0.724,-0.294c-0.195,-0.196 -0.292,-0.439 -0.292,-0.728c0,-0.29 0.097,-0.531 0.292,-0.723c0.195,-0.192 0.436,-0.288 0.724,-0.288l15.582,0c0.288,0 0.529,0.098 0.724,0.294c0.195,0.196 0.292,0.439 0.292,0.729c0,0.289 -0.097,0.53 -0.292,0.722c-0.195,0.192 -0.436,0.288 -0.724,0.288l-15.582,-0Zm18.461,6.063l4.234,4.234c0.203,0.204 0.299,0.441 0.288,0.712c-0.011,0.271 -0.118,0.508 -0.322,0.711c-0.203,0.203 -0.446,0.305 -0.728,0.305c-0.282,-0 -0.525,-0.102 -0.728,-0.305l-4.946,-4.946c-0.203,-0.203 -0.305,-0.44 -0.305,-0.711c0,-0.271 0.102,-0.508 0.305,-0.711l4.946,-4.946c0.203,-0.203 0.446,-0.305 0.728,-0.305c0.282,0 0.525,0.102 0.728,0.305c0.204,0.204 0.305,0.446 0.305,0.729c0,0.282 -0.101,0.525 -0.305,0.728l-4.2,4.2Z'></path>
                                 </svg>
@@ -680,8 +681,6 @@ <h2 class="app-card__title">Active Users</h2>
     <script defer src="/js/data-table.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
-    <script defer src="/js/theme-change-assets.js"></script>
-    <script defer src="/js/navigation.js"></script>
     <script defer src="/js/theme-switcher.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
     <script defer src="/js/charts.js" type="module"></script>
diff --git a/dist/js/navigation.js b/dist/js/navigation.js
deleted file mode 100644
index 140b7ae..0000000
--- a/dist/js/navigation.js
+++ /dev/null
@@ -1,40 +0,0 @@
-(() => {
-  const buttonOpen = document.querySelector('[data-action="sidebar-open"]');
-  const buttonClose = document.querySelector('[data-action="sidebar-close"]');
-  const sidebar = document.querySelector('[data-item="sidebar"]');
-  const body = document.querySelector('[data-item="body"]');
-
-  if (!sidebar || typeof buttonOpen === 'undefined') return;
-
-  function closeNavigation() {
-    body.removeAttribute('inert');
-    sidebar.classList.remove('l-main__sidebar--open');
-    buttonOpen.setAttribute('aria-expanded', 'false');
-    buttonOpen.focus();
-  }
-
-  function openNavigation() {
-    buttonOpen.setAttribute('aria-expanded', 'true');
-    body.setAttribute('inert', '');
-    sidebar.classList.add('l-main__sidebar--open');
-    sidebar.querySelector('a').focus();
-  }
-
-  function handleKeyDown(e) {
-    if (buttonOpen.getAttribute('aria-expanded') === 'false') return;
-
-    if (e.code === 'Escape') {
-      closeNavigation();
-    }
-  }
-
-  buttonOpen.addEventListener('click', () => {
-    openNavigation();
-  });
-
-  buttonClose.addEventListener('click', () => {
-    closeNavigation();
-  });
-
-  window.addEventListener('keydown', handleKeyDown);
-})();
diff --git a/dist/js/theme-change-assets.js b/dist/js/theme-change-assets.js
deleted file mode 100644
index f4c0301..0000000
--- a/dist/js/theme-change-assets.js
+++ /dev/null
@@ -1,21 +0,0 @@
-(() => {
-  const htmlElement = document.querySelector('html');
-  const systemMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-
-  function changeAssets(theme) {
-    if (!theme) return;
-    const themeAssets = document.querySelectorAll('img[data-theme-mode]');
-
-    themeAssets.forEach((el) => {
-      el.src = el.getAttribute(`data-${theme}-asset`);
-    });
-  }
-
-  changeAssets(htmlElement.getAttribute('data-theme-mode') === 'system' ? systemMode : htmlElement.getAttribute('data-theme-mode'));
-
-  const observer = new MutationObserver(() => {
-    changeAssets(htmlElement.getAttribute('data-theme-mode') === 'system' ? systemMode : htmlElement.getAttribute('data-theme-mode'));
-  });
-
-  observer.observe(htmlElement, { attributes: true });
-})();
diff --git a/dist/orders/index.html b/dist/orders/index.html
index 86517d3..403a852 100644
--- a/dist/orders/index.html
+++ b/dist/orders/index.html
@@ -29,6 +29,7 @@
 </head>
 
 <body x-data="{
+            sidebarOpen: false,
             search: {
                 blank: false,
                 count: window.search.length,
@@ -61,8 +62,8 @@
         }">
     <a class="btn btn--primary skip-link" href="#content">Skip to content</a>
     <div class="l-main">
-        <div class="l-main__sidebar" data-item="sidebar">
-            <aside class="app-sidebar">
+        <div class="l-main__sidebar" :class="{ 'l-main__sidebar--open': sidebarOpen }">
+            <aside @keyup.escape.window="sidebarOpen = false" class="app-sidebar" x-trap.noscroll="sidebarOpen">
                 <div class="app-sidebar__header">
                     <a class="app-sidebar__logo" href="/" aria-label="Spruce CSS Root Admin Template">
                         <svg width='75' height='20' viewBox='0 0 120 32' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;' class='icon'>
@@ -138,7 +139,7 @@
                             </button>
                         </span>
                     </div>
-                    <button class="btn btn--outline-dark btn--sm btn--icon display--none:md" data-action="sidebar-close" aria-label="Close navigation" aria-expanded="false">
+                    <button :aria-expanded="sidebarOpen" @click="sidebarOpen = false" aria-label="Close navigation" class="btn btn--outline-dark btn--sm btn--icon display--none:md">
                         <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                             <line x1='18' y1='6' x2='6' y2='18'></line>
                             <line x1='6' y1='6' x2='18' y2='18'></line>
@@ -318,7 +319,7 @@ <h3 class="block-navigation__title">
                             </svg>
                         </a>
                         <div class="app-header__actions app-header__actions--secondary display--none:md">
-                            <button class="btn btn--outline-dark btn--sm btn--icon" data-action="sidebar-open" aria-label="Open navigation" aria-expanded="false">
+                            <button :aria-expanded="sidebarOpen" @click="sidebarOpen = ! sidebarOpen" aria-label="Open navigation" class="btn btn--outline-dark btn--sm btn--icon" data-action="sidebar-open">
                                 <svg aria-hidden='true' focusable='false' height='24' style='fill:currentColor;' version='1.1' viewBox='0 0 24 24' width='24' xml:space='preserve' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                                     <path d='M1.016,20.13c-0.288,-0 -0.529,-0.098 -0.724,-0.294c-0.195,-0.196 -0.292,-0.439 -0.292,-0.729c0,-0.289 0.097,-0.53 0.292,-0.722c0.195,-0.192 0.436,-0.288 0.724,-0.288l15.582,0c0.288,0 0.529,0.098 0.724,0.294c0.195,0.196 0.292,0.439 0.292,0.728c0,0.29 -0.097,0.531 -0.292,0.723c-0.195,0.192 -0.436,0.288 -0.724,0.288l-15.582,-0Zm0,-7.182c-0.288,0 -0.529,-0.098 -0.724,-0.293c-0.195,-0.196 -0.292,-0.439 -0.292,-0.729c0,-0.289 0.097,-0.53 0.292,-0.722c0.195,-0.192 0.436,-0.288 0.724,-0.288l11.517,0c0.288,0 0.529,0.098 0.724,0.294c0.195,0.196 0.292,0.439 0.292,0.728c0,0.29 -0.097,0.531 -0.292,0.723c-0.195,0.191 -0.436,0.287 -0.724,0.287l-11.517,0Zm0,-7.045c-0.288,-0 -0.529,-0.098 -0.724,-0.294c-0.195,-0.196 -0.292,-0.439 -0.292,-0.728c0,-0.29 0.097,-0.531 0.292,-0.723c0.195,-0.192 0.436,-0.288 0.724,-0.288l15.582,0c0.288,0 0.529,0.098 0.724,0.294c0.195,0.196 0.292,0.439 0.292,0.729c0,0.289 -0.097,0.53 -0.292,0.722c-0.195,0.192 -0.436,0.288 -0.724,0.288l-15.582,-0Zm18.461,6.063l4.234,4.234c0.203,0.204 0.299,0.441 0.288,0.712c-0.011,0.271 -0.118,0.508 -0.322,0.711c-0.203,0.203 -0.446,0.305 -0.728,0.305c-0.282,-0 -0.525,-0.102 -0.728,-0.305l-4.946,-4.946c-0.203,-0.203 -0.305,-0.44 -0.305,-0.711c0,-0.271 0.102,-0.508 0.305,-0.711l4.946,-4.946c0.203,-0.203 0.446,-0.305 0.728,-0.305c0.282,0 0.525,0.102 0.728,0.305c0.204,0.204 0.305,0.446 0.305,0.729c0,0.282 -0.101,0.525 -0.305,0.728l-4.2,4.2Z'></path>
                                 </svg>
@@ -741,8 +742,6 @@ <h1 class="app-heading__title">Orders</h1>
     <script defer src="/js/data-table.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
-    <script defer src="/js/theme-change-assets.js"></script>
-    <script defer src="/js/navigation.js"></script>
     <script defer src="/js/theme-switcher.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
     <script defer src="/js/charts.js" type="module"></script>
diff --git a/dist/password-reset/index.html b/dist/password-reset/index.html
index f3fa342..ba419c9 100644
--- a/dist/password-reset/index.html
+++ b/dist/password-reset/index.html
@@ -29,6 +29,7 @@
 </head>
 
 <body x-data="{
+            sidebarOpen: false,
             search: {
                 blank: false,
                 count: window.search.length,
@@ -157,8 +158,6 @@ <h1 class="auth-form__title">Password
     <script defer src="/js/data-table.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
-    <script defer src="/js/theme-change-assets.js"></script>
-    <script defer src="/js/navigation.js"></script>
     <script defer src="/js/theme-switcher.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
     <script defer src="/js/charts.js" type="module"></script>
diff --git a/dist/product/edit/index.html b/dist/product/edit/index.html
index c9e2918..92b844e 100644
--- a/dist/product/edit/index.html
+++ b/dist/product/edit/index.html
@@ -29,6 +29,7 @@
 </head>
 
 <body x-data="{
+            sidebarOpen: false,
             search: {
                 blank: false,
                 count: window.search.length,
@@ -61,8 +62,8 @@
         }">
     <a class="btn btn--primary skip-link" href="#content">Skip to content</a>
     <div class="l-main">
-        <div class="l-main__sidebar" data-item="sidebar">
-            <aside class="app-sidebar">
+        <div class="l-main__sidebar" :class="{ 'l-main__sidebar--open': sidebarOpen }">
+            <aside @keyup.escape.window="sidebarOpen = false" class="app-sidebar" x-trap.noscroll="sidebarOpen">
                 <div class="app-sidebar__header">
                     <a class="app-sidebar__logo" href="/" aria-label="Spruce CSS Root Admin Template">
                         <svg width='75' height='20' viewBox='0 0 120 32' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;' class='icon'>
@@ -138,7 +139,7 @@
                             </button>
                         </span>
                     </div>
-                    <button class="btn btn--outline-dark btn--sm btn--icon display--none:md" data-action="sidebar-close" aria-label="Close navigation" aria-expanded="false">
+                    <button :aria-expanded="sidebarOpen" @click="sidebarOpen = false" aria-label="Close navigation" class="btn btn--outline-dark btn--sm btn--icon display--none:md">
                         <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                             <line x1='18' y1='6' x2='6' y2='18'></line>
                             <line x1='6' y1='6' x2='18' y2='18'></line>
@@ -318,7 +319,7 @@ <h3 class="block-navigation__title">
                             </svg>
                         </a>
                         <div class="app-header__actions app-header__actions--secondary display--none:md">
-                            <button class="btn btn--outline-dark btn--sm btn--icon" data-action="sidebar-open" aria-label="Open navigation" aria-expanded="false">
+                            <button :aria-expanded="sidebarOpen" @click="sidebarOpen = ! sidebarOpen" aria-label="Open navigation" class="btn btn--outline-dark btn--sm btn--icon" data-action="sidebar-open">
                                 <svg aria-hidden='true' focusable='false' height='24' style='fill:currentColor;' version='1.1' viewBox='0 0 24 24' width='24' xml:space='preserve' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                                     <path d='M1.016,20.13c-0.288,-0 -0.529,-0.098 -0.724,-0.294c-0.195,-0.196 -0.292,-0.439 -0.292,-0.729c0,-0.289 0.097,-0.53 0.292,-0.722c0.195,-0.192 0.436,-0.288 0.724,-0.288l15.582,0c0.288,0 0.529,0.098 0.724,0.294c0.195,0.196 0.292,0.439 0.292,0.728c0,0.29 -0.097,0.531 -0.292,0.723c-0.195,0.192 -0.436,0.288 -0.724,0.288l-15.582,-0Zm0,-7.182c-0.288,0 -0.529,-0.098 -0.724,-0.293c-0.195,-0.196 -0.292,-0.439 -0.292,-0.729c0,-0.289 0.097,-0.53 0.292,-0.722c0.195,-0.192 0.436,-0.288 0.724,-0.288l11.517,0c0.288,0 0.529,0.098 0.724,0.294c0.195,0.196 0.292,0.439 0.292,0.728c0,0.29 -0.097,0.531 -0.292,0.723c-0.195,0.191 -0.436,0.287 -0.724,0.287l-11.517,0Zm0,-7.045c-0.288,-0 -0.529,-0.098 -0.724,-0.294c-0.195,-0.196 -0.292,-0.439 -0.292,-0.728c0,-0.29 0.097,-0.531 0.292,-0.723c0.195,-0.192 0.436,-0.288 0.724,-0.288l15.582,0c0.288,0 0.529,0.098 0.724,0.294c0.195,0.196 0.292,0.439 0.292,0.729c0,0.289 -0.097,0.53 -0.292,0.722c-0.195,0.192 -0.436,0.288 -0.724,0.288l-15.582,-0Zm18.461,6.063l4.234,4.234c0.203,0.204 0.299,0.441 0.288,0.712c-0.011,0.271 -0.118,0.508 -0.322,0.711c-0.203,0.203 -0.446,0.305 -0.728,0.305c-0.282,-0 -0.525,-0.102 -0.728,-0.305l-4.946,-4.946c-0.203,-0.203 -0.305,-0.44 -0.305,-0.711c0,-0.271 0.102,-0.508 0.305,-0.711l4.946,-4.946c0.203,-0.203 0.446,-0.305 0.728,-0.305c0.282,0 0.525,0.102 0.728,0.305c0.204,0.204 0.305,0.446 0.305,0.729c0,0.282 -0.101,0.525 -0.305,0.728l-4.2,4.2Z'></path>
                                 </svg>
@@ -1598,8 +1599,6 @@ <h2 class="app-card__title">Settings</h2>
     <script defer src="/js/data-table.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
-    <script defer src="/js/theme-change-assets.js"></script>
-    <script defer src="/js/navigation.js"></script>
     <script defer src="/js/theme-switcher.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
     <script defer src="/js/charts.js" type="module"></script>
diff --git a/dist/products/index.html b/dist/products/index.html
index 0d3c459..4f84119 100644
--- a/dist/products/index.html
+++ b/dist/products/index.html
@@ -29,6 +29,7 @@
 </head>
 
 <body x-data="{
+            sidebarOpen: false,
             search: {
                 blank: false,
                 count: window.search.length,
@@ -61,8 +62,8 @@
         }">
     <a class="btn btn--primary skip-link" href="#content">Skip to content</a>
     <div class="l-main">
-        <div class="l-main__sidebar" data-item="sidebar">
-            <aside class="app-sidebar">
+        <div class="l-main__sidebar" :class="{ 'l-main__sidebar--open': sidebarOpen }">
+            <aside @keyup.escape.window="sidebarOpen = false" class="app-sidebar" x-trap.noscroll="sidebarOpen">
                 <div class="app-sidebar__header">
                     <a class="app-sidebar__logo" href="/" aria-label="Spruce CSS Root Admin Template">
                         <svg width='75' height='20' viewBox='0 0 120 32' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;' class='icon'>
@@ -138,7 +139,7 @@
                             </button>
                         </span>
                     </div>
-                    <button class="btn btn--outline-dark btn--sm btn--icon display--none:md" data-action="sidebar-close" aria-label="Close navigation" aria-expanded="false">
+                    <button :aria-expanded="sidebarOpen" @click="sidebarOpen = false" aria-label="Close navigation" class="btn btn--outline-dark btn--sm btn--icon display--none:md">
                         <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                             <line x1='18' y1='6' x2='6' y2='18'></line>
                             <line x1='6' y1='6' x2='18' y2='18'></line>
@@ -318,7 +319,7 @@ <h3 class="block-navigation__title">
                             </svg>
                         </a>
                         <div class="app-header__actions app-header__actions--secondary display--none:md">
-                            <button class="btn btn--outline-dark btn--sm btn--icon" data-action="sidebar-open" aria-label="Open navigation" aria-expanded="false">
+                            <button :aria-expanded="sidebarOpen" @click="sidebarOpen = ! sidebarOpen" aria-label="Open navigation" class="btn btn--outline-dark btn--sm btn--icon" data-action="sidebar-open">
                                 <svg aria-hidden='true' focusable='false' height='24' style='fill:currentColor;' version='1.1' viewBox='0 0 24 24' width='24' xml:space='preserve' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                                     <path d='M1.016,20.13c-0.288,-0 -0.529,-0.098 -0.724,-0.294c-0.195,-0.196 -0.292,-0.439 -0.292,-0.729c0,-0.289 0.097,-0.53 0.292,-0.722c0.195,-0.192 0.436,-0.288 0.724,-0.288l15.582,0c0.288,0 0.529,0.098 0.724,0.294c0.195,0.196 0.292,0.439 0.292,0.728c0,0.29 -0.097,0.531 -0.292,0.723c-0.195,0.192 -0.436,0.288 -0.724,0.288l-15.582,-0Zm0,-7.182c-0.288,0 -0.529,-0.098 -0.724,-0.293c-0.195,-0.196 -0.292,-0.439 -0.292,-0.729c0,-0.289 0.097,-0.53 0.292,-0.722c0.195,-0.192 0.436,-0.288 0.724,-0.288l11.517,0c0.288,0 0.529,0.098 0.724,0.294c0.195,0.196 0.292,0.439 0.292,0.728c0,0.29 -0.097,0.531 -0.292,0.723c-0.195,0.191 -0.436,0.287 -0.724,0.287l-11.517,0Zm0,-7.045c-0.288,-0 -0.529,-0.098 -0.724,-0.294c-0.195,-0.196 -0.292,-0.439 -0.292,-0.728c0,-0.29 0.097,-0.531 0.292,-0.723c0.195,-0.192 0.436,-0.288 0.724,-0.288l15.582,0c0.288,0 0.529,0.098 0.724,0.294c0.195,0.196 0.292,0.439 0.292,0.729c0,0.289 -0.097,0.53 -0.292,0.722c-0.195,0.192 -0.436,0.288 -0.724,0.288l-15.582,-0Zm18.461,6.063l4.234,4.234c0.203,0.204 0.299,0.441 0.288,0.712c-0.011,0.271 -0.118,0.508 -0.322,0.711c-0.203,0.203 -0.446,0.305 -0.728,0.305c-0.282,-0 -0.525,-0.102 -0.728,-0.305l-4.946,-4.946c-0.203,-0.203 -0.305,-0.44 -0.305,-0.711c0,-0.271 0.102,-0.508 0.305,-0.711l4.946,-4.946c0.203,-0.203 0.446,-0.305 0.728,-0.305c0.282,0 0.525,0.102 0.728,0.305c0.204,0.204 0.305,0.446 0.305,0.729c0,0.282 -0.101,0.525 -0.305,0.728l-4.2,4.2Z'></path>
                                 </svg>
@@ -840,8 +841,6 @@ <h2 class="app-widget__title">Best Selling</h2>
     <script defer src="/js/data-table.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
-    <script defer src="/js/theme-change-assets.js"></script>
-    <script defer src="/js/navigation.js"></script>
     <script defer src="/js/theme-switcher.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
     <script defer src="/js/charts.js" type="module"></script>
diff --git a/dist/settings/index.html b/dist/settings/index.html
index acb479c..cffd774 100644
--- a/dist/settings/index.html
+++ b/dist/settings/index.html
@@ -29,6 +29,7 @@
 </head>
 
 <body x-data="{
+            sidebarOpen: false,
             search: {
                 blank: false,
                 count: window.search.length,
@@ -61,8 +62,8 @@
         }">
     <a class="btn btn--primary skip-link" href="#content">Skip to content</a>
     <div class="l-main">
-        <div class="l-main__sidebar" data-item="sidebar">
-            <aside class="app-sidebar">
+        <div class="l-main__sidebar" :class="{ 'l-main__sidebar--open': sidebarOpen }">
+            <aside @keyup.escape.window="sidebarOpen = false" class="app-sidebar" x-trap.noscroll="sidebarOpen">
                 <div class="app-sidebar__header">
                     <a class="app-sidebar__logo" href="/" aria-label="Spruce CSS Root Admin Template">
                         <svg width='75' height='20' viewBox='0 0 120 32' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;' class='icon'>
@@ -138,7 +139,7 @@
                             </button>
                         </span>
                     </div>
-                    <button class="btn btn--outline-dark btn--sm btn--icon display--none:md" data-action="sidebar-close" aria-label="Close navigation" aria-expanded="false">
+                    <button :aria-expanded="sidebarOpen" @click="sidebarOpen = false" aria-label="Close navigation" class="btn btn--outline-dark btn--sm btn--icon display--none:md">
                         <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                             <line x1='18' y1='6' x2='6' y2='18'></line>
                             <line x1='6' y1='6' x2='18' y2='18'></line>
@@ -318,7 +319,7 @@ <h3 class="block-navigation__title">
                             </svg>
                         </a>
                         <div class="app-header__actions app-header__actions--secondary display--none:md">
-                            <button class="btn btn--outline-dark btn--sm btn--icon" data-action="sidebar-open" aria-label="Open navigation" aria-expanded="false">
+                            <button :aria-expanded="sidebarOpen" @click="sidebarOpen = ! sidebarOpen" aria-label="Open navigation" class="btn btn--outline-dark btn--sm btn--icon" data-action="sidebar-open">
                                 <svg aria-hidden='true' focusable='false' height='24' style='fill:currentColor;' version='1.1' viewBox='0 0 24 24' width='24' xml:space='preserve' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                                     <path d='M1.016,20.13c-0.288,-0 -0.529,-0.098 -0.724,-0.294c-0.195,-0.196 -0.292,-0.439 -0.292,-0.729c0,-0.289 0.097,-0.53 0.292,-0.722c0.195,-0.192 0.436,-0.288 0.724,-0.288l15.582,0c0.288,0 0.529,0.098 0.724,0.294c0.195,0.196 0.292,0.439 0.292,0.728c0,0.29 -0.097,0.531 -0.292,0.723c-0.195,0.192 -0.436,0.288 -0.724,0.288l-15.582,-0Zm0,-7.182c-0.288,0 -0.529,-0.098 -0.724,-0.293c-0.195,-0.196 -0.292,-0.439 -0.292,-0.729c0,-0.289 0.097,-0.53 0.292,-0.722c0.195,-0.192 0.436,-0.288 0.724,-0.288l11.517,0c0.288,0 0.529,0.098 0.724,0.294c0.195,0.196 0.292,0.439 0.292,0.728c0,0.29 -0.097,0.531 -0.292,0.723c-0.195,0.191 -0.436,0.287 -0.724,0.287l-11.517,0Zm0,-7.045c-0.288,-0 -0.529,-0.098 -0.724,-0.294c-0.195,-0.196 -0.292,-0.439 -0.292,-0.728c0,-0.29 0.097,-0.531 0.292,-0.723c0.195,-0.192 0.436,-0.288 0.724,-0.288l15.582,0c0.288,0 0.529,0.098 0.724,0.294c0.195,0.196 0.292,0.439 0.292,0.729c0,0.289 -0.097,0.53 -0.292,0.722c-0.195,0.192 -0.436,0.288 -0.724,0.288l-15.582,-0Zm18.461,6.063l4.234,4.234c0.203,0.204 0.299,0.441 0.288,0.712c-0.011,0.271 -0.118,0.508 -0.322,0.711c-0.203,0.203 -0.446,0.305 -0.728,0.305c-0.282,-0 -0.525,-0.102 -0.728,-0.305l-4.946,-4.946c-0.203,-0.203 -0.305,-0.44 -0.305,-0.711c0,-0.271 0.102,-0.508 0.305,-0.711l4.946,-4.946c0.203,-0.203 0.446,-0.305 0.728,-0.305c0.282,0 0.525,0.102 0.728,0.305c0.204,0.204 0.305,0.446 0.305,0.729c0,0.282 -0.101,0.525 -0.305,0.728l-4.2,4.2Z'></path>
                                 </svg>
@@ -667,8 +668,6 @@ <h2 class="app-card__title">Integrations</h2>
     <script defer src="/js/data-table.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
-    <script defer src="/js/theme-change-assets.js"></script>
-    <script defer src="/js/navigation.js"></script>
     <script defer src="/js/theme-switcher.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
     <script defer src="/js/charts.js" type="module"></script>
diff --git a/dist/sign-in/index.html b/dist/sign-in/index.html
index 4f0fd50..e0c366e 100644
--- a/dist/sign-in/index.html
+++ b/dist/sign-in/index.html
@@ -29,6 +29,7 @@
 </head>
 
 <body x-data="{
+            sidebarOpen: false,
             search: {
                 blank: false,
                 count: window.search.length,
@@ -186,8 +187,6 @@ <h1 class="auth-form__title">Sign In</h1>
     <script defer src="/js/data-table.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
-    <script defer src="/js/theme-change-assets.js"></script>
-    <script defer src="/js/navigation.js"></script>
     <script defer src="/js/theme-switcher.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
     <script defer src="/js/charts.js" type="module"></script>
diff --git a/dist/sign-up/index.html b/dist/sign-up/index.html
index 53f15ad..670ba68 100644
--- a/dist/sign-up/index.html
+++ b/dist/sign-up/index.html
@@ -29,6 +29,7 @@
 </head>
 
 <body x-data="{
+            sidebarOpen: false,
             search: {
                 blank: false,
                 count: window.search.length,
@@ -197,8 +198,6 @@ <h1 class="auth-form__title">Sign Up</h1>
     <script defer src="/js/data-table.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
-    <script defer src="/js/theme-change-assets.js"></script>
-    <script defer src="/js/navigation.js"></script>
     <script defer src="/js/theme-switcher.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
     <script defer src="/js/charts.js" type="module"></script>
diff --git a/src/_includes/layout/account.html b/src/_includes/layout/account.html
index 6ce5a0c..3d4f0ec 100644
--- a/src/_includes/layout/account.html
+++ b/src/_includes/layout/account.html
@@ -2,7 +2,7 @@
 
 {% block content %}
     <div class="l-main">
-        <div class="l-main__sidebar" data-item="sidebar">
+        <div class="l-main__sidebar" :class="{ 'l-main__sidebar--open': sidebarOpen }">
             {% include "partial/sidebar.html" %}
         </div>
         <main id="content" class="l-main__body" data-item="body">
diff --git a/src/_includes/layout/base.html b/src/_includes/layout/base.html
index 7ef9c0f..8a88ed0 100644
--- a/src/_includes/layout/base.html
+++ b/src/_includes/layout/base.html
@@ -10,6 +10,7 @@
         <link rel="stylesheet" href="/css/main.css">
     </head>
     <body x-data="{
+            sidebarOpen: false,
             search: {
                 blank: false,
                 count: window.search.length,
@@ -49,8 +50,6 @@
         <script defer src="/js/data-table.js"></script>
         <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
         <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
-        <script defer src="/js/theme-change-assets.js"></script>
-        <script defer src="/js/navigation.js"></script>
         <script defer src="/js/theme-switcher.js"></script>
         <script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
         <script defer src="/js/charts.js" type="module"></script>
diff --git a/src/_includes/layout/categories.html b/src/_includes/layout/categories.html
index a55bba2..d68a21d 100644
--- a/src/_includes/layout/categories.html
+++ b/src/_includes/layout/categories.html
@@ -2,7 +2,7 @@
 
 {% block content %}
     <div class="l-main">
-        <div class="l-main__sidebar" data-item="sidebar">
+        <div class="l-main__sidebar" :class="{ 'l-main__sidebar--open': sidebarOpen }">
             {% include "partial/sidebar.html" %}
         </div>
         <main id="content" class="l-main__body" data-item="body">
diff --git a/src/_includes/layout/customers.html b/src/_includes/layout/customers.html
index 30ae2b0..a846116 100644
--- a/src/_includes/layout/customers.html
+++ b/src/_includes/layout/customers.html
@@ -2,7 +2,7 @@
 
 {% block content %}
     <div class="l-main">
-        <div class="l-main__sidebar" data-item="sidebar">
+        <div class="l-main__sidebar" :class="{ 'l-main__sidebar--open': sidebarOpen }">
             {% include "partial/sidebar.html" %}
         </div>
         <main id="content" class="l-main__body" data-item="body">
diff --git a/src/_includes/layout/dashboard.html b/src/_includes/layout/dashboard.html
index 26b66ed..a5f1559 100644
--- a/src/_includes/layout/dashboard.html
+++ b/src/_includes/layout/dashboard.html
@@ -2,7 +2,7 @@
 
 {% block content %}
     <div class="l-main">
-        <div class="l-main__sidebar" data-item="sidebar">
+        <div class="l-main__sidebar" :class="{ 'l-main__sidebar--open': sidebarOpen }">
             {% include "partial/sidebar.html" %}
         </div>
         <main id="content" class="l-main__body" data-item="body">
diff --git a/src/_includes/layout/orders.html b/src/_includes/layout/orders.html
index a805419..98af35a 100644
--- a/src/_includes/layout/orders.html
+++ b/src/_includes/layout/orders.html
@@ -2,7 +2,7 @@
 
 {% block content %}
     <div class="l-main">
-        <div class="l-main__sidebar" data-item="sidebar">
+        <div class="l-main__sidebar" :class="{ 'l-main__sidebar--open': sidebarOpen }">
             {% include "partial/sidebar.html" %}
         </div>
         <main id="content" class="l-main__body" data-item="body">
diff --git a/src/_includes/layout/product-edit.html b/src/_includes/layout/product-edit.html
index 309ec75..aae9f33 100644
--- a/src/_includes/layout/product-edit.html
+++ b/src/_includes/layout/product-edit.html
@@ -2,7 +2,7 @@
 
 {% block content %}
     <div class="l-main">
-        <div class="l-main__sidebar" data-item="sidebar">
+        <div class="l-main__sidebar" :class="{ 'l-main__sidebar--open': sidebarOpen }">
             {% include "partial/sidebar.html" %}
         </div>
         <main id="content" class="l-main__body" data-item="body">
diff --git a/src/_includes/layout/products.html b/src/_includes/layout/products.html
index 4e3cce3..b60e677 100644
--- a/src/_includes/layout/products.html
+++ b/src/_includes/layout/products.html
@@ -2,7 +2,7 @@
 
 {% block content %}
     <div class="l-main">
-        <div class="l-main__sidebar" data-item="sidebar">
+        <div class="l-main__sidebar" :class="{ 'l-main__sidebar--open': sidebarOpen }">
             {% include "partial/sidebar.html" %}
         </div>
         <main id="content" class="l-main__body" data-item="body">
diff --git a/src/_includes/layout/reference.html b/src/_includes/layout/reference.html
index 8df263d..3a34609 100644
--- a/src/_includes/layout/reference.html
+++ b/src/_includes/layout/reference.html
@@ -2,7 +2,7 @@
 
 {% block content %}
     <div class="l-main">
-        <div class="l-main__sidebar" data-item="sidebar">
+        <div class="l-main__sidebar" :class="{ 'l-main__sidebar--open': sidebarOpen }">
             {% include "partial/sidebar.html" %}
         </div>
         <main id="content" class="l-main__body" data-item="body">
diff --git a/src/_includes/layout/settings.html b/src/_includes/layout/settings.html
index 7046680..8f45fa2 100644
--- a/src/_includes/layout/settings.html
+++ b/src/_includes/layout/settings.html
@@ -2,7 +2,7 @@
 
 {% block content %}
     <div class="l-main">
-        <div class="l-main__sidebar" data-item="sidebar">
+        <div class="l-main__sidebar" :class="{ 'l-main__sidebar--open': sidebarOpen }">
             {% include "partial/sidebar.html" %}
         </div>
         <main id="content" class="l-main__body" data-item="body">
diff --git a/src/_includes/partial/header.html b/src/_includes/partial/header.html
index 427fe89..a0d02c9 100644
--- a/src/_includes/partial/header.html
+++ b/src/_includes/partial/header.html
@@ -6,10 +6,11 @@
             </a>
             <div class="app-header__actions app-header__actions--secondary display--none:md">
                 <button
+                    :aria-expanded="sidebarOpen"
+                    @click="sidebarOpen = ! sidebarOpen"
+                    aria-label="Open navigation"
                     class="btn btn--outline-dark btn--sm btn--icon"
                     data-action="sidebar-open"
-                    aria-label="Open navigation"
-                    aria-expanded="false"
                 >
                     {% svgIcon './src/img/icon/menu-open.svg', 'btn__icon' %}
                 </button>
diff --git a/src/_includes/partial/sidebar.html b/src/_includes/partial/sidebar.html
index 2082392..3ec6fe6 100644
--- a/src/_includes/partial/sidebar.html
+++ b/src/_includes/partial/sidebar.html
@@ -1,4 +1,8 @@
-<aside class="app-sidebar">
+<aside
+    @keyup.escape.window="sidebarOpen = false"
+    class="app-sidebar"
+    x-trap.noscroll="sidebarOpen"
+>
     <div class="app-sidebar__header">
         <a class="app-sidebar__logo" href="/" aria-label="{{ site.name }}">
             {% svgIcon './src/img/root-logo.svg' %}
@@ -7,10 +11,10 @@
             {% include "partial/search-toggle.html" %}
         </div>
         <button
-            class="btn btn--outline-dark btn--sm btn--icon display--none:md"
-            data-action="sidebar-close"
+            :aria-expanded="sidebarOpen"
+            @click="sidebarOpen = false"
             aria-label="Close navigation"
-            aria-expanded="false"
+            class="btn btn--outline-dark btn--sm btn--icon display--none:md"
         >
             {% svgIcon './src/img/icon/close.svg', 'btn__icon' %}
         </button>
diff --git a/src/js/navigation.js b/src/js/navigation.js
deleted file mode 100644
index 140b7ae..0000000
--- a/src/js/navigation.js
+++ /dev/null
@@ -1,40 +0,0 @@
-(() => {
-  const buttonOpen = document.querySelector('[data-action="sidebar-open"]');
-  const buttonClose = document.querySelector('[data-action="sidebar-close"]');
-  const sidebar = document.querySelector('[data-item="sidebar"]');
-  const body = document.querySelector('[data-item="body"]');
-
-  if (!sidebar || typeof buttonOpen === 'undefined') return;
-
-  function closeNavigation() {
-    body.removeAttribute('inert');
-    sidebar.classList.remove('l-main__sidebar--open');
-    buttonOpen.setAttribute('aria-expanded', 'false');
-    buttonOpen.focus();
-  }
-
-  function openNavigation() {
-    buttonOpen.setAttribute('aria-expanded', 'true');
-    body.setAttribute('inert', '');
-    sidebar.classList.add('l-main__sidebar--open');
-    sidebar.querySelector('a').focus();
-  }
-
-  function handleKeyDown(e) {
-    if (buttonOpen.getAttribute('aria-expanded') === 'false') return;
-
-    if (e.code === 'Escape') {
-      closeNavigation();
-    }
-  }
-
-  buttonOpen.addEventListener('click', () => {
-    openNavigation();
-  });
-
-  buttonClose.addEventListener('click', () => {
-    closeNavigation();
-  });
-
-  window.addEventListener('keydown', handleKeyDown);
-})();
diff --git a/src/js/theme-change-assets.js b/src/js/theme-change-assets.js
deleted file mode 100644
index f4c0301..0000000
--- a/src/js/theme-change-assets.js
+++ /dev/null
@@ -1,21 +0,0 @@
-(() => {
-  const htmlElement = document.querySelector('html');
-  const systemMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-
-  function changeAssets(theme) {
-    if (!theme) return;
-    const themeAssets = document.querySelectorAll('img[data-theme-mode]');
-
-    themeAssets.forEach((el) => {
-      el.src = el.getAttribute(`data-${theme}-asset`);
-    });
-  }
-
-  changeAssets(htmlElement.getAttribute('data-theme-mode') === 'system' ? systemMode : htmlElement.getAttribute('data-theme-mode'));
-
-  const observer = new MutationObserver(() => {
-    changeAssets(htmlElement.getAttribute('data-theme-mode') === 'system' ? systemMode : htmlElement.getAttribute('data-theme-mode'));
-  });
-
-  observer.observe(htmlElement, { attributes: true });
-})();
