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 people = ( <svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M15.1563 19.74C16.4966 18.8477 17.5141 17.5479 18.0584 16.0326C18.6028 14.5173 18.645 12.867 18.1789 11.3259C17.7129 9.78472 16.7632 8.43447 15.4703 7.47479C14.1775 6.51511 12.6102 5.99696 11.0001 5.99696C9.38997 5.99696 7.82261 6.51511 6.52978 7.47479C5.23694 8.43447 4.28726 9.78472 3.82118 11.3259C3.35509 12.867 3.39734 14.5173 3.94168 16.0326C4.48603 17.5479 5.50356 18.8477 6.84381 19.74C4.41943 20.6336 2.34894 22.287 0.941312 24.4538C0.867332 24.5637 0.815945 24.6873 0.790139 24.8173C0.764332 24.9473 0.764621 25.0811 0.790989 25.2109C0.817356 25.3408 0.869276 25.4642 0.94373 25.5738C1.01818 25.6834 1.11369 25.7772 1.22469 25.8496C1.33569 25.922 1.45998 25.9716 1.59032 25.9955C1.72067 26.0195 1.85447 26.0173 1.98396 25.9891C2.11344 25.9608 2.23603 25.9072 2.34458 25.8311C2.45314 25.7551 2.54551 25.6583 2.61631 25.5463C3.5243 24.1497 4.76676 23.0022 6.23086 22.2077C7.69496 21.4133 9.33432 20.9972 11.0001 20.9972C12.6658 20.9972 14.3052 21.4133 15.7693 22.2077C17.2334 23.0022 18.4758 24.1497 19.3838 25.5463C19.5305 25.7642 19.7571 25.9158 20.0145 25.968C20.272 26.0203 20.5397 25.9691 20.7598 25.8256C20.9799 25.6821 21.1346 25.4577 21.1906 25.201C21.2465 24.9443 21.1992 24.6759 21.0588 24.4538C19.6512 22.287 17.5807 20.6336 15.1563 19.74ZM5.50006 13.5C5.50006 12.4122 5.82263 11.3488 6.42698 10.4444C7.03133 9.5399 7.89031 8.83495 8.8953 8.41867C9.9003 8.00239 11.0062 7.89347 12.0731 8.10569C13.14 8.31791 14.12 8.84173 14.8891 9.61092C15.6583 10.3801 16.1822 11.3601 16.3944 12.427C16.6066 13.4939 16.4977 14.5998 16.0814 15.6048C15.6651 16.6098 14.9602 17.4687 14.0557 18.0731C13.1512 18.6774 12.0879 19 11.0001 19C9.54188 18.9984 8.14389 18.4184 7.1128 17.3873C6.08171 16.3562 5.50172 14.9582 5.50006 13.5ZM31.7676 25.8375C31.5454 25.9824 31.2749 26.033 31.0154 25.9784C30.7559 25.9238 30.5287 25.7684 30.3838 25.5463C29.4769 24.1489 28.2346 23.0008 26.7702 22.2067C25.3058 21.4126 23.6659 20.9978 22.0001 21C21.7348 21 21.4805 20.8947 21.293 20.7071C21.1054 20.5196 21.0001 20.2652 21.0001 20C21.0001 19.7348 21.1054 19.4804 21.293 19.2929C21.4805 19.1054 21.7348 19 22.0001 19C22.81 18.9992 23.6098 18.8196 24.3423 18.4739C25.0748 18.1282 25.7219 17.625 26.2373 17.0002C26.7528 16.3755 27.1239 15.6445 27.3242 14.8597C27.5244 14.0749 27.5488 13.2555 27.3957 12.4602C27.2426 11.6648 26.9157 10.9131 26.4383 10.2588C25.961 9.60438 25.345 9.06352 24.6344 8.6748C23.9239 8.28608 23.1362 8.0591 22.3277 8.01009C21.5192 7.96107 20.7099 8.09123 19.9576 8.39126C19.8349 8.44428 19.7028 8.47219 19.5692 8.47332C19.4356 8.47445 19.3031 8.44878 19.1795 8.39783C19.056 8.34688 18.9439 8.27169 18.8499 8.17669C18.7559 8.0817 18.6819 7.96882 18.6323 7.84474C18.5827 7.72066 18.5584 7.58789 18.5609 7.45428C18.5635 7.32067 18.5928 7.18892 18.6471 7.06682C18.7015 6.94472 18.7797 6.83476 18.8772 6.74341C18.9748 6.65207 19.0897 6.5812 19.2151 6.53501C20.9369 5.84832 22.852 5.82361 24.591 6.46564C26.33 7.10767 27.7696 8.37095 28.6321 10.0118C29.4946 11.6526 29.7189 13.5547 29.2617 15.3512C28.8045 17.1476 27.6982 18.7111 26.1563 19.74C28.5807 20.6336 30.6512 22.287 32.0588 24.4538C32.2037 24.6759 32.2543 24.9464 32.1997 25.2059C32.1451 25.4654 31.9897 25.6926 31.7676 25.8375Z" fill="black" /> </svg> ); const peopleSelected = ( <svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M21.0587 24.4538C21.1571 24.6046 21.2129 24.7793 21.2202 24.9593C21.2276 25.1393 21.1862 25.3179 21.1004 25.4763C21.0146 25.6347 20.8876 25.7669 20.7328 25.8591C20.5781 25.9513 20.4013 26 20.2212 26H1.77869C1.59856 26 1.42178 25.9513 1.26702 25.8591C1.11227 25.7669 0.985293 25.6347 0.899504 25.4763C0.813715 25.3179 0.772302 25.1393 0.779639 24.9593C0.786975 24.7793 0.84279 24.6046 0.941187 24.4538C2.34882 22.287 4.4193 20.6336 6.84369 19.74C5.50343 18.8477 4.4859 17.5479 3.94156 16.0326C3.39722 14.5173 3.35496 12.867 3.82105 11.3259C4.28714 9.78472 5.23681 8.43447 6.52965 7.47479C7.82249 6.51511 9.38984 5.99696 10.9999 5.99696C12.61 5.99696 14.1774 6.51511 15.4702 7.47479C16.7631 8.43447 17.7127 9.78472 18.1788 11.3259C18.6449 12.867 18.6027 14.5173 18.0583 16.0326C17.514 17.5479 16.4964 18.8477 15.1562 19.74C17.5806 20.6336 19.6511 22.287 21.0587 24.4538ZM32.0474 24.435C30.6394 22.2774 28.5736 20.631 26.1562 19.74C27.7384 18.6742 28.855 17.0455 29.2788 15.1854C29.7025 13.3254 29.4015 11.3737 28.437 9.72779C27.4725 8.08184 25.917 6.8653 24.0871 6.32579C22.2573 5.78628 20.2906 5.96435 18.5874 6.82376C18.5223 6.85738 18.4654 6.90492 18.4207 6.96299C18.3759 7.02107 18.3445 7.08827 18.3287 7.15982C18.3128 7.23138 18.3129 7.30555 18.3289 7.37709C18.3449 7.44862 18.3764 7.51576 18.4212 7.57376C19.6876 9.15352 20.415 11.0973 20.4966 13.1204C20.5783 15.1435 20.01 17.1396 18.8749 18.8163C18.8016 18.9258 18.7745 19.0599 18.7995 19.1894C18.8246 19.3189 18.8997 19.4332 19.0087 19.5075C20.4886 20.5404 21.7554 21.8488 22.7399 23.3613C23.137 23.9693 23.2992 24.7011 23.1962 25.42C23.1846 25.4915 23.1887 25.5647 23.2082 25.6345C23.2276 25.7042 23.2621 25.769 23.309 25.8241C23.356 25.8793 23.4144 25.9236 23.4801 25.9539C23.5459 25.9843 23.6175 26 23.6899 26H31.2274C31.4476 26.0001 31.6617 25.9275 31.8364 25.7934C32.0111 25.6594 32.1367 25.4715 32.1937 25.2588C32.2285 25.1189 32.2334 24.9732 32.2082 24.8313C32.183 24.6894 32.1282 24.5544 32.0474 24.435Z" fill="#0D99FF" /> </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: 10px; text-align: center; } `; const NavSelected = styled.div` color: #0d99ff; display: flex; align-items: center; justify-content: center; font-size: 10px; text-align: center; `; const navItem = ({ text, icon, id, iconSelected, href }) => ( <NavItem href={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, })} {navItem({ text: "Socials", id: "socials", icon: people, iconSelected: peopleSelected, href: "#/genadrop.near/widget/GenaDrop.Home", })} <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;