Menu Right buttons interface content
1 .gg-menu-right { 2 transform: scale(var(--ggs,1 ))
3 } 4 5 .gg-menu-right,
6 .gg-menu-right::after ,
7 .gg-menu-right::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-right::after ,
18 .gg-menu-right::before { 19 content: "";
20 position: absolute;
21 top: -6px ;
22 right: 0 ;
23 width: 10px 24 } 25 26 .gg-menu-right::after { 27 top: 6px ;
28 width: 14px 29 }
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="M22 18.0048 C22 18.5544 21.5544 19 21.0048 19 H12.9952 C12.4456 19 12 18.5544 12 18.0048 C12 17.4552 12.4456 17.0096 12.9952 17.0096 H21.0048 C21.5544 17.0096 22 17.4552 22 18.0048 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M22 12.0002 C22 12.5499 21.5544 12.9954 21.0048 12.9954 H2.99519 C2.44556 12.9954 2 12.5499 2 12.0002 C2 11.4506 2.44556 11.0051 2.99519 11.0051 H21.0048 C21.5544 11.0051 22 11.4506 22 12.0002 Z" 14 fill="currentColor" 15 /> 16 <path 17 d="M21.0048 6.99039 C21.5544 6.99039 22 6.54482 22 5.99519 C22 5.44556 21.5544 5 21.0048 5 H8.99519 C8.44556 5 8 5.44556 8 5.99519 C8 6.54482 8.44556 6.99039 8.99519 6.99039 H21.0048 Z" 18 fill="currentColor" 19 /> 20 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledMenuRight = 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 right: 0 ;25 width: 10px ;26 } 27 &::after { 28 top: 6px ;29 width: 14px ;30 } 31 ` 32 33 export const MenuRight = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 34 (props, ref) => { 35 return ( 36 <> 37 <StyledMenuRight { ...props} ref={ ref} icon-role="menu-right" /> 38 </> 39 ) 40 } , 41 ) 42
Menu Right developed into a magic pure CSS icon created by applying properties like: transform, width, height, border-radius, background,
