Merge pull request #182 from ph1p/refactor/performance-and-ui-updates

Refactor/performance and UI updates

Author: ph1p

.github/workflows/dependabot.yml

@@ -14,6 +14,6 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v3
       - name: run PlatformIO Dependabot
-        uses: peterus/platformio_dependabot@v1
+        uses: ph1p/platformio_dependabot@v1
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}

frontend/package.json

@@ -35,5 +35,5 @@
     "tailwind-merge": "^3.4.0",
     "tailwindcss-animate": "^1.0.7"
   },
-  "packageManager": "pnpm@10.26.0"
+  "packageManager": "pnpm@10.26.1"
 }

frontend/src/components/button.tsx

@@ -6,7 +6,7 @@ export const Button: Component<
   return (
     <button
       {...props}
-      class={`${props.widthAuto ? "w-auto" : "w-full"} bg-blue-600 text-white border-0 px-4 py-3 uppercase text-sm leading-6 tracking-wider cursor-pointer font-bold hover:opacity-80 active:-translate-y-px transition-all rounded disabled:opacity-40 hover:disabled:bg-blue-600 ${
+      class={`${props.widthAuto ? "w-auto" : "w-full"} bg-gray-600 text-white border-0 px-4 py-3 uppercase text-sm leading-6 tracking-wider cursor-pointer font-bold hover:opacity-80 active:-translate-y-px transition-all rounded disabled:opacity-40 hover:disabled:bg-gray-600 ${
         props.class || ""
       }`}
     >

frontend/src/components/layout/layout.tsx

@@ -1,4 +1,4 @@
-import { type Component, type JSX, Show } from "solid-js";
+import { type Component, createSignal, type JSX, Show } from "solid-js";
 
 import { useStore } from "../../contexts/store";
 import { ScreenInfo } from "../screen-info";
@@ -9,9 +9,12 @@ export const Layout: Component<{
   ref?: HTMLElement;
 }> = (props) => {
   const [store] = useStore();
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = createSignal(false);
+
+  const closeMobileMenu = () => setIsMobileMenuOpen(false);
 
   return (
-    <div class={`h-full ${store.connectionState() === 1 ? "grid grid-cols-[320px_1fr] gap-6 p-6" : ""}`}>
+    <div class="h-full flex flex-col">
       <Show
         when={store.connectionState() === 1}
         fallback={
@@ -22,12 +25,70 @@ export const Layout: Component<{
           </main>
         }
       >
-        <aside class="bg-white p-6 flex flex-col h-full rounded-2xl shadow-lg overflow-y-auto">
-          {props.sidebar}
-        </aside>
-        <main class="h-full overflow-auto" ref={props.ref}>
-          {props.content}
-        </main>
+        <div class="flex-1 lg:grid lg:grid-cols-[320px_1fr] lg:gap-6 lg:p-6 relative overflow-hidden">
+          {/* Mobile Overlay */}
+          <Show when={isMobileMenuOpen()}>
+            <button
+              type="button"
+              class="lg:hidden fixed inset-0 bg-black bg-opacity-50 z-40 border-0 p-0 cursor-default"
+              onClick={closeMobileMenu}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " " || e.key === "Escape") {
+                  closeMobileMenu();
+                }
+              }}
+            />
+          </Show>
+
+          {/* Sidebar */}
+          <aside
+            class={`bg-white p-6 shadow-lg flex flex-col
+              lg:relative lg:h-full lg:rounded-2xl
+              fixed top-0 left-0 h-full w-full z-50
+              transition-transform duration-300 ease-in-out
+              ${isMobileMenuOpen() ? "translate-x-0" : "-translate-x-full lg:translate-x-0"}`}
+            onClick={(e) => {
+              // Close menu when clicks links in sidebar
+              const target = e.target as HTMLElement;
+              if (target.tagName === "A" || target.closest("a")) {
+                closeMobileMenu();
+              }
+            }}
+            onKeyDown={(e) => {
+              // Close menu when Enter is pressed on links in sidebar
+              if (e.key === "Enter") {
+                const target = e.target as HTMLElement;
+                if (target.tagName === "A" || target.closest("a")) {
+                  closeMobileMenu();
+                }
+              }
+            }}
+          >
+            {props.sidebar}
+            {/* Mobile Close Button */}
+            <button
+              type="button"
+              onClick={closeMobileMenu}
+              class="lg:hidden mt-4 w-full bg-gray-700 text-white border-0 px-4 py-3 uppercase text-sm leading-6 tracking-wider cursor-pointer font-bold hover:opacity-80 active:-translate-y-px transition-all rounded"
+            >
+              <i class="fa-solid fa-times mr-2" />
+              Close Menu
+            </button>
+          </aside>
+
+          <main class="h-full overflow-auto lg:pb-0 pb-20" ref={props.ref}>
+            {props.content}
+          </main>
+        </div>
+
+        {/* Mobile Menu Button - Fixed at bottom */}
+        <button
+          type="button"
+          onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen())}
+          class="lg:hidden fixed bottom-6 right-6 z-30 bg-gray-700 text-white border-0 p-4 rounded-full shadow-lg cursor-pointer font-bold hover:opacity-80 active:-translate-y-px transition-all"
+        >
+          <i class="fa-solid fa-bars text-xl" />
+        </button>
       </Show>
     </div>
   );