From 4d892530890043df20ab635ce21952b5163f6dcd Mon Sep 17 00:00:00 2001
From: Tijs Zwinkels <tijs@tinkertank.eu>
Date: Sun, 24 Nov 2024 22:19:36 +0100
Subject: [PATCH] Start with right panel collapsed on mobile while preserving
 main content scaling

---
 src/App.css                   |  2 +-
 src/App.jsx                   |  5 ++++-
 src/components/RightPanel.jsx | 10 +++++-----
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/App.css b/src/App.css
index 8f0e2d8..ce886b4 100644
--- a/src/App.css
+++ b/src/App.css
@@ -24,7 +24,7 @@
   margin-right: 0;
 }
 
-.right-panel.collapsed ~ .main-content {
+.container.panel-collapsed .main-content {
   margin-right: -284px; /* 300px - 16px for the visible collapse button */
 }
 
diff --git a/src/App.jsx b/src/App.jsx
index 5c392f8..6f41066 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -8,6 +8,7 @@ import './App.css';
 
 function App() {
   const [messages, setMessages] = useState([]);
+  const [isRightPanelCollapsed, setIsRightPanelCollapsed] = useState(window.innerWidth <= 768);
   const [selectedWords, setSelectedWords] = useState(() => {
     const params = new URLSearchParams(window.location.search);
     const wordsParam = params.get('words');
@@ -237,7 +238,7 @@ function App() {
   };
 
   return (
-    <div className="container">
+    <div className={`container ${isRightPanelCollapsed ? 'panel-collapsed' : ''}`}>
       <div className="main-content">
         <div className="filter-container">
           <Filter value={filterTerm} onChange={handleFilterChange} />
@@ -274,6 +275,8 @@ function App() {
         onWordHide={handleWordHide}
         hiddenWords={hiddenWords}
         onAddCustomWord={handleAddCustomWord}
+        isCollapsed={isRightPanelCollapsed}
+        onCollapsedChange={setIsRightPanelCollapsed}
       />
     </div>
   );
diff --git a/src/components/RightPanel.jsx b/src/components/RightPanel.jsx
index 08b2298..87384af 100644
--- a/src/components/RightPanel.jsx
+++ b/src/components/RightPanel.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import Stats from './Stats';
 import Config from './Config';
 import WordFrequency from './WordFrequency';
@@ -20,15 +20,15 @@ function RightPanel({
   hiddenWords,
   onlySelectedWords,
   onOnlySelectedWordsChange,
-  onAddCustomWord
+  onAddCustomWord,
+  isCollapsed,
+  onCollapsedChange
 }) {
-  const [isCollapsed, setIsCollapsed] = useState(false);
-
   return (
     <div className={`right-panel ${isCollapsed ? 'collapsed' : ''}`}>
       <button 
         className="collapse-button"
-        onClick={() => setIsCollapsed(!isCollapsed)}
+        onClick={() => onCollapsedChange(!isCollapsed)}
         aria-label={isCollapsed ? "Expand panel" : "Collapse panel"}
       >
         {isCollapsed ? '>' : '<'}