Project Manager sidebar & more

src/Globals.css

@@ -2,5 +2,5 @@
 
 body {
   font-family: 'Ubuntu', sans-serif;
-  @apply bg-[rgb(16,16,24)] text-white;
+  @apply bg-[rgb(16,16,24)] text-white select-none;
 }

src/editor/main.tsx

@@ -1,25 +1,12 @@
 import ReactDOM from 'react-dom/client'
 import '@fontsource/ubuntu'
 import '../Globals.css'
-import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 import Home from './routes/Home'
 
-const router = createBrowserRouter([
-  {
-    path: '/editor.html/',
-    children: [
-      {
-        index: true,
-        element: <Home />
-      }
-    ]
-  }
-])
-
 export default function App () {
   return (
     <>
-      <RouterProvider router={router} />
+      <Home />
     </>
   )
 }

src/projectmanager/componets/Sidebar.css

@@ -0,0 +1,9 @@
+@import 'tailwindcss';
+
+.sidebar {
+  @apply w-50 h-screen bg-[rgb(24,24,36)] flex flex-col items-center justify-start border-r border-r-[rgb(48,48,72)] z-1;
+}
+
+.sidebar button {
+  @apply w-45 bg-[rgb(54,54,72)] hover:bg-[rgb(72,72,96)] rounded-lg border border-[rgb(72,72,96)] hover:border-[rgb(96,96,128)] m-1 p-2 transition-colors cursor-pointer;
+}

src/projectmanager/componets/Sidebar.tsx

@@ -0,0 +1,40 @@
+import './Sidebar.css'
+import Icon from '../../Icon.png'
+import { app } from '@tauri-apps/api'
+import { useEffect, useState } from 'react'
+
+export default function Sidebar () {
+  const [version, setVersion] = useState<string | null>(null)
+
+  useEffect(() => {
+    ;(async () => {
+      const tempVersion = await app.getVersion()
+      setVersion(tempVersion)
+    })()
+  }, [])
+
+  return (
+    <>
+      <div className='sidebar'>
+        <img
+          src={Icon}
+          width={64}
+          height={64}
+          className='m-2'
+          draggable={false}
+        ></img>
+        <button onClick={() => (window.location.hash = 'projects')}>
+          Projects
+        </button>
+        <button onClick={() => (window.location.hash = 'settings')}>
+          Settings
+        </button>
+        {version != null && (
+          <p className='mt-auto mr-auto ml-2 mb-2 text-gray-400'>
+            PHP Fly v{version}
+          </p>
+        )}
+      </div>
+    </>
+  )
+}

src/projectmanager/main.tsx

@@ -1,25 +1,43 @@
 import ReactDOM from 'react-dom/client'
 import '@fontsource/ubuntu'
 import '../Globals.css'
-import { createBrowserRouter, RouterProvider } from 'react-router-dom'
-import Home from './routes/Home'
-
-const router = createBrowserRouter([
-  {
-    path: '/projectmanager.html/',
-    children: [
-      {
-        index: true,
-        element: <Home />
-      }
-    ]
-  }
-])
+import Sidebar from './componets/Sidebar'
+import { useEffect, useState } from 'react'
+import Projects from './routes/Projects'
+import Settings from './routes/Settings'
 
 export default function App () {
+  const [hash, setHash] = useState(window.location.hash || '#projects')
+
+  useEffect(() => {
+    const onHashChange = () => setHash(window.location.hash || '#projects')
+    window.addEventListener('hashchange', onHashChange)
+    return () => window.removeEventListener('hashchange', onHashChange)
+  }, [])
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => e.preventDefault()
+    document.addEventListener('contextmenu', handler)
+    return () => document.removeEventListener('contextmenu', handler)
+  }, [])
+
+  function renderContent () {
+    if (hash === '#projects') {
+      return <Projects />
+    } else if (hash === '#settings') {
+      return <Settings />
+    }
+    return null
+  }
+
   return (
     <>
-      <RouterProvider router={router} />
+      <div className='flex'>
+        <Sidebar />
+        <div className='relative z-0 flex-1'>
+          <main>{renderContent()}</main>
+        </div>
+      </div>
     </>
   )
 }

src/projectmanager/routes/Home.tsx

@@ -1,3 +0,0 @@
-export default function Home () {
-  return <></>
-}

src/projectmanager/routes/Projects.tsx

@@ -0,0 +1,7 @@
+export default function Projects () {
+  return (
+    <>
+      <p>Projects</p>
+    </>
+  )
+}

src/projectmanager/routes/Settings.tsx

@@ -0,0 +1,7 @@
+export default function Settings () {
+  return (
+    <>
+      <p>Settings</p>
+    </>
+  )
+}