Replace onclick with element IDs

Refactor components to use ID-based event listeners instead of onclick for better maintainability

resources/views/components/docs/sidebar-toggle.blade.php

@@ -1,8 +1,8 @@
-<div class="sidebar-button-wrapper flex items-center pl-2 pr-4 open">
-	<button class="sidebar-toggle-button open dark:fill-gray-200 dark:hover:fill-white" title="Open sidebar menu" onClick="showSidebar()">
+<div id="sidebar-toggle-button" class="sidebar-button-wrapper flex items-center pl-2 pr-4 open">
+	<button class="sidebar-toggle-button open dark:fill-gray-200 dark:hover:fill-white" title="Open sidebar menu">
 		<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
 	</button>
-	<button class="sidebar-toggle-button close dark:fill-gray-200 dark:hover:fill-white" title="Close sidebar menu" onClick="hideSidebar()">
+	<button class="sidebar-toggle-button close dark:fill-gray-200 dark:hover:fill-white" title="Close sidebar menu">
 		<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
 	</button>
 </div>

resources/views/components/navigation/theme-toggle-button.blade.php

@@ -1,5 +1,5 @@
 @if(Hyde::features('darkmode'))
-<button class="flex items-center px-3 py-1 hover:text-gray-700 dark:text-gray-200" onclick="toggleTheme()" aria-label="Toggle dark theme" title="Toggle theme">
+<button id="theme-toggle-button" class="flex items-center px-3 py-1 hover:text-gray-700 dark:text-gray-200" aria-label="Toggle dark theme" title="Toggle theme">
 	<svg id="theme-toggle-dark-icon" title="Switch to light theme" class="hidden dark:block" style="width:1.25rem;" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
 		<path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
 	</svg>

resources/views/layouts/navigation.blade.php

@@ -11,12 +11,11 @@
 
 		<div class="ml-auto">
 		@include('hyde::components.navigation.theme-toggle-button')
-
 		</div>
 	</div>
 
 	<div class="block md:hidden">
-		<button class="flex items-center px-3 py-1 hover:text-gray-700 dark:text-gray-200" onclick="toggleNavigation()" aria-label="Toggle navigation menu">
+		<button id="navigation-toggle-button" class="flex items-center px-3 py-1 hover:text-gray-700 dark:text-gray-200" aria-label="Toggle navigation menu">
 			<svg title="Open Navigation Menu" class="dark:fill-gray-200" style="display: block;" id="open-main-navigation-menu-icon" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><title>Open Menu</title><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
 			<svg title="Close Navigation Menu" class="dark:fill-gray-200" style="display: none;" id="close-main-navigation-menu-icon" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><title>Close Menu</title> <path d="M0 0h24v24H0z" fill="none"></path> <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path> </svg>
 		</button>