diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx index 49ffcf2387..1c8bebbaf7 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx +++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx @@ -84,49 +84,54 @@ const Icon = ({iconRecord, verticalIconPlugin, contextMenuAction, theme}: IconPr } }, []) + + const stylePC = iconRecord.active ? 'flex-start' : 'center' return ( <> - -
{ - ;(verticalIconPlugin as any).toggle(name) - }} - {...{plugin: name}} - onContextMenu={(e: any) => { - e.preventDefault() - e.stopPropagation() - handleContextMenu(e) - }} - data-id={`verticalIconsKind${name}`} - id={`verticalIconsKind${name}`} - ref={iconRef} +
+ {iconRecord.active &&
} + - {name} { + ;(verticalIconPlugin as any).toggle(name) + }} + {...{plugin: name}} + onContextMenu={(e: any) => { + e.preventDefault() + e.stopPropagation() + handleContextMenu(e) + }} + data-id={`verticalIconsKind${name}`} + id={`verticalIconsKind${name}`} + ref={iconRef} + > + {name} + +
+ + {showContext ? ( + - -
-
- {showContext ? ( - - ) : null} + ) : null} + ) } diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css index 393ee84773..66287f32fa 100644 --- a/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css +++ b/libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css @@ -3,7 +3,9 @@ width: 42px; height: 42px; cursor: pointer; - } + justify-content: space-between; + align-self: center; +} .remixui_homeIcon:hover { box-shadow: 0px 0px 14px -7px; } @@ -17,8 +19,6 @@ .remixui_icons { display: flex; flex-flow: column nowrap; - justify-content: space-between; - align-items: center; } .remixui_icon:hover { box-shadow: 0px 0px 14px -7px;