const ownerId = "agwaze.near"; const createSelected = ( <svg width="25" height="23" viewBox="0 0 25 23" fill="none" xmlns="http://www.w3.org/2000/svg" > <g clip-path="url(#clip0_9_5)"> <path d="M3.125 15.6875V19.75H7.03125L18.5521 7.76836L14.6458 3.70586L3.125 15.6875ZM21.5729 4.62669C21.9792 4.20419 21.9792 3.52169 21.5729 3.09919L19.1354 0.564189C18.7292 0.141689 18.0729 0.141689 17.6667 0.564189L15.7604 2.54669L19.6667 6.60919L21.5729 4.62669Z" fill="#0D99FF" /> </g> <defs> <clipPath id="clip0_9_5"> <rect width="25" height="26" fill="white" transform="translate(0 -3)" /> </clipPath> </defs> </svg> ); const create = ( <svg width="25" height="23" viewBox="0 0 25 23" fill="none" xmlns="http://www.w3.org/2000/svg" > <g clip-path="url(#clip0_9_5)"> <path d="M3.125 15.6875V19.75H7.03125L18.5521 7.76836L14.6458 3.70586L3.125 15.6875ZM21.5729 4.62669C21.9792 4.20419 21.9792 3.52169 21.5729 3.09919L19.1354 0.564189C18.7292 0.141689 18.0729 0.141689 17.6667 0.564189L15.7604 2.54669L19.6667 6.60919L21.5729 4.62669Z" fill="black" /> </g> <defs> <clipPath id="clip0_9_5"> <rect width="25" height="26" fill="white" transform="translate(0 -3)" /> </clipPath> </defs> </svg> ); const list = ( <svg width="25" height="23" viewBox="0 0 25 23" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M0.5 11.5C0.5 10.4422 1.23904 9.7 2.02703 9.7C2.81502 9.7 3.55405 10.4422 3.55405 11.5C3.55405 12.5578 2.81502 13.3 2.02703 13.3C1.23904 13.3 0.5 12.5578 0.5 11.5ZM0.5 2.3C0.5 1.24225 1.23904 0.5 2.02703 0.5C2.81502 0.5 3.55405 1.24225 3.55405 2.3C3.55405 3.35775 2.81502 4.1 2.02703 4.1C1.23904 4.1 0.5 3.35775 0.5 2.3ZM0.5 20.7C0.5 19.6553 1.24104 18.9 2.02703 18.9C2.81301 18.9 3.55405 19.6553 3.55405 20.7C3.55405 21.7424 2.8015 22.5 2.02703 22.5C1.25255 22.5 0.5 21.7424 0.5 20.7ZM24.5 19.6667V21.7333H6.58108V19.6667H24.5ZM24.5 10.4667V12.5333H6.58108V10.4667H24.5ZM24.5 3.33333H6.58108V1.26667H24.5V3.33333Z" fill="black" /> <path d="M0.5 11.5C0.5 10.4422 1.23904 9.7 2.02703 9.7C2.81502 9.7 3.55405 10.4422 3.55405 11.5C3.55405 12.5578 2.81502 13.3 2.02703 13.3C1.23904 13.3 0.5 12.5578 0.5 11.5ZM0.5 2.3C0.5 1.24225 1.23904 0.5 2.02703 0.5C2.81502 0.5 3.55405 1.24225 3.55405 2.3C3.55405 3.35775 2.81502 4.1 2.02703 4.1C1.23904 4.1 0.5 3.35775 0.5 2.3ZM0.5 20.7C0.5 19.6553 1.24104 18.9 2.02703 18.9C2.81301 18.9 3.55405 19.6553 3.55405 20.7C3.55405 21.7424 2.8015 22.5 2.02703 22.5C1.25255 22.5 0.5 21.7424 0.5 20.7ZM24.5 19.6667V21.7333H6.58108V19.6667H24.5ZM24.5 10.4667V12.5333H6.58108V10.4667H24.5ZM24.5 3.33333H6.58108V1.26667H24.5V3.33333Z" stroke="black" /> <path d="M0.5 11.5C0.5 10.4422 1.23904 9.7 2.02703 9.7C2.81502 9.7 3.55405 10.4422 3.55405 11.5C3.55405 12.5578 2.81502 13.3 2.02703 13.3C1.23904 13.3 0.5 12.5578 0.5 11.5ZM0.5 2.3C0.5 1.24225 1.23904 0.5 2.02703 0.5C2.81502 0.5 3.55405 1.24225 3.55405 2.3C3.55405 3.35775 2.81502 4.1 2.02703 4.1C1.23904 4.1 0.5 3.35775 0.5 2.3ZM0.5 20.7C0.5 19.6553 1.24104 18.9 2.02703 18.9C2.81301 18.9 3.55405 19.6553 3.55405 20.7C3.55405 21.7424 2.8015 22.5 2.02703 22.5C1.25255 22.5 0.5 21.7424 0.5 20.7ZM24.5 19.6667V21.7333H6.58108V19.6667H24.5ZM24.5 10.4667V12.5333H6.58108V10.4667H24.5ZM24.5 3.33333H6.58108V1.26667H24.5V3.33333Z" stroke="black" stroke-opacity="0.2" /> </svg> ); const listSelected = ( <svg width="25" height="23" viewBox="0 0 25 23" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M0.5 11.5C0.5 10.4422 1.23904 9.7 2.02703 9.7C2.81502 9.7 3.55405 10.4422 3.55405 11.5C3.55405 12.5578 2.81502 13.3 2.02703 13.3C1.23904 13.3 0.5 12.5578 0.5 11.5ZM0.5 2.3C0.5 1.24225 1.23904 0.5 2.02703 0.5C2.81502 0.5 3.55405 1.24225 3.55405 2.3C3.55405 3.35775 2.81502 4.1 2.02703 4.1C1.23904 4.1 0.5 3.35775 0.5 2.3ZM0.5 20.7C0.5 19.6553 1.24104 18.9 2.02703 18.9C2.81301 18.9 3.55405 19.6553 3.55405 20.7C3.55405 21.7424 2.8015 22.5 2.02703 22.5C1.25255 22.5 0.5 21.7424 0.5 20.7ZM24.5 19.6667V21.7333H6.58108V19.6667H24.5ZM24.5 10.4667V12.5333H6.58108V10.4667H24.5ZM24.5 3.33333H6.58108V1.26667H24.5V3.33333Z" fill="#0D99FF" /> <path d="M0.5 11.5C0.5 10.4422 1.23904 9.7 2.02703 9.7C2.81502 9.7 3.55405 10.4422 3.55405 11.5C3.55405 12.5578 2.81502 13.3 2.02703 13.3C1.23904 13.3 0.5 12.5578 0.5 11.5ZM0.5 2.3C0.5 1.24225 1.23904 0.5 2.02703 0.5C2.81502 0.5 3.55405 1.24225 3.55405 2.3C3.55405 3.35775 2.81502 4.1 2.02703 4.1C1.23904 4.1 0.5 3.35775 0.5 2.3ZM0.5 20.7C0.5 19.6553 1.24104 18.9 2.02703 18.9C2.81301 18.9 3.55405 19.6553 3.55405 20.7C3.55405 21.7424 2.8015 22.5 2.02703 22.5C1.25255 22.5 0.5 21.7424 0.5 20.7ZM24.5 19.6667V21.7333H6.58108V19.6667H24.5ZM24.5 10.4667V12.5333H6.58108V10.4667H24.5ZM24.5 3.33333H6.58108V1.26667H24.5V3.33333Z" stroke="black" /> <path d="M0.5 11.5C0.5 10.4422 1.23904 9.7 2.02703 9.7C2.81502 9.7 3.55405 10.4422 3.55405 11.5C3.55405 12.5578 2.81502 13.3 2.02703 13.3C1.23904 13.3 0.5 12.5578 0.5 11.5ZM0.5 2.3C0.5 1.24225 1.23904 0.5 2.02703 0.5C2.81502 0.5 3.55405 1.24225 3.55405 2.3C3.55405 3.35775 2.81502 4.1 2.02703 4.1C1.23904 4.1 0.5 3.35775 0.5 2.3ZM0.5 20.7C0.5 19.6553 1.24104 18.9 2.02703 18.9C2.81301 18.9 3.55405 19.6553 3.55405 20.7C3.55405 21.7424 2.8015 22.5 2.02703 22.5C1.25255 22.5 0.5 21.7424 0.5 20.7ZM24.5 19.6667V21.7333H6.58108V19.6667H24.5ZM24.5 10.4667V12.5333H6.58108V10.4667H24.5ZM24.5 3.33333H6.58108V1.26667H24.5V3.33333Z" stroke="#0D99FF" /> </svg> ); const speakers = ( <svg width="20" height="25" viewBox="0 0 20 30" fill="none" xmlns="http://www.w3.org/2000/svg" > <g clip-path="url(#clip0_7_6)"> <path d="M9.99695 0L9.77859 0.683453V20.5157L9.99695 20.7164L19.994 15.2748L9.99695 0Z" fill="#343434" /> <path d="M9.99703 0L0 15.2748L9.99703 20.7165V11.0905V0Z" fill="#8C8C8C" /> <path d="M9.99695 22.4595L9.8739 22.5976V29.6623L9.99695 29.9933L19.9999 17.0206L9.99695 22.4595Z" fill="#3C3C3B" /> <path d="M9.99703 29.9932V22.4594L0 17.0205L9.99703 29.9932Z" fill="#8C8C8C" /> <path d="M9.99695 20.7164L19.9938 15.2749L9.99695 11.0906V20.7164Z" fill="#141414" /> <path d="M0.000305176 15.2749L9.99718 20.7164V11.0906L0.000305176 15.2749Z" fill="#393939" /> </g> <defs> <clipPath id="clip0_7_6"> <rect width="20" height="30" fill="white" /> </clipPath> </defs> </svg> ); const NavItem = styled.a` position: relative; cursor: pointer; padding: 0.5em; margin: 1.5em 0; font-style: normal; font-weight: 600; font-size: 0.8em; line-height: 1em; color: #3a3f42; border-radius: 5px; text-decoration: none; transition: background-color 0.2s ease-in-out; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.75em; @media screen and (max-width: 768px) { width: 100%; flex-direction: row; } &:hover { color: #667085; text-decoration: none; background-color: #f9fafb; } span { display: flex; align-items: center; justify-content: center; font-size: 16px; text-align: center; } `; const NavSelected = styled.div` color: #0d99ff; display: flex; align-items: center; justify-content: center; font-size: 16px; text-align: center; `; const navItem = ({ text, icon, id, iconSelected }) => ( <NavItem href={`#/${ownerId}/widget/GenaDrop.index?tab=${id}`} onClick={() => { () => props.update({ tab: id }); }} > {id === props.tab ? iconSelected : icon} {id === props.tab ? <NavSelected>{text}</NavSelected> : <span>{text}</span>} </NavItem> ); const NavContainer = styled.div` display: flex; flex-direction: column; margin-right: 2.5em; gap: 0.8em; background: linear-gradient(180deg,#e4f1fb 0%, rgba(0,255,0,0) 3%); background: -webkit-linear-gradient(180deg,#e4f1fb 0%, rgba(0,255,0,0) 3%); background: -moz-linear-gradient(270deg,#e4f1fb 0%, rgba(0,255,0,0) 3%); @media screen and (max-width: 768px) { width: 100%; } `; const rotateLeft = styled.keyframes` from { transform: rotate(0deg); } to { transform: rotate(-90deg); } `; const rotateRight = styled.keyframes` from { transform: rotate(-90deg); } to { transform: rotate(0deg); } `; const Trigger = styled("Collapsible.Trigger")` display: flex; flex-direction: row; align-items: center; justify-content: center; border-radius: 100px; padding: 0.5em; border: none; background-color: #f9fafb; transition: transform 0.25s ease-in-out; width: 40px; height: 40px; &[data-state="open"] { transform: rotate(-90deg); } &[data-state="closed"] { transform: rotate(0deg); } `; const slideRight = styled.keyframes` from { width: 0; height: 0; } to { width: var(--radix-collapsible-content-width); height: var(--radix-collapsible-content-height); } `; const slideLeft = styled.keyframes` from { width: var(--radix-collapsible-content-width); height: var(--radix-collapsible-content-height); } to { width: 0; height: 0; } `; const Content = styled("Collapsible.Content")` width: 100%; overflow: hidden; &[data-state="open"] { animation: ${slideRight} 0.25s ease-out; } &[data-state="closed"] { animation: ${slideLeft} 0.25s ease-out; } `; const Root = styled("Collapsible.Root")` dislay: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; transition: all 0.25s ease-in-out; gap: 1.5em; width: 100%; margin-bottom: 1.5em; &[data-state="open"] { display: flex; } &[data-state="closed"] { display: flex; } `; const Divider = styled.hr` background-color: #eceef0; height: 1px; border: none; width: 100%; `; const content = ( <NavContainer> {navItem({ text: "Create", id: "create", icon: create, iconSelected: createSelected, })} {navItem({ text: "List Near NFT", id: "list", icon: list, iconSelected: listSelected, })} {navItem({ text: "Near NFTS", id: "nearNFts", icon: <Widget src="agwaze.near/widget/GenaDrop.NearLogo" />, iconSelected: <Widget src="agwaze.near/widget/GenaDrop.NearLogo" />, })} {navItem({ text: "EVM NFTS", id: "evmNFTs", icon: speakers, iconSelected: speakers, })} <Divider /> </NavContainer> ); if (props.collapsible) { return ( <Root> <Trigger> <svg width="20" height="14" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M1 7H19M1 1H19M1 13H19" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg> </Trigger> <Content>{content}</Content> </Root> ); } return content;