Menu content buttons interface
1 .gg-menu { 2 transform: scale(var(--ggs,1 ))
3 } 4 5 .gg-menu,
6 .gg-menu::after ,
7 .gg-menu::before { 8 box-sizing: border-box;
9 position: relative;
10 display: block;
11 width: 20px ;
12 height: 2px ;
13 border-radius: 3px ;
14 background: currentColor
15 } 16 17 .gg-menu::after ,
18 .gg-menu::before { 19 content: "";
20 position: absolute;
21 top: -6px 22 } 23 24 .gg-menu::after { 25 top: 6px 26 }
1 <svg 2 width="24 " 3 height="24 " 4 viewBox="0 0 24 24 " 5 fill="none" 6 xmlns="http://www.w3 .org/2000 /svg" 7 > 8 <path 9 d="M2 6 C2 5.44772 2.44772 5 3 5 H21 C21.5523 5 22 5.44772 22 6 C22 6.55228 21.5523 7 21 7 H3 C2.44772 7 2 6.55228 2 6 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M2 12.0322 C2 11.4799 2.44772 11.0322 3 11.0322 H21 C21.5523 11.0322 22 11.4799 22 12.0322 C22 12.5845 21.5523 13.0322 21 13.0322 H3 C2.44772 13.0322 2 12.5845 2 12.0322 Z" 14 fill="currentColor" 15 /> 16 <path 17 d="M3 17.0645 C2.44772 17.0645 2 17.5122 2 18.0645 C2 18.6167 2.44772 19.0645 3 19.0645 H21 C21.5523 19.0645 22 18.6167 22 18.0645 C22 17.5122 21.5523 17.0645 21 17.0645 H3 Z" 18 fill="currentColor" 19 /> 20 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledMenu = styled.i` 5 & { 6 transform: scale(var(--ggs, 1 ));7 } 8 &, 9 &::after , 10 &::before { 11 box-sizing: border-box;12 position: relative;13 display: block;14 width: 20px ;15 height: 2px ;16 border-radius: 3px ;17 background: currentColor;18 } 19 &::after , 20 &::before { 21 content: '';22 position: absolute;23 top: -6px ;24 } 25 &::after { 26 top: 6px ;27 } 28 ` 29 30 export const Menu = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 31 (props, ref) => { 32 return ( 33 <> 34 <StyledMenu { ...props} ref={ ref} icon-role="menu" /> 35 </> 36 ) 37 } , 38 ) 39
Menu ended up a magic 100% CSS icon made by practicing features as follows: transform, width, height, border-radius, background, .gg-menu,
