Menu - Copy this React, Tailwind Component to your project

:root { menu debug: none; menu height: 83%; menu small width: 40%; menu large width: 58%; menu bg color: radial gradient(31.98% 56.85% at 50% 50%, rgba(26, 29, 41, 0.95) 0%, rgba(34, 37, 48, 0.97) 100%); menu shadow color: #000000; menu sidebar color: radial gradient(31.98% 56.85% at 50% 50%, rgba(26, 29, 41, 0.95) 0%, rgba(34, 37, 48, 0.97) 100%); menu border color: radial gradient(31.98% 56.85% at 50% 50%, rgba(26, 29, 41, 0.95) 0%, rgba(34, 37, 48, 0.97) 100%); menu sidebar selected color: rgb(40, 65, 109); sizechange bg color: gray; sizechange bg color hover: rgb(82, 82, 82); currenttarget bg color: radial gradient(31.98% 56.85% at 50% 50%, rgba(26, 29, 41, 0.95) 0%, rgba(34, 37, 48, 0.97) 100%); chats page message me: rgb(35, 49, 77); chats page message other: #3c3c3e; chats page message time: #99999b; color black: black; color white: white; color whitesmoke: whitesmoke; color blue: blue; color lightblue: lightblue; color green: green; color lightgreen: lightgreen; color yellow: yellow; color lightyellow: lightyellow; color aqua: aqua; color purple: purple; color gray: gray; color red: red; } .menu main container { display: var( menu debug); position: absolute; height: var( menu height); width: var( menu large width); right: 19%; top: 50%; transform: translateY( 50%); border radius: 15px; background: radial gradient(31.98% 56.85% at 50% 50%, rgba(26, 29, 41, 0.95) 0%, rgba(34, 37, 48, 0.97) 100%); moz box shadow: 0 0 4px 0 var( menu shadow color); webkit box shadow: 0 0 4px 0 var( menu shadow color); box shadow: 0 0 4px 0 var( menu shadow color); transition: width 0.4s ease in out, right 0.4s ease in out; }