ywana-core8 0.2.20 → 0.2.21

package/src/html/Menu.stories.jsx

@@ -0,0 +1,504 @@
+import React from 'react'
+import { MenuIcon, MenuItem, MenuSeparator } from './menu'
+
+export default {
+  title: 'HTML/Menu'
+}
+
+/**
+ * Basic Menu Example
+ */
+export const BasicMenu = () => (
+  <div style={{ padding: '100px', display: 'flex', gap: '20px', flexWrap: 'wrap' }}>
+    <div>
+      <h3>Basic Menu</h3>
+      <MenuIcon icon="more_vert">
+        <MenuItem icon="edit" label="Edit" onSelect={() => alert('Edit clicked')} />
+        <MenuItem icon="copy" label="Copy" onSelect={() => alert('Copy clicked')} />
+        <MenuItem icon="delete" label="Delete" onSelect={() => alert('Delete clicked')} />
+      </MenuIcon>
+    </div>
+
+    <div>
+      <h3>With Separators</h3>
+      <MenuIcon icon="menu">
+        <MenuItem icon="home" label="Home" onSelect={() => alert('Home')} />
+        <MenuItem icon="dashboard" label="Dashboard" onSelect={() => alert('Dashboard')} />
+        <MenuSeparator />
+        <MenuItem icon="settings" label="Settings" onSelect={() => alert('Settings')} />
+        <MenuItem icon="help" label="Help" onSelect={() => alert('Help')} />
+        <MenuSeparator />
+        <MenuItem icon="logout" label="Logout" onSelect={() => alert('Logout')} />
+      </MenuIcon>
+    </div>
+
+    <div>
+      <h3>With Disabled Items</h3>
+      <MenuIcon icon="more_horiz">
+        <MenuItem icon="visibility" label="View" onSelect={() => alert('View')} />
+        <MenuItem icon="edit" label="Edit" disabled={true} />
+        <MenuItem icon="share" label="Share" onSelect={() => alert('Share')} />
+        <MenuItem icon="delete" label="Delete" disabled={true} />
+      </MenuIcon>
+    </div>
+
+    <div>
+      <h3>With Metadata</h3>
+      <MenuIcon icon="settings">
+        <MenuItem icon="save" label="Save" meta="Ctrl+S" onSelect={() => alert('Save')} />
+        <MenuItem icon="undo" label="Undo" meta="Ctrl+Z" onSelect={() => alert('Undo')} />
+        <MenuItem icon="redo" label="Redo" meta="Ctrl+Y" onSelect={() => alert('Redo')} />
+        <MenuSeparator />
+        <MenuItem icon="print" label="Print" meta="Ctrl+P" onSelect={() => alert('Print')} />
+      </MenuIcon>
+    </div>
+  </div>
+)
+
+/**
+ * All Positions Demo
+ */
+export const AllPositions = () => (
+  <div style={{ padding: '20px' }}>
+    <h2>Menu Positions</h2>
+    <p>Click each icon to see the menu in different positions</p>
+
+    <div style={{
+      display: 'grid',
+      gridTemplateColumns: 'repeat(3, 1fr)',
+      gap: '100px',
+      padding: '100px',
+      background: '#f5f5f5',
+      borderRadius: '8px'
+    }}>
+      {/* Top Row */}
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+        <p><strong>Top Left</strong></p>
+        <MenuIcon icon="arrow_drop_up" position="top-left">
+          <MenuItem icon="star" label="Top Left Item 1" />
+          <MenuItem icon="favorite" label="Top Left Item 2" />
+          <MenuItem icon="bookmark" label="Top Left Item 3" />
+        </MenuIcon>
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+        <p><strong>Top (Centered)</strong></p>
+        <MenuIcon icon="arrow_drop_up" position="top">
+          <MenuItem icon="star" label="Top Center Item 1" />
+          <MenuItem icon="favorite" label="Top Center Item 2" />
+          <MenuItem icon="bookmark" label="Top Center Item 3" />
+        </MenuIcon>
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+        <p><strong>Top Right</strong></p>
+        <MenuIcon icon="arrow_drop_up" position="top-right">
+          <MenuItem icon="star" label="Top Right Item 1" />
+          <MenuItem icon="favorite" label="Top Right Item 2" />
+          <MenuItem icon="bookmark" label="Top Right Item 3" />
+        </MenuIcon>
+      </div>
+
+      {/* Middle Row */}
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+        <p><strong>Left</strong></p>
+        <MenuIcon icon="arrow_left" position="left">
+          <MenuItem icon="star" label="Left Item 1" />
+          <MenuItem icon="favorite" label="Left Item 2" />
+          <MenuItem icon="bookmark" label="Left Item 3" />
+        </MenuIcon>
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', background: '#e0e0e0', padding: '20px', borderRadius: '8px' }}>
+        <p><strong>Icon Here</strong></p>
+        <p style={{ fontSize: '12px', color: '#666' }}>Click surrounding icons</p>
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+        <p><strong>Right</strong></p>
+        <MenuIcon icon="arrow_right" position="right">
+          <MenuItem icon="star" label="Right Item 1" />
+          <MenuItem icon="favorite" label="Right Item 2" />
+          <MenuItem icon="bookmark" label="Right Item 3" />
+        </MenuIcon>
+      </div>
+
+      {/* Bottom Row */}
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+        <p><strong>Bottom Left</strong></p>
+        <MenuIcon icon="arrow_drop_down" position="bottom-left">
+          <MenuItem icon="star" label="Bottom Left Item 1" />
+          <MenuItem icon="favorite" label="Bottom Left Item 2" />
+          <MenuItem icon="bookmark" label="Bottom Left Item 3" />
+        </MenuIcon>
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+        <p><strong>Bottom (Centered)</strong></p>
+        <MenuIcon icon="arrow_drop_down" position="bottom">
+          <MenuItem icon="star" label="Bottom Center Item 1" />
+          <MenuItem icon="favorite" label="Bottom Center Item 2" />
+          <MenuItem icon="bookmark" label="Bottom Center Item 3" />
+        </MenuIcon>
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+        <p><strong>Bottom Right</strong></p>
+        <MenuIcon icon="arrow_drop_down" position="bottom-right">
+          <MenuItem icon="star" label="Bottom Right Item 1" />
+          <MenuItem icon="favorite" label="Bottom Right Item 2" />
+          <MenuItem icon="bookmark" label="Bottom Right Item 3" />
+        </MenuIcon>
+      </div>
+    </div>
+  </div>
+)
+
+/**
+ * Context Menu Simulation
+ */
+export const ContextMenuExample = () => (
+  <div style={{ padding: '50px' }}>
+    <h2>Context Menu Example</h2>
+    <p>Common use case: Actions menu in a table or card</p>
+
+    <div style={{
+      display: 'grid',
+      gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))',
+      gap: '20px',
+      marginTop: '20px'
+    }}>
+      {/* Card 1 */}
+      <div style={{
+        border: '1px solid #ddd',
+        borderRadius: '8px',
+        padding: '16px',
+        background: 'white',
+        boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
+      }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <h3 style={{ margin: 0 }}>Document 1</h3>
+          <MenuIcon icon="more_vert" position="bottom-right">
+            <MenuItem icon="visibility" label="View" onSelect={() => alert('View Document 1')} />
+            <MenuItem icon="edit" label="Edit" onSelect={() => alert('Edit Document 1')} />
+            <MenuItem icon="download" label="Download" onSelect={() => alert('Download Document 1')} />
+            <MenuSeparator />
+            <MenuItem icon="share" label="Share" onSelect={() => alert('Share Document 1')} />
+            <MenuSeparator />
+            <MenuItem icon="delete" label="Delete" onSelect={() => alert('Delete Document 1')} />
+          </MenuIcon>
+        </div>
+        <p style={{ color: '#666', fontSize: '14px' }}>Last modified: 2 hours ago</p>
+      </div>
+
+      {/* Card 2 */}
+      <div style={{
+        border: '1px solid #ddd',
+        borderRadius: '8px',
+        padding: '16px',
+        background: 'white',
+        boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
+      }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <h3 style={{ margin: 0 }}>Document 2</h3>
+          <MenuIcon icon="more_vert" position="bottom-right">
+            <MenuItem icon="visibility" label="View" onSelect={() => alert('View Document 2')} />
+            <MenuItem icon="edit" label="Edit" disabled={true} />
+            <MenuItem icon="download" label="Download" onSelect={() => alert('Download Document 2')} />
+            <MenuSeparator />
+            <MenuItem icon="share" label="Share" onSelect={() => alert('Share Document 2')} />
+            <MenuSeparator />
+            <MenuItem icon="delete" label="Delete" onSelect={() => alert('Delete Document 2')} />
+          </MenuIcon>
+        </div>
+        <p style={{ color: '#666', fontSize: '14px' }}>Last modified: Yesterday</p>
+      </div>
+
+      {/* Card 3 */}
+      <div style={{
+        border: '1px solid #ddd',
+        borderRadius: '8px',
+        padding: '16px',
+        background: 'white',
+        boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
+      }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <h3 style={{ margin: 0 }}>Document 3</h3>
+          <MenuIcon icon="more_vert" position="bottom-right">
+            <MenuItem icon="visibility" label="View" onSelect={() => alert('View Document 3')} />
+            <MenuItem icon="edit" label="Edit" onSelect={() => alert('Edit Document 3')} />
+            <MenuItem icon="download" label="Download" onSelect={() => alert('Download Document 3')} />
+            <MenuSeparator />
+            <MenuItem icon="share" label="Share" onSelect={() => alert('Share Document 3')} />
+            <MenuSeparator />
+            <MenuItem icon="delete" label="Delete" onSelect={() => alert('Delete Document 3')} />
+          </MenuIcon>
+        </div>
+        <p style={{ color: '#666', fontSize: '14px' }}>Last modified: Last week</p>
+      </div>
+    </div>
+  </div>
+)
+
+/**
+ * Icon Sizes
+ */
+export const IconSizes = () => (
+  <div style={{ padding: '50px', display: 'flex', gap: '40px', alignItems: 'center' }}>
+    <div>
+      <p><strong>Small Icon</strong></p>
+      <MenuIcon icon="more_vert" size="small">
+        <MenuItem icon="edit" label="Edit" size="small" />
+        <MenuItem icon="delete" label="Delete" size="small" />
+      </MenuIcon>
+    </div>
+
+    <div>
+      <p><strong>Normal Icon (default)</strong></p>
+      <MenuIcon icon="more_vert" size="normal">
+        <MenuItem icon="edit" label="Edit" />
+        <MenuItem icon="delete" label="Delete" />
+      </MenuIcon>
+    </div>
+
+    <div>
+      <p><strong>Large Icon</strong></p>
+      <MenuIcon icon="more_vert" size="large">
+        <MenuItem icon="edit" label="Edit" size="large" />
+        <MenuItem icon="delete" label="Delete" size="large" />
+      </MenuIcon>
+    </div>
+  </div>
+)
+
+/**
+ * Different Icons
+ */
+export const DifferentIcons = () => (
+  <div style={{ padding: '50px', display: 'flex', gap: '40px', flexWrap: 'wrap' }}>
+    <div>
+      <p><strong>more_vert</strong></p>
+      <MenuIcon icon="more_vert">
+        <MenuItem icon="edit" label="Edit" />
+        <MenuItem icon="delete" label="Delete" />
+      </MenuIcon>
+    </div>
+
+    <div>
+      <p><strong>more_horiz</strong></p>
+      <MenuIcon icon="more_horiz">
+        <MenuItem icon="edit" label="Edit" />
+        <MenuItem icon="delete" label="Delete" />
+      </MenuIcon>
+    </div>
+
+    <div>
+      <p><strong>menu</strong></p>
+      <MenuIcon icon="menu">
+        <MenuItem icon="home" label="Home" />
+        <MenuItem icon="dashboard" label="Dashboard" />
+        <MenuItem icon="settings" label="Settings" />
+      </MenuIcon>
+    </div>
+
+    <div>
+      <p><strong>settings</strong></p>
+      <MenuIcon icon="settings">
+        <MenuItem icon="account_circle" label="Profile" />
+        <MenuItem icon="notifications" label="Notifications" />
+        <MenuItem icon="security" label="Security" />
+      </MenuIcon>
+    </div>
+
+    <div>
+      <p><strong>apps</strong></p>
+      <MenuIcon icon="apps">
+        <MenuItem icon="mail" label="Mail" />
+        <MenuItem icon="calendar_today" label="Calendar" />
+        <MenuItem icon="contacts" label="Contacts" />
+        <MenuItem icon="drive_file" label="Drive" />
+      </MenuIcon>
+    </div>
+
+    <div>
+      <p><strong>account_circle</strong></p>
+      <MenuIcon icon="account_circle">
+        <MenuItem icon="person" label="My Profile" />
+        <MenuItem icon="settings" label="Settings" />
+        <MenuSeparator />
+        <MenuItem icon="logout" label="Logout" />
+      </MenuIcon>
+    </div>
+  </div>
+)
+
+/**
+ * Long Menu with Scroll
+ */
+export const LongMenuWithScroll = () => (
+  <div style={{ padding: '50px' }}>
+    <h2>Long Menu (Scrollable)</h2>
+    <p>When menu has many items, it becomes scrollable (max-height: 50vh)</p>
+
+    <MenuIcon icon="list">
+      <MenuItem icon="filter_1" label="Item 1" onSelect={() => alert('Item 1')} />
+      <MenuItem icon="filter_2" label="Item 2" onSelect={() => alert('Item 2')} />
+      <MenuItem icon="filter_3" label="Item 3" onSelect={() => alert('Item 3')} />
+      <MenuItem icon="filter_4" label="Item 4" onSelect={() => alert('Item 4')} />
+      <MenuItem icon="filter_5" label="Item 5" onSelect={() => alert('Item 5')} />
+      <MenuItem icon="filter_6" label="Item 6" onSelect={() => alert('Item 6')} />
+      <MenuItem icon="filter_7" label="Item 7" onSelect={() => alert('Item 7')} />
+      <MenuItem icon="filter_8" label="Item 8" onSelect={() => alert('Item 8')} />
+      <MenuItem icon="filter_9" label="Item 9" onSelect={() => alert('Item 9')} />
+      <MenuSeparator />
+      <MenuItem icon="add" label="Add New Item" onSelect={() => alert('Add New')} />
+      <MenuItem icon="edit" label="Edit Items" onSelect={() => alert('Edit')} />
+      <MenuItem icon="delete" label="Delete All" onSelect={() => alert('Delete All')} />
+      <MenuSeparator />
+      <MenuItem icon="settings" label="Settings" onSelect={() => alert('Settings')} />
+      <MenuItem icon="help" label="Help" onSelect={() => alert('Help')} />
+      <MenuItem icon="info" label="About" onSelect={() => alert('About')} />
+    </MenuIcon>
+  </div>
+)
+
+/**
+ * Compact Menu Size
+ */
+export const CompactMenuSize = () => (
+  <div style={{ padding: '50px', display: 'flex', gap: '60px', alignItems: 'flex-start' }}>
+    <div>
+      <h3>Normal Menu (default)</h3>
+      <MenuIcon icon="window" menuSize="normal">
+        <MenuItem icon="view_stream" label="Cascade" onSelect={() => alert('Cascade')} />
+        <MenuItem icon="view_module" label="Tile" onSelect={() => alert('Tile')} />
+        <MenuSeparator />
+        <MenuItem icon="view_week" label="Columns" onSelect={() => alert('Columns')} />
+        <MenuItem icon="view_agenda" label="Rows" onSelect={() => alert('Rows')} />
+        <MenuSeparator />
+        <MenuItem icon="center_focus_strong" label="Center All" onSelect={() => alert('Center All')} />
+        <MenuItem icon="clear_all" label="Clear All" onSelect={() => alert('Clear All')} />
+      </MenuIcon>
+    </div>
+
+    <div>
+      <h3>Compact Menu</h3>
+      <MenuIcon icon="window" menuSize="compact">
+        <MenuItem icon="view_stream" label="Cascade" onSelect={() => alert('Cascade')} />
+        <MenuItem icon="view_module" label="Tile" onSelect={() => alert('Tile')} />
+        <MenuSeparator />
+        <MenuItem icon="view_week" label="Columns" onSelect={() => alert('Columns')} />
+        <MenuItem icon="view_agenda" label="Rows" onSelect={() => alert('Rows')} />
+        <MenuSeparator />
+        <MenuItem icon="center_focus_strong" label="Center All" onSelect={() => alert('Center All')} />
+        <MenuItem icon="clear_all" label="Clear All" onSelect={() => alert('Clear All')} />
+      </MenuIcon>
+    </div>
+
+    <div>
+      <h3>Compact with Small Icon</h3>
+      <MenuIcon icon="window" size="small" menuSize="compact">
+        <MenuItem icon="view_stream" label="Cascade" onSelect={() => alert('Cascade')} />
+        <MenuItem icon="view_module" label="Tile" onSelect={() => alert('Tile')} />
+        <MenuSeparator />
+        <MenuItem icon="view_week" label="Columns" onSelect={() => alert('Columns')} />
+        <MenuItem icon="view_agenda" label="Rows" onSelect={() => alert('Rows')} />
+        <MenuSeparator />
+        <MenuItem icon="center_focus_strong" label="Center All" onSelect={() => alert('Center All')} />
+        <MenuItem icon="clear_all" label="Clear All" onSelect={() => alert('Clear All')} />
+      </MenuIcon>
+    </div>
+  </div>
+)
+
+/**
+ * Taskbar Simulation
+ */
+export const TaskbarSimulation = () => (
+  <div style={{ padding: '50px' }}>
+    <h2>Taskbar Menu Example</h2>
+    <p>Compact menu as used in Desktop Taskbar</p>
+
+    <div style={{
+      background: 'linear-gradient(180deg, #2c3e50 0%, #34495e 100%)',
+      padding: '8px 16px',
+      display: 'flex',
+      alignItems: 'center',
+      gap: '12px',
+      borderRadius: '4px',
+      boxShadow: '0 2px 8px rgba(0,0,0,0.2)'
+    }}>
+      <button style={{
+        background: 'rgba(255,255,255,0.1)',
+        border: 'none',
+        color: 'white',
+        padding: '6px 12px',
+        borderRadius: '3px',
+        cursor: 'pointer'
+      }}>
+        Start
+      </button>
+
+      <div style={{ flex: 1 }}></div>
+
+      <MenuIcon
+        icon="window"
+        size="small"
+        position="top-right"
+        menuSize="compact"
+      >
+        <MenuItem icon="view_stream" label="Cascade" onSelect={() => alert('Cascade')} />
+        <MenuItem icon="view_module" label="Tile" onSelect={() => alert('Tile')} />
+        <MenuSeparator />
+        <MenuItem icon="view_week" label="Columns" onSelect={() => alert('Columns')} />
+        <MenuItem icon="view_agenda" label="Rows" onSelect={() => alert('Rows')} />
+        <MenuSeparator />
+        <MenuItem icon="center_focus_strong" label="Center All" onSelect={() => alert('Center All')} />
+        <MenuItem icon="clear_all" label="Clear All" onSelect={() => alert('Clear All')} />
+      </MenuIcon>
+
+      <span style={{ color: 'white', fontSize: '12px', marginLeft: '8px' }}>
+        1200×600
+      </span>
+    </div>
+  </div>
+)
+
+/**
+ * Backwards Compatibility (align prop)
+ */
+export const BackwardsCompatibility = () => (
+  <div style={{ padding: '50px', display: 'flex', gap: '40px' }}>
+    <div>
+      <p><strong>align="left" (deprecated)</strong></p>
+      <MenuIcon icon="more_vert" align="left">
+        <MenuItem icon="edit" label="Edit" />
+        <MenuItem icon="delete" label="Delete" />
+      </MenuIcon>
+    </div>
+
+    <div>
+      <p><strong>align="right" (deprecated)</strong></p>
+      <MenuIcon icon="more_vert" align="right">
+        <MenuItem icon="edit" label="Edit" />
+        <MenuItem icon="delete" label="Delete" />
+      </MenuIcon>
+    </div>
+
+    <div>
+      <p><strong>position="bottom-left" (new)</strong></p>
+      <MenuIcon icon="more_vert" position="bottom-left">
+        <MenuItem icon="edit" label="Edit" />
+        <MenuItem icon="delete" label="Delete" />
+      </MenuIcon>
+    </div>
+
+    <div>
+      <p><strong>position="bottom-right" (new)</strong></p>
+      <MenuIcon icon="more_vert" position="bottom-right">
+        <MenuItem icon="edit" label="Edit" />
+        <MenuItem icon="delete" label="Delete" />
+      </MenuIcon>
+    </div>
+  </div>
+)

package/src/html/menu.css

@@ -1,5 +1,6 @@
 .menu-icon {
   position: relative;
+  display: inline-block;
 }
 
 /* Solución simple: z-index muy alto para que aparezca por encima de todo */
@@ -17,8 +18,6 @@
 .menu-icon > menu {
   z-index: 9999;
   position: absolute;
-  top: 3rem;
-  left: 0px;
   margin: 0;
   border: solid 1px var(--divider-color);
   background-color: var(--paper-color);
@@ -28,16 +27,68 @@
   max-height: 50vh;
   overflow: auto;
   box-shadow: var(--shadow1);
+  border-radius: 4px;
+}
+
+/* Position: Bottom Left (default) */
+.menu-icon > menu.position-bottom-left {
+  top: calc(100% + 0.25rem);
+  left: 0;
+}
+
+/* Position: Bottom Right */
+.menu-icon > menu.position-bottom-right {
+  top: calc(100% + 0.25rem);
+  right: 0;
+}
+
+/* Position: Top Left */
+.menu-icon > menu.position-top-left {
+  bottom: calc(100% + 0.25rem);
+  left: 0;
+}
+
+/* Position: Top Right */
+.menu-icon > menu.position-top-right {
+  bottom: calc(100% + 0.25rem);
+  right: 0;
+}
+
+/* Position: Left */
+.menu-icon > menu.position-left {
+  right: calc(100% + 0.25rem);
+  top: 0;
+}
+
+/* Position: Right */
+.menu-icon > menu.position-right {
+  left: calc(100% + 0.25rem);
+  top: 0;
+}
+
+/* Position: Top (centered) */
+.menu-icon > menu.position-top {
+  bottom: calc(100% + 0.25rem);
+  left: 50%;
+  transform: translateX(-50%);
 }
 
+/* Position: Bottom (centered) */
+.menu-icon > menu.position-bottom {
+  top: calc(100% + 0.25rem);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+/* Backwards compatibility */
 .menu-icon > menu.alignRight {
-  left: unset;
-  right: 0px;
+  top: calc(100% + 0.25rem);
+  right: 0;
 }
 
 .menu-icon > menu.alignLeft {
-  left: 0px;
-  right: unset;
+  top: calc(100% + 0.25rem);
+  left: 0;
 }
 
 .menu-icon > menu ul {
@@ -94,3 +145,31 @@
   height: 1px;
   border-top: solid 1px var(--divider-color);
 }
+
+/* ============================================
+   COMPACT MENU VARIANT
+   ============================================ */
+
+.menu-icon > menu.menu-compact {
+  min-width: 6rem;
+  max-width: 12rem;
+  font-size: 0.85rem;
+}
+
+.menu-icon > menu.menu-compact li {
+  min-height: 2rem;
+  padding: 0 0.4rem;
+}
+
+.menu-icon > menu.menu-compact .menu-item > label {
+  font-size: 0.75rem;
+  padding: 0 0.4rem 0 0;
+}
+
+.menu-icon > menu.menu-compact .menu-item > .meta {
+  font-size: 0.7rem;
+}
+
+.menu-icon > menu.menu-compact .menu-separator {
+  margin: 0.2rem 0;
+}