From 7b32df09487383897927356547f1ba5a73e8cc94 Mon Sep 17 00:00:00 2001
From: AAGaming <aagaming@riseup.net>
Date: Fri, 4 Oct 2024 23:59:53 -0400
Subject: Add routerhook for desktop UI and a basic sidebar menu for Decky in
 desktop UI

---
 frontend/src/components/DeckyDesktopUI.tsx | 44 ++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 frontend/src/components/DeckyDesktopUI.tsx

(limited to 'frontend/src/components/DeckyDesktopUI.tsx')

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;
-- 
cgit v1.2.3