*

2 files changed, 72 insertions, 1 deletions

diff --git a/js/pixel-art/pixel/app.js b/js/pixel-art/pixel/app.js
index 087801c..e4a2235 100644
--- a/js/pixel-art/pixel/app.js
+++ b/js/pixel-art/pixel/app.js
@@ -10,6 +10,9 @@ let currentColor = '#000000';
 let grid = Array(gridWidth).fill().map(() => Array(gridHeight).fill(null));
 let offsetX = 0;
 let offsetY = 0;
+const paletteToggle = document.getElementById('palette-toggle');
+const palette = document.getElementById('palette');
+let isPaletteVisible = true;
 
 // Event Listeners
 canvas.addEventListener('click', handleCanvasClick);
@@ -19,6 +22,7 @@ document.getElementById('gridHeight').addEventListener('change', updateGridSize)
 document.getElementById('resetBtn').addEventListener('click', handleReset);
 document.getElementById('exportBtn').addEventListener('click', exportToPNG);
 window.addEventListener('keydown', handlePan);
+paletteToggle.addEventListener('click', togglePalette);
 
 // Initialization
 resizeCanvas();
@@ -122,6 +126,7 @@ function saveToLocalStorage() {
         colorHistory: colorHistory,
         currentColor: currentColor,
         grid: grid,
+        isPaletteVisible: isPaletteVisible
     };
     localStorage.setItem('pixelArtConfig', JSON.stringify(gridData));
 }
@@ -141,6 +146,12 @@ function loadFromLocalStorage() {
         document.getElementById('colorPicker').value = currentColor;
         centerGrid();
         drawGrid();
+        isPaletteVisible = gridData.isPaletteVisible ?? true;
+        if (!isPaletteVisible) {
+            palette.classList.add('hidden');
+            paletteToggle.classList.add('hidden');
+            paletteToggle.innerHTML = '🎨';
+        }
     } else {
         initializeGrid();
         centerGrid();
@@ -183,4 +194,18 @@ function handleCanvasClick(e) {
         drawGrid();
         saveToLocalStorage();
     }
+}
+
+function togglePalette() {
+    isPaletteVisible = !isPaletteVisible;
+    
+    if (isPaletteVisible) {
+        palette.classList.remove('hidden');
+        paletteToggle.classList.remove('hidden');
+        paletteToggle.innerHTML = '☰';
+    } else {
+        palette.classList.add('hidden');
+        paletteToggle.classList.add('hidden');
+        paletteToggle.innerHTML = '🎨';
+    }
 }
\ No newline at end of file
diff --git a/js/pixel-art/pixel/index.html b/js/pixel-art/pixel/index.html
index 91f1813..610161c 100644
--- a/js/pixel-art/pixel/index.html
+++ b/js/pixel-art/pixel/index.html
@@ -21,7 +21,7 @@
             display: block;
         }
         #palette {
-            position: absolute;
+            position: fixed;
             top: 10px;
             right: 10px;
             background-color: beige;
@@ -29,6 +29,39 @@
             border: 1px solid #ccc;
             border-radius: 5px;
             width: 150px;
+            transition: transform 0.3s ease-out;
+            max-height: 90vh;
+            overflow-y: auto;
+            scrollbar-width: none; /* Firefox */
+            -ms-overflow-style: none; /* IE and Edge */
+        }
+
+        #palette.hidden {
+            transform: translateX(calc(100% + 20px));
+        }
+
+        #palette-toggle {
+            position: fixed;
+            top: 10px;
+            right: 10px;
+            background-color: beige;
+            border: 1px solid #ccc;
+            border-radius: 5px 0 0 5px;
+            padding: 10px;
+            cursor: pointer;
+            z-index: 1000;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: transform 0.3s ease-out;
+        }
+
+        #palette-toggle.hidden {
+            transform: translateX(0);
+        }
+
+        #palette-toggle:not(.hidden) {
+            transform: translateX(-170px);
         }
 
         #palette label,
@@ -64,10 +97,23 @@
             cursor: pointer;
             margin-right: 5px;
         }
+
+        @media (max-width: 768px) {
+            #palette {
+                top: auto;
+                bottom: 10px;
+            }
+
+            #palette-toggle {
+                top: auto;
+                bottom: 10px;
+            }
+        }
     </style>
 </head>
 <body>
     <canvas id="canvas"></canvas>
+    <button id="palette-toggle">☰</button>
     <div id="palette">
         <label for="gridWidth">Grid Width:</label>
         <input type="number" id="gridWidth" value="16" min="1">