Start with right panel collapsed on mobile while preserving main cont…

…ent scaling
tijszwinkels · Nov 24, 2024 · 4d89253 · 4d89253
1 parent 2cdcccc
commit 4d89253
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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 ? '>' : '<'}