Always small sidebar

midudev · Dec 31, 2024 · 6c150fd · 6c150fd
1 parent 551603e
commit 6c150fd
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 70 deletions.
diff --git a/index.html b/index.html
@@ -23,16 +23,12 @@
         const { state } = JSON.parse(storedData) ?? {}
         if (!state) return
 
-        const { theme, sidebar, layout } = state
+        const { theme, layout } = state
 
         // Configurar atributos y clases del elemento raíz
         const rootElement = document.documentElement
         if (theme) rootElement.setAttribute('data-theme', theme)
         if (layout) rootElement.setAttribute('data-layout', layout)
-
-        if (typeof sidebar === 'string') {
-          rootElement.classList.toggle('sections-compact', sidebar === 'compact')
-        }
       } catch (error) {
         console.error('Error al configurar el estado inicial:', error);
       }
@@ -146,16 +142,17 @@
                   <span class="skypack-type">JavaScript:</span>
                   <span data-translate="addDependency">Add dependency</span>
                 </strong>
-                <span data-translate="addDependencyDescription">An import statement will be added to the top of the JavaScript editor for the package.</span>
-
+                <span data-translate="addDependencyDescription">An import statement will be added to the top of the
+                  JavaScript editor for the package.</span>
+
                 <div class="input">
                   <svg viewBox="0 0 56.7 56.7" class="input-icon" width="18" height="18">
                     <path
                       d="M42.8,7.3C33-2.4,17.1-2.4,7.3,7.3c-9.8,9.8-9.8,25.7,0,35.5c8.7,8.7,22.2,9.7,32,2.9l9.6,9.6c1.8,1.8,4.7,1.8,6.4,0 c1.8-1.8,1.8-4.7,0-6.4l-9.6-9.6C52.5,29.5,51.5,16,42.8,7.3z M36.6,36.6c-6.4,6.4-16.7,6.4-23.1,0s-6.4-16.7,0-23.1 c6.4-6.4,16.7-6.4,23.1,0C43,19.9,43,30.3,36.6,36.6z">
                     </path>
                   </svg>
-                  <input data-translate-placeholder="searchDependency" id="skypack-search-input" type="search" placeholder="Search npm and add a package..."
-                    autocomplete="off" />
+                  <input data-translate-placeholder="searchDependency" id="skypack-search-input" type="search"
+                    placeholder="Search npm and add a package..." autocomplete="off" />
                 </div>
 
                 <p class="search-results-message"></p>
@@ -179,7 +176,8 @@
                   <span class="console-type">JavaScript:</span>
                   <span data-translate="console">Console</span>
                 </strong>
-                <span data-translate="consoleDescription">Shows the result of the code execution. Supports log, warn, info and error methods.</span>
+                <span data-translate="consoleDescription">Shows the result of the code execution. Supports log, warn,
+                  info and error methods.</span>
               </header>
 
               <ul class="console-list"></ul>
@@ -347,11 +345,11 @@
                 <span class="settings-type" data-translate="editor">Editor:</span>
                 <span data-translate="maxExecutionTime">Max. execution time</span>
               </strong>
-                <input name="maxExecutionTime" class="input" autocorrect="off" autocapitalize="off" spellcheck="false"
-                  type="number" wrap="off" value="200" min="100" max="5000" step="100" />
-                <p class="setting-description" data-translate="maxExecutionTimeDesc">
-                  The maximum execution time in milliseconds to prevent the editor from freezing. 
-                </p>
+              <input name="maxExecutionTime" class="input" autocorrect="off" autocapitalize="off" spellcheck="false"
+                type="number" wrap="off" value="200" min="100" max="5000" step="100" />
+              <p class="setting-description" data-translate="maxExecutionTimeDesc">
+                The maximum execution time in milliseconds to prevent the editor from freezing.
+              </p>
             </div>
 
             <div class="settings-item">
@@ -399,19 +397,6 @@
               </div>
             </div>
 
-            <div class="settings-item">
-              <strong>
-                <span data-translate="workbench" class="settings-type">Workbench:</span>
-                <span data-translate="sidebarStyle">Sidebar Style</span>
-              </strong>
-              <div class="select">
-                <select name="sidebar">
-                  <option data-translate="default" value="default">Default</option>
-                  <option data-translate="compact" value="compact">Compact</option>
-                </select>
-              </div>
-            </div>
-
             <div class="settings-item">
               <strong>
                 <span data-translate="workbench" class="settings-type">Workbench:</span>
@@ -454,7 +439,8 @@
               <div>
                 <label class="checkbox">
                   <input name="saveLocalstorage" type="checkbox" />
-                  <span data-translate="automaticallySaveUrl">Automatically save URL to local storage for fast content loading</span>
+                  <span data-translate="automaticallySaveUrl">Automatically save URL to local storage for fast content
+                    loading</span>
                 </label>
               </div>
             </div>

diff --git a/src/css/aside.css b/src/css/aside.css
@@ -50,7 +50,13 @@ aside button .button-title {
 
 aside button.is-active {
   opacity: 1;
-  border-left: 3px solid red;
+  &::after {
+    content: '';
+    inset: 0;
+    margin: auto;
+    background: #000;
+    border-radius: 4px;
+  }
 }
 
 @media (hover: hover) and (pointer: fine) {
@@ -99,50 +105,36 @@ aside button.is-active {
   flex-direction: column;
   height: 100%;
   justify-content: space-between;
-  width: 72px;
+  width: 52px;
 }
 
 .aside-sections button {
   background: transparent;
   border: 0;
-  border-left: 3px solid transparent;
   cursor: pointer;
   width: 100%;
   color: var(--button-foreground);
   transition: opacity 0.1s ease;
-  padding: 16px 0;
+  padding: 10px 0;
 }
 
 .aside-sections button.is-active {
+  border-radius: 4px;
   color: var(--button-foreground-active);
-  border-left: 3px solid var(--button-foreground-active);
 }
 
 .aside-sections button:not(:disabled):hover {
   color: var(--button-foreground-active);
 }
 
 .aside-sections svg {
-  width: 40px;
-  height: 40px;
+  width: 25px;
+  height: 25px;
 }
 
 .aside-sections header,
 .aside-sections footer {
   display: flex;
   flex-direction: column;
   justify-content: center;
-}
-
-.sections-compact .aside-sections {
-  width: 52px;
-}
-
-.sections-compact .aside-section button {
-  padding: 10px 0;
-}
-
-.sections-compact .aside-sections svg {
-  width: 25px;
-  height: 25px;
-}
+}
diff --git a/src/language/en.js b/src/language/en.js
@@ -47,9 +47,7 @@ const en = {
   light: 'Light',
   highContrastDark: 'High Contrast Dark',
   highContrastLight: 'High Contrast Light',
-  sidebarStyle: 'Sidebar style',
   default: 'Default',
-  compact: 'Compact',
   workbench: 'Workbench',
   preserveGrid: 'Preserve Grid',
   preserveGridLayout: 'Preserve Grid Layout',

diff --git a/src/language/es.js b/src/language/es.js
@@ -47,9 +47,7 @@ const es = {
   light: 'Claro',
   highContrastDark: 'Alto contraste oscuro',
   highContrastLight: 'Alto contraste claro',
-  sidebarStyle: 'Estilo de la barra lateral',
   default: 'Predeterminado',
-  compact: 'Compacto',
   workbench: 'Área de trabajo',
   preserveGrid: 'Preservar cuadrícula',
   preserveGridLayout: 'Preservar diseño de cuadrícula',

diff --git a/src/language/pt.js b/src/language/pt.js
@@ -47,9 +47,7 @@ const pt = {
   light: 'Claro',
   highContrastDark: 'Alto contraste escuro',
   highContrastLight: 'Alto contraste claro',
-  sidebarStyle: 'Estilo da barra lateral',
   default: 'Padrão',
-  compact: 'Compacto',
   workbench: 'Área de trabalho',
   preserveGrid: 'Preservar grade',
   preserveGridLayout: 'Preservar layout da grade',

diff --git a/src/main.js b/src/main.js
@@ -7,7 +7,6 @@ import { initializeEventsController } from './events-controller.js'
 import { getState, subscribe } from './state.js'
 import * as Preview from './utils/WindowPreviewer.js'
 import setGridLayout from './grid.js'
-import setSidebar from './sidebar.js'
 import setTheme from './theme.js'
 import setLanguage from './language.js'
 import { configurePrettierHotkeys } from './monaco-prettier/configurePrettier'
@@ -25,11 +24,10 @@ import { BUTTON_ACTIONS } from './constants/button-actions.js'
 import './components/layout-preview/layout-preview.js'
 import './components/codi-editor/codi-editor.js'
 
-const { layout: currentLayout, sidebar, theme, language, saveLocalstorage } = getState()
+const { layout: currentLayout, theme, language, saveLocalstorage } = getState()
 const { history, updateHistoryItem } = getHistoryState()
 
 setGridLayout(currentLayout)
-setSidebar(sidebar)
 setTheme(theme)
 setLanguage(language)
 
@@ -70,7 +68,6 @@ subscribe(state => {
     })
   })
   setGridLayout(state.layout)
-  setSidebar(state.sidebar)
   setTheme(state.theme)
   setLanguage(state.language)
 })

diff --git a/src/sidebar.js b/src/sidebar.js