Add routerhook for desktop UI and a basic sidebar menu for Decky in desktop UI

1 files changed, 44 insertions, 0 deletions

diff --git a/frontend/src/components/DeckyDesktopUI.tsx b/frontend/src/components/DeckyDesktopUI.tsx
new file mode 100644
index 00000000..fde33c0f
--- /dev/null
+++ b/frontend/src/components/DeckyDesktopUI.tsx
@@ -0,0 +1,44 @@
+import { CSSProperties, FC } from 'react';
+
+import DeckyDesktopSidebar from './DeckyDesktopSidebar';
+import DeckyIcon from './DeckyIcon';
+import { useDeckyState } from './DeckyState';
+
+const DeckyDesktopUI: FC = () => {
+  const { desktopMenuOpen, setDesktopMenuOpen } = useDeckyState();
+  return (
+    <>
+      <style>
+        {`
+            .deckyDesktopIcon {
+                color: #67707b;
+            }
+            .deckyDesktopIcon:hover {
+                color: #fff;
+            }
+            `}
+      </style>
+      <DeckyIcon
+        className="deckyDesktopIcon"
+        width={24}
+        height={24}
+        onClick={() => setDesktopMenuOpen(!desktopMenuOpen)}
+        style={
+          {
+            position: 'absolute',
+            top: '36px', // nav text is 34px but 36px looks nicer to me
+            right: '10px', // <- is 16px but 10px looks nicer to me
+            width: '24px',
+            height: '24px',
+            cursor: 'pointer',
+            transition: 'color 0.3s linear',
+            '-webkit-app-region': 'no-drag',
+          } as CSSProperties
+        }
+      />
+      <DeckyDesktopSidebar />
+    </>
+  );
+};
+
+export default DeckyDesktopUI;