resizable sidebar

Author: h908714124

src/main/client/src/Router.jsx

@@ -38,10 +38,10 @@ export const Router = createBrowserRouter(
       element={<WithConnection />}>
       <Route
         element={
-          <div>
+          <>
             <Outlet />
             <Toaster position="top-right" />
-          </div>}>
+          </>}>
         <Route
           path={base + "/lobby"}
           element={<Lobby />} />

src/main/client/src/component/SideBar.jsx

@@ -0,0 +1,61 @@
+import {
+  useRef,
+  useEffect,
+  useState,
+} from "react"
+import {
+  useLayoutStore,
+} from "../layout.js"
+
+export const SideBar = ({children}) => {
+  let vw = useLayoutStore(state => state.vw)
+  let dragging = useLayoutStore(state => state.dragging)
+  let setDragging = useLayoutStore(state => state.setDragging)
+  let sidebarWidth = useLayoutStore(state => state.sidebarWidth)
+  let setSidebarWidth = useLayoutStore(state => state.setSidebarWidth)
+  let [ghostWidth, setGhostWidth] = useState(sidebarWidth)
+  let draggingRef = useRef()
+  let ghostWidthRef = useRef()
+  draggingRef.current = dragging
+  ghostWidthRef.current = ghostWidth
+  useEffect(() => {
+    let mousemove = (e) => {
+      if (!draggingRef.current) {
+        return
+      }
+      setGhostWidth(Math.trunc(vw - e.clientX))
+    }
+    let mouseup = () => {
+      if (!draggingRef.current) {
+        return
+      }
+      setSidebarWidth(ghostWidthRef.current)
+      setDragging(false)
+    }
+    window.document.addEventListener("mousemove", mousemove)
+    window.document.addEventListener("mouseup", mouseup)
+    return () => {
+      window.document.removeEventListener("mousemove", mousemove)
+      window.document.removeEventListener("mouseup", mouseup)
+    }
+  }, [vw, draggingRef, setDragging, setSidebarWidth])
+  return (
+    <div
+        style={{width: sidebarWidth + "px"}}
+        className="fixed top-0 right-0 h-full bg-slate-800">
+      <div
+        onMouseDown={(e) => {
+          e.preventDefault()
+          setDragging(true)
+        }}
+        style={{right: sidebarWidth + "px"}}
+        className="fixed top-0 w-[3px] h-full bg-slate-700 z-10 cursor-col-resize" />
+      {dragging && (
+        <div
+          style={{right: ghostWidth + "px"}}
+          className="fixed top-0 w-[3px] h-full bg-slate-600 z-20" />
+      )}
+      {children}
+    </div>
+  )
+}

src/main/client/src/feature/game/Game.jsx

@@ -24,6 +24,9 @@ import {
   useAuthStore,
   useGameStore,
 } from "../../store.js"
+import {
+  useLayoutStore,
+} from "../../layout.js"
 import {
   paintShadow,
   paintGrid,
@@ -59,6 +62,8 @@ export const Game = () => {
   let [forbidden_x, forbidden_y] = useGameStore(state => state.forbidden)
   let canvasRef = useRef()
   let countingGroup = !gameHasEnded() && counting ? getCountingGroup(board, cursor_x, cursor_y) : undefined
+  let sidebarWidth = useLayoutStore(state => state.sidebarWidth)
+  let vw = useLayoutStore(state => state.vw)
 
   let context = useMemo(() => {
     let dim = board.length
@@ -247,7 +252,8 @@ export const Game = () => {
   }
 
   return (
-  <div className="w-[calc(100vw-24rem)]">
+  <div
+    style={{width: (vw - sidebarWidth) + "px"}}>
     <div className="grid justify-center mt-8">
       <canvas ref={canvasRef}
         onMouseLeave={() => {

src/main/client/src/feature/game/GamePanel.jsx

@@ -33,14 +33,17 @@ import {
 import {
   GameChat,
 } from "./GameChat.jsx"
+import {
+  SideBar,
+} from "../../component/SideBar.jsx"
 
 export const GamePanel = ({zoom, setZoom}) => {
   return (
-    <div className="fixed top-0 right-0 z-1 h-full bg-slate-800 border-l-2 border-slate-700">
-      <div className="w-[24rem] pr-3 pt-4 pl-2 h-full flex flex-col gap-y-1">
+    <SideBar>
+      <div className="pr-3 pt-4 pl-2 h-full flex flex-col gap-y-1">
         <Panel zoom={zoom} setZoom={setZoom} />
       </div>
-    </div>
+    </SideBar>
   )
 }
 

src/main/client/src/feature/lobby/ActiveGames.jsx

@@ -51,7 +51,7 @@ export function ActiveGames() {
   }, [setInit, auth, initialized, stompClient, navigate])
   return (
     <>
-      <div className="float-left ml-4 grid grid-cols-[min-content_min-content_min-content]">
+      <div className="ml-4 grid grid-cols-[min-content_min-content_min-content]">
         {activeGames.map((game) => (
           <ActiveGame
             game={game}

src/main/client/src/feature/lobby/Lobby.jsx

@@ -77,7 +77,7 @@ export function Lobby() {
     navigate(base + "/game/" + response.id)
   }), [auth, navigate])
   return (
-    <div>
+    <>
       <div className={twJoin(
           "mt-2 inline-flex py-2 pr-4 gap-x-1 border-r-2 border-y-2",
           isNewGameOpen && "rounded-r-full border-slate-600",
@@ -100,16 +100,17 @@ export function Lobby() {
           </button>
         )}
       </div>
-      <div className="clear-both" />
-      <DetailNavigation detail={detail} setDetail={setDetail} />
-      {detail === "open" && (
-        <OpenGames />
-      )}
-      {detail === "active" && (
-        <ActiveGames />
-      )}
+      <div className="mt-2 grid grid-cols-[max-content_auto]">
+        <DetailNavigation detail={detail} setDetail={setDetail} />
+        {detail === "open" && (
+          <OpenGames />
+        )}
+        {detail === "active" && (
+          <ActiveGames />
+        )}
+      </div>
       <LobbyPanel />
-    </div>
+    </>
   )
 }
 
@@ -145,11 +146,10 @@ function NewGameDialog({onNewGame, onStartEdit, setNewGameOpen}) {
 }
 function DetailNavigation({detail, setDetail}) {
   return (
-    <div className="mt-2">
-      <div className={twJoin(
-        "float-left py-3 pl-2 pr-3 border-r-2 border-y-2 border-slate-600",
-        "rounded-r-xl flex flex-col gap-y-2",
-      )}>
+    <div className={twJoin(
+      "w-fit py-3 pl-2 pr-3 border-r-2 border-y-2 border-slate-600",
+      "rounded-r-xl flex flex-col gap-y-2",
+    )}>
       {detailData.map(([id, label]) => (
         <button
           key={id}
@@ -161,7 +161,6 @@ function DetailNavigation({detail, setDetail}) {
             id !== detail && "border-transparent hover:bg-stone-800",
           )}>{label}</button>
       ))}
-      </div>
     </div>
   )
 }

src/main/client/src/feature/lobby/LobbyPanel.jsx

@@ -11,14 +11,17 @@ import {
 import {
   useAuthStore,
 } from "../../store.js"
+import {
+  SideBar,
+} from "../../component/SideBar.jsx"
 
 export const LobbyPanel = () => {
   return (
-    <div className="fixed top-0 right-0 w-[24rem] h-full bg-slate-800 border-l-2 border-slate-700">
+    <SideBar>
       <div className="pt-2">
         <Panel />
       </div>
-    </div>
+    </SideBar>
   )
 }
 

src/main/client/src/feature/lobby/OpenGames.jsx

@@ -77,8 +77,8 @@ export function OpenGames() {
     navigate(base + "/game/" + d.game.id)
   }), [auth, navigate])
   return (
-    <>
-      <div className="float-left ml-4 grid grid-cols-[min-content_min-content]">
+    <div>
+      <div className="ml-4 grid grid-cols-[max-content_max-content]">
         {openGames.map((game) => (
           <OpenGame
             game={game}
@@ -94,7 +94,7 @@ export function OpenGames() {
           onAccept={onAccept}
         />
       )}
-    </>
+    </div>
   )
 }
 

src/main/client/src/layout.js

@@ -0,0 +1,34 @@
+import {
+  create,
+} from "zustand"
+import {
+  produce,
+} from "immer"
+import {
+  persist,
+} from "zustand/middleware"
+
+export const useLayoutStore = create(
+  persist(
+    (set) => ({
+      dragging: false,
+      vw: Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0),
+      sidebarWidth: 24 * getPixelRem(),
+      setDragging: (dragging) => {
+        set(produce(state => {
+          state.dragging = dragging
+        }))
+      },
+      setSidebarWidth: (width) => {
+        set(produce(state => {
+          state.sidebarWidth = width
+        }))
+      },
+    }),
+    {name: "layout-storage"},
+  ),
+)
+
+function getPixelRem() {
+    return parseFloat(window.getComputedStyle(window.document.documentElement).fontSize)
+}