Fix side bar, still need to script.

Author: Layoric

MyApp/Components/Layout/MainLayout.razor

@@ -1,6 +1,5 @@
 @inherits LayoutComponentBase
 @inject NavigationManager NavigationManager;
-@inject IJSRuntime JS
 
 <div>
     <Header />
@@ -9,8 +8,7 @@
 
     <div class="md:pl-64 flex flex-col flex-1">
         <div class="sticky top-0 z-10 md:hidden pl-1 pt-1 sm:pl-3 sm:pt-3 bg-white dark:bg-black">
-            <button type="button" class="-ml-0.5 -mt-0.5 h-12 w-12 inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
-                @onclick=@(() => CollapseSidebar = false)>
+            <button type="button" onclick="toggleSidebar()" class="-ml-0.5 -mt-0.5 h-12 w-12 inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900 dark:hover:text-gray-50 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
                 <span class="sr-only">Open sidebar</span>
                 <!-- Heroicon name: outline/menu -->
                 <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
@@ -26,9 +24,44 @@
             </div>
         </main>
     </div>
-
 </div>
 
-@code {
-    bool CollapseSidebar = true;
-}
+<script type="module">
+import { remount } from "/mjs/app.mjs"
+remount()
+</script>
+
+<div id="blazor-error-ui" class="hidden fixed bottom-0 w-full z-10">
+    <div class="flex rounded-md bg-yellow-50 p-4 m-4">
+        <div class="flex-shrink-0">
+            <!-- Heroicon name: solid/exclamation -->
+            <svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+            </svg>
+        </div>
+        <div class="ml-3">
+            <environment include="Staging,Production">
+                <h3 class="text-sm font-medium text-yellow-800">An error has occurred. This application may no longer respond until reloaded.</h3>
+            </environment>
+            <environment include="Development">
+                <h3 class="text-sm font-medium text-yellow-800">An unhandled exception has occurred. See browser dev tools for details.</h3>
+            </environment>
+            <div class="mt-4">
+                <div class="-mx-2 -my-1.5 flex">
+                    <button type="button" class="reload bg-yellow-50 px-2 py-1.5 rounded-md text-sm font-medium text-yellow-800 hover:bg-yellow-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-yellow-50 focus:ring-yellow-600">Reload</button>
+                </div>
+            </div>
+        </div>
+        <div class="ml-auto pl-3">
+            <div class="-mx-1.5 -my-1.5">
+                <button type="button" class="dismiss inline-flex bg-yellow-50 rounded-md p-1.5 text-yellow-500 hover:bg-yellow-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-yellow-50 focus:ring-yellow-600">
+                    <span class="sr-only">Dismiss</span>
+                    <!-- Heroicon name: solid/x -->
+                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>

MyApp/Components/Shared/Sidebar.razor

@@ -83,6 +83,8 @@ function toggleSidebar() {
 }
 document.addEventListener('DOMContentLoaded', () =>
     Blazor.addEventListener('enhancedload', hideSidebar))
+    
+hideSidebar();
 </script>
 
 @code {