const ownerId = "agwaze.near"; const homeSelected = ( <svg xmlns="http://www.w3.org/2000/svg" width="41" height="40" viewBox="0 0 41 40" fill="none" > <path d="M32.5 18.4439V30.0001C32.5 30.5305 32.2893 31.0393 31.9142 31.4143C31.5391 31.7894 31.0304 32.0001 30.5 32.0001H10.5C9.96957 32.0001 9.46086 31.7894 9.08579 31.4143C8.71071 31.0393 8.5 30.5305 8.5 30.0001V18.4439C8.49996 18.1671 8.55737 17.8933 8.66861 17.6398C8.77985 17.3863 8.9425 17.1587 9.14625 16.9714L19.1462 7.53632L19.16 7.52257C19.5282 7.18774 20.008 7.0022 20.5056 7.0022C21.0033 7.0022 21.4831 7.18774 21.8512 7.52257C21.8555 7.52746 21.8601 7.53206 21.865 7.53632L31.865 16.9714C32.0667 17.1597 32.2273 17.3878 32.3365 17.6412C32.4458 17.8946 32.5015 18.1679 32.5 18.4439Z" fill="#00EC97" /> </svg> ); const home = ( <svg xmlns="http://www.w3.org/2000/svg" width="41" height="40" viewBox="0 0 41 40" fill="none" > <path d="M31.9837 16.9613L21.9837 7.52631C21.9788 7.52205 21.9742 7.51745 21.9699 7.51256C21.6017 7.17773 21.1219 6.99219 20.6243 6.99219C20.1266 6.99219 19.6468 7.17773 19.2787 7.51256L19.2649 7.52631L9.27613 16.9613C9.07238 17.1486 8.90973 17.3762 8.79849 17.6297C8.68725 17.8832 8.62984 18.157 8.62988 18.4338V29.99C8.62988 30.5204 8.84059 31.0292 9.21567 31.4042C9.59074 31.7793 10.0995 31.99 10.6299 31.99H30.6299C31.1603 31.99 31.669 31.7793 32.0441 31.4042C32.4192 31.0292 32.6299 30.5204 32.6299 29.99V18.4338C32.6299 18.157 32.5725 17.8832 32.4613 17.6297C32.35 17.3762 32.1874 17.1486 31.9837 16.9613ZM30.6299 29.99H10.6299V18.4338L10.6437 18.4213L20.6299 8.99006L30.6174 18.4188L30.6311 18.4313L30.6299 29.99Z" fill="black" /> </svg> ); const eventLogo = ( <svg xmlns="http://www.w3.org/2000/svg" width="30" height="33" viewBox="0 0 30 33" fill="none" > <rect x="2.02539" y="12.3267" width="26.2821" height="18.9474" fill="#00EC97" /> <rect width="26.2821" height="7.36842" transform="matrix(1 0 0 -1 2.02539 11.2739)" fill="white" /> <path d="M27.4647 2.5H23.7196V1.25C23.7196 0.91848 23.588 0.600537 23.3539 0.366116C23.1198 0.131696 22.8022 0 22.4712 0C22.1401 0 21.8225 0.131696 21.5884 0.366116C21.3543 0.600537 21.2228 0.91848 21.2228 1.25V2.5H8.73878V1.25C8.73878 0.91848 8.60725 0.600537 8.37314 0.366116C8.13901 0.131696 7.82148 0 7.49038 0C7.15928 0 6.84175 0.131696 6.60763 0.366116C6.37352 0.600537 6.24199 0.91848 6.24199 1.25V2.5H2.49679C1.83461 2.5 1.19954 2.76339 0.731299 3.23224C0.263055 3.70108 0 4.33696 0 5V30C0 30.663 0.263055 31.2989 0.731299 31.7678C1.19954 32.2366 1.83461 32.5 2.49679 32.5H27.4647C28.1269 32.5 28.762 32.2366 29.2302 31.7678C29.6985 31.2989 29.9615 30.663 29.9615 30V5C29.9615 4.33696 29.6985 3.70108 29.2302 3.23224C28.762 2.76339 28.1269 2.5 27.4647 2.5ZM6.24199 5V6.25C6.24199 6.58153 6.37352 6.89946 6.60763 7.13389C6.84175 7.3683 7.15928 7.5 7.49038 7.5C7.82148 7.5 8.13901 7.3683 8.37314 7.13389C8.60725 6.89946 8.73878 6.58153 8.73878 6.25V5H21.2228V6.25C21.2228 6.58153 21.3543 6.89946 21.5884 7.13389C21.8225 7.3683 22.1401 7.5 22.4712 7.5C22.8022 7.5 23.1198 7.3683 23.3539 7.13389C23.588 6.89946 23.7196 6.58153 23.7196 6.25V5H27.4647V10H2.49679V5H6.24199ZM27.4647 30H2.49679V12.5H27.4647V30Z" fill="#00EC97" /> <path d="M21.7532 17.0214C21.6903 16.8696 21.5983 16.7318 21.4822 16.6156C21.3662 16.4994 21.2285 16.4073 21.0769 16.3443C20.9254 16.2814 20.763 16.249 20.5989 16.249C20.4349 16.249 20.2725 16.2814 20.1209 16.3443C19.9694 16.4073 19.8317 16.4994 19.7157 16.6156L13.1085 23.2329L10.2466 20.3656C10.0123 20.1311 9.69463 19.9993 9.36335 19.9993C9.03208 19.9993 8.71436 20.1311 8.48011 20.3656C8.24586 20.6001 8.11426 20.9183 8.11426 21.25C8.11426 21.5818 8.24586 21.8999 8.48011 22.1344L12.2253 25.8844C12.3413 26.0006 12.479 26.0928 12.6305 26.1558C12.7821 26.2186 12.9445 26.251 13.1085 26.251C13.2726 26.251 13.435 26.2186 13.5866 26.1558C13.7381 26.0928 13.8758 26.0006 13.9918 25.8844L21.4822 18.3844C21.5983 18.2683 21.6903 18.1304 21.7532 17.9786C21.816 17.8269 21.8483 17.6643 21.8483 17.5C21.8483 17.3358 21.816 17.1731 21.7532 17.0214Z" fill="white" /> </svg> ); const eventSelected = ( <svg xmlns="http://www.w3.org/2000/svg" width="41" height="40" viewBox="0 0 41 40" fill="none" > <path d="M33.4647 6.5H29.7196V5.25C29.7196 4.91848 29.588 4.60054 29.3539 4.36612C29.1198 4.1317 28.8022 4 28.4712 4C28.1401 4 27.8225 4.1317 27.5884 4.36612C27.3543 4.60054 27.2228 4.91848 27.2228 5.25V6.5H14.7388V5.25C14.7388 4.91848 14.6073 4.60054 14.3731 4.36612C14.139 4.1317 13.8215 4 13.4904 4C13.1593 4 12.8418 4.1317 12.6076 4.36612C12.3735 4.60054 12.242 4.91848 12.242 5.25V6.5H8.49679C7.83461 6.5 7.19954 6.76339 6.7313 7.23224C6.26305 7.70107 6 8.33696 6 9V34C6 34.663 6.26305 35.2989 6.7313 35.7677C7.19954 36.2366 7.83461 36.5 8.49679 36.5H33.4647C34.1269 36.5 34.762 36.2366 35.2302 35.7677C35.6985 35.2989 35.9615 34.663 35.9615 34V9C35.9615 8.33696 35.6985 7.70107 35.2302 7.23224C34.762 6.76339 34.1269 6.5 33.4647 6.5ZM12.242 9V10.25C12.242 10.5815 12.3735 10.8995 12.6076 11.1339C12.8418 11.3683 13.1593 11.5 13.4904 11.5C13.8215 11.5 14.139 11.3683 14.3731 11.1339C14.6073 10.8995 14.7388 10.5815 14.7388 10.25V9H27.2228V10.25C27.2228 10.5815 27.3543 10.8995 27.5884 11.1339C27.8225 11.3683 28.1401 11.5 28.4712 11.5C28.8022 11.5 29.1198 11.3683 29.3539 11.1339C29.588 10.8995 29.7196 10.5815 29.7196 10.25V9H33.4647V14H8.49679V9H12.242ZM33.4647 34H8.49679V16.5H33.4647V34ZM27.4818 20.6156C27.5979 20.7317 27.6899 20.8696 27.7528 21.0214C27.8156 21.1731 27.848 21.3358 27.848 21.5C27.848 21.6642 27.8156 21.8269 27.7528 21.9786C27.6899 22.1304 27.5979 22.2683 27.4818 22.3844L19.9914 29.8844C19.8754 30.0006 19.7377 30.0928 19.5862 30.1558C19.4346 30.2186 19.2722 30.251 19.1082 30.251C18.9441 30.251 18.7817 30.2186 18.6302 30.1558C18.4786 30.0928 18.3409 30.0006 18.2249 29.8844L14.4797 26.1344C14.2455 25.8999 14.1139 25.5818 14.1139 25.25C14.1139 24.9182 14.2455 24.6001 14.4797 24.3656C14.714 24.1311 15.0317 23.9993 15.363 23.9993C15.6943 23.9993 16.012 24.1311 16.2462 24.3656L19.1082 27.2329L25.7153 20.6156C25.8313 20.4994 25.969 20.4073 26.1205 20.3442C26.2721 20.2814 26.4345 20.249 26.5986 20.249C26.7626 20.249 26.925 20.2814 27.0766 20.3442C27.2281 20.4073 27.3658 20.4994 27.4818 20.6156Z" fill="black" /> </svg> ); const people = ( <svg xmlns="http://www.w3.org/2000/svg" width="41" height="40" viewBox="0 0 41 40" fill="none" > <path d="M25.8281 31.0049C25.9503 31.1934 26.0196 31.4118 26.0287 31.6368C26.0379 31.8618 25.9865 32.085 25.8799 32.283C25.7733 32.481 25.6155 32.6463 25.4232 32.7615C25.231 32.8768 25.0113 32.9376 24.7875 32.9376H1.87411C1.65031 32.9376 1.43068 32.8768 1.2384 32.7615C1.04614 32.6463 0.888377 32.481 0.78179 32.283C0.675204 32.085 0.623752 31.8618 0.632867 31.6368C0.641982 31.4118 0.711328 31.1934 0.833578 31.0049C2.58246 28.2964 5.15487 26.2296 8.16699 25.1126C6.50182 23.9973 5.23762 22.3725 4.56131 20.4784C3.88501 18.5843 3.83251 16.5214 4.41159 14.595C4.99067 12.6685 6.17056 10.9807 7.77682 9.78113C9.38308 8.58153 11.3304 7.93384 13.3308 7.93384C15.3312 7.93384 17.2786 8.58153 18.8848 9.78113C20.4911 10.9807 21.6709 12.6685 22.25 14.595C22.8291 16.5214 22.7767 18.5843 22.1003 20.4784C21.424 22.3725 20.1598 23.9973 18.4947 25.1126C21.5068 26.2296 24.0792 28.2964 25.8281 31.0049ZM39.4807 30.9814C37.7314 28.2844 35.1648 26.2264 32.1613 25.1126C34.1271 23.7804 35.5144 21.7445 36.0409 19.4194C36.5673 17.0944 36.1934 14.6548 34.995 12.5974C33.7967 10.5399 31.8641 9.01926 29.5906 8.34488C27.3172 7.67049 24.8738 7.89308 22.7577 8.96734C22.6768 9.00936 22.6061 9.06879 22.5506 9.14137C22.4949 9.21397 22.4559 9.29798 22.4362 9.38741C22.4165 9.47686 22.4166 9.56958 22.4365 9.659C22.4564 9.74841 22.4955 9.83234 22.5512 9.90484C24.1246 11.8795 25.0283 14.3093 25.1297 16.8381C25.2312 19.367 24.5251 21.8621 23.1149 23.958C23.0238 24.0949 22.9901 24.2625 23.0212 24.4244C23.0524 24.5863 23.1457 24.7291 23.2811 24.822C25.1198 26.1131 26.6937 27.7486 27.9168 29.6393C28.4102 30.3993 28.6117 31.314 28.4837 32.2126C28.4693 32.302 28.4744 32.3935 28.4987 32.4808C28.5228 32.5679 28.5656 32.6489 28.6239 32.7178C28.6823 32.7868 28.7548 32.8421 28.8365 32.88C28.9182 32.918 29.0072 32.9376 29.0971 32.9376H38.4619C38.7355 32.9378 39.0015 32.847 39.2185 32.6794C39.4356 32.5119 39.5916 32.277 39.6625 32.0111C39.7057 31.8363 39.7118 31.6541 39.6805 31.4768C39.6492 31.2994 39.5811 31.1306 39.4807 30.9814Z" fill="#00EC97" /> </svg> ); const peopleSelected = ( <svg xmlns="http://www.w3.org/2000/svg" width="41" height="40" viewBox="0 0 41 40" fill="none" > <path d="M18.8297 24.6751C20.4949 23.5598 21.7591 21.935 22.4353 20.0409C23.1117 18.1468 23.1641 16.0839 22.585 14.1575C22.0061 12.231 20.8261 10.5432 19.2198 9.34363C17.6136 8.14403 15.6663 7.49634 13.6659 7.49634C11.6655 7.49634 9.71813 8.14403 8.11188 9.34363C6.50563 10.5432 5.32572 12.231 4.74665 14.1575C4.16757 16.0839 4.22006 18.1468 4.89637 20.0409C5.57268 21.935 6.83688 23.5598 8.50204 24.6751C5.48993 25.7921 2.91751 27.8589 1.16864 30.5674C1.07672 30.7048 1.01288 30.8593 0.980815 31.0218C0.948752 31.1843 0.949111 31.3515 0.981871 31.5138C1.01463 31.6761 1.07914 31.8304 1.17164 31.9674C1.26414 32.1044 1.3828 32.2216 1.52071 32.3121C1.65862 32.4026 1.81304 32.4646 1.97498 32.4945C2.13693 32.5245 2.30317 32.5218 2.46405 32.4865C2.62492 32.4511 2.77722 32.3841 2.91209 32.289C3.04697 32.194 3.16173 32.073 3.24969 31.933C4.3778 30.1873 5.92147 28.7529 7.7405 27.7598C9.55953 26.7668 11.5963 26.2466 13.6659 26.2466C15.7354 26.2466 17.7723 26.7668 19.5913 27.7598C21.4103 28.7529 22.9539 30.1873 24.082 31.933C24.2643 32.2054 24.5458 32.3949 24.8656 32.4601C25.1856 32.5255 25.5181 32.4615 25.7916 32.2821C26.0651 32.1028 26.2573 31.8223 26.3268 31.5014C26.3963 31.1805 26.3375 30.845 26.1631 30.5674C24.4143 27.8589 21.8418 25.7921 18.8297 24.6751ZM6.83253 16.8751C6.83253 15.5154 7.2333 14.1861 7.98416 13.0556C8.73502 11.925 9.80224 11.0438 11.0509 10.5235C12.2995 10.0031 13.6735 9.86698 14.999 10.1323C16.3246 10.3975 17.5422 11.0523 18.4977 12.0138C19.4534 12.9753 20.1043 14.2003 20.3679 15.5339C20.6316 16.8675 20.4963 18.2499 19.979 19.5061C19.4618 20.7624 18.586 21.836 17.4623 22.5915C16.3385 23.3469 15.0174 23.7501 13.6659 23.7501C11.8542 23.7481 10.1173 23.0231 8.83624 21.7343C7.55519 20.4454 6.8346 18.6979 6.83253 16.8751ZM39.468 32.297C39.1919 32.4781 38.8558 32.5414 38.5334 32.4731C38.211 32.4049 37.9287 32.2106 37.7487 31.933C36.6219 30.1863 35.0785 28.7511 33.2591 27.7585C31.4397 26.7659 29.4022 26.2474 27.3326 26.2501C27.003 26.2501 26.687 26.1185 26.4541 25.884C26.221 25.6496 26.0902 25.3316 26.0902 25.0001C26.0902 24.6686 26.221 24.3506 26.4541 24.1163C26.687 23.8819 27.003 23.7501 27.3326 23.7501C28.3388 23.7491 29.3325 23.5246 30.2426 23.0925C31.1527 22.6604 31.9566 22.0314 32.597 21.2504C33.2375 20.4695 33.6985 19.5558 33.9474 18.5748C34.1961 17.5938 34.2264 16.5695 34.0362 15.5754C33.846 14.5811 33.4398 13.6415 32.8467 12.8236C32.2537 12.0056 31.4884 11.3295 30.6055 10.8436C29.7228 10.3577 28.7441 10.074 27.7396 10.0128C26.7351 9.95148 25.7296 10.1142 24.7949 10.4892C24.6425 10.5555 24.4784 10.5904 24.3124 10.5918C24.1464 10.5932 23.9818 10.5611 23.8282 10.4974C23.6748 10.4337 23.5355 10.3398 23.4187 10.221C23.3019 10.1023 23.21 9.96116 23.1483 9.80606C23.0867 9.65096 23.0565 9.485 23.0596 9.31799C23.0629 9.15098 23.0993 8.98629 23.1667 8.83366C23.2343 8.68104 23.3315 8.54359 23.4526 8.4294C23.5739 8.31523 23.7166 8.22664 23.8724 8.1689C26.0116 7.31054 28.391 7.27965 30.5516 8.08219C32.7122 8.88473 34.5008 10.4638 35.5723 12.5149C36.6439 14.5659 36.9226 16.9435 36.3546 19.1891C35.7865 21.4346 34.412 23.389 32.4963 24.6751C35.5085 25.7921 38.0809 27.8589 39.8298 30.5674C40.0098 30.845 40.0727 31.1831 40.0048 31.5075C39.937 31.8319 39.7439 32.1159 39.468 32.297Z" fill="black" /> </svg> ); const project = ( <svg xmlns="http://www.w3.org/2000/svg" width="41" height="40" viewBox="0 0 41 40" fill="none" > <rect width="41" height="40" fill="#00EC97" /> <path d="M13.1397 15.7688L8.0622 20L13.1397 24.2313C13.2436 24.3144 13.3297 24.4173 13.3933 24.5341C13.4568 24.6509 13.4964 24.7793 13.5097 24.9116C13.5231 25.0438 13.5099 25.1775 13.471 25.3046C13.4321 25.4318 13.3682 25.5499 13.2831 25.652C13.198 25.7542 13.0933 25.8384 12.9753 25.8996C12.8572 25.9608 12.7282 25.9979 12.5957 26.0086C12.4631 26.0194 12.3298 26.0036 12.2034 25.9622C12.077 25.9208 11.9602 25.8546 11.8597 25.7675L5.8597 20.7675C5.74712 20.6737 5.65654 20.5562 5.59438 20.4235C5.53222 20.2907 5.5 20.1459 5.5 19.9994C5.5 19.8528 5.53222 19.708 5.59438 19.5753C5.65654 19.4426 5.74712 19.3251 5.8597 19.2313L11.8597 14.2313C12.0636 14.0615 12.3266 13.9797 12.5908 14.0039C12.855 14.028 13.0988 14.1561 13.2685 14.36C13.4382 14.5639 13.52 14.8268 13.4959 15.091C13.4717 15.3552 13.3436 15.599 13.1397 15.7688ZM35.1397 19.2313L29.1397 14.2313C29.0388 14.1472 28.9223 14.0839 28.7968 14.0449C28.6714 14.0058 28.5395 13.9919 28.4087 14.0039C28.2779 14.0158 28.1507 14.0534 28.0344 14.1145C27.9181 14.1756 27.815 14.259 27.731 14.36C27.5613 14.5639 27.4795 14.8268 27.5036 15.091C27.5278 15.3552 27.6559 15.599 27.8597 15.7688L32.9372 20L27.8597 24.2313C27.7559 24.3144 27.6697 24.4173 27.6062 24.5341C27.5427 24.6509 27.5031 24.7793 27.4897 24.9116C27.4764 25.0438 27.4896 25.1775 27.5285 25.3046C27.5674 25.4318 27.6313 25.5499 27.7164 25.652C27.8015 25.7542 27.9062 25.8384 28.0242 25.8996C28.1422 25.9608 28.2713 25.9979 28.4038 26.0086C28.5364 26.0194 28.6697 26.0036 28.7961 25.9622C28.9224 25.9208 29.0393 25.8546 29.1397 25.7675L35.1397 20.7675C35.2523 20.6737 35.3429 20.5562 35.4051 20.4235C35.4672 20.2907 35.4994 20.1459 35.4994 19.9994C35.4994 19.8528 35.4672 19.708 35.4051 19.5753C35.3429 19.4426 35.2523 19.3251 35.1397 19.2313ZM24.841 8.06003C24.7176 8.01522 24.5865 7.99515 24.4553 8.00099C24.3241 8.00682 24.1953 8.03844 24.0764 8.09404C23.9574 8.14964 23.8505 8.22813 23.7619 8.32503C23.6732 8.42193 23.6046 8.53534 23.5597 8.65878L15.5597 30.6588C15.5147 30.7823 15.4945 30.9134 15.5003 31.0448C15.506 31.1761 15.5376 31.305 15.5932 31.4242C15.6488 31.5433 15.7274 31.6503 15.8244 31.739C15.9214 31.8277 16.0349 31.8964 16.1585 31.9413C16.2681 31.9802 16.3835 32.0001 16.4997 32C16.7051 32 16.9055 31.9368 17.0737 31.8189C17.2418 31.7011 17.3697 31.5343 17.4397 31.3413L25.4397 9.34128C25.4846 9.21784 25.5046 9.08678 25.4988 8.95558C25.493 8.82439 25.4613 8.69562 25.4057 8.57665C25.3501 8.45767 25.2716 8.35081 25.1747 8.26217C25.0778 8.17353 24.9644 8.10484 24.841 8.06003Z" fill="white" /> </svg> ); const projectSelected = ( <svg xmlns="http://www.w3.org/2000/svg" width="41" height="40" viewBox="0 0 41 40" fill="none" > <path d="M13.1397 15.7688L8.0622 20L13.1397 24.2313C13.2436 24.3144 13.3297 24.4173 13.3933 24.5341C13.4568 24.6509 13.4964 24.7793 13.5097 24.9116C13.5231 25.0438 13.5099 25.1775 13.471 25.3046C13.4321 25.4318 13.3682 25.5499 13.2831 25.652C13.198 25.7542 13.0933 25.8384 12.9753 25.8996C12.8572 25.9608 12.7282 25.9979 12.5957 26.0086C12.4631 26.0194 12.3298 26.0036 12.2034 25.9622C12.077 25.9208 11.9602 25.8546 11.8597 25.7675L5.8597 20.7675C5.74712 20.6737 5.65654 20.5562 5.59438 20.4235C5.53222 20.2907 5.5 20.1459 5.5 19.9994C5.5 19.8528 5.53222 19.708 5.59438 19.5753C5.65654 19.4426 5.74712 19.3251 5.8597 19.2313L11.8597 14.2313C12.0636 14.0615 12.3266 13.9797 12.5908 14.0039C12.855 14.028 13.0988 14.1561 13.2685 14.36C13.4382 14.5639 13.52 14.8268 13.4959 15.091C13.4717 15.3552 13.3436 15.599 13.1397 15.7688ZM35.1397 19.2313L29.1397 14.2313C29.0388 14.1472 28.9223 14.0839 28.7968 14.0449C28.6714 14.0058 28.5395 13.9919 28.4087 14.0039C28.2779 14.0158 28.1507 14.0534 28.0344 14.1145C27.9181 14.1756 27.815 14.259 27.731 14.36C27.5613 14.5639 27.4795 14.8268 27.5036 15.091C27.5278 15.3552 27.6559 15.599 27.8597 15.7688L32.9372 20L27.8597 24.2313C27.7559 24.3144 27.6697 24.4173 27.6062 24.5341C27.5427 24.6509 27.5031 24.7793 27.4897 24.9116C27.4764 25.0438 27.4896 25.1775 27.5285 25.3046C27.5674 25.4318 27.6313 25.5499 27.7164 25.652C27.8015 25.7542 27.9062 25.8384 28.0242 25.8996C28.1422 25.9608 28.2713 25.9979 28.4038 26.0086C28.5364 26.0194 28.6697 26.0036 28.7961 25.9622C28.9224 25.9208 29.0393 25.8546 29.1397 25.7675L35.1397 20.7675C35.2523 20.6737 35.3429 20.5562 35.4051 20.4235C35.4672 20.2907 35.4994 20.1459 35.4994 19.9994C35.4994 19.8528 35.4672 19.708 35.4051 19.5753C35.3429 19.4426 35.2523 19.3251 35.1397 19.2313ZM24.841 8.06003C24.7176 8.01522 24.5865 7.99515 24.4553 8.00099C24.3241 8.00682 24.1953 8.03844 24.0764 8.09404C23.9574 8.14964 23.8505 8.22813 23.7619 8.32503C23.6732 8.42193 23.6046 8.53534 23.5597 8.65878L15.5597 30.6588C15.5147 30.7823 15.4945 30.9134 15.5003 31.0448C15.506 31.1761 15.5376 31.305 15.5932 31.4242C15.6488 31.5433 15.7274 31.6503 15.8244 31.739C15.9214 31.8277 16.0349 31.8964 16.1585 31.9413C16.2681 31.9802 16.3835 32.0001 16.4997 32C16.7051 32 16.9055 31.9368 17.0737 31.8189C17.2418 31.7011 17.3697 31.5343 17.4397 31.3413L25.4397 9.34128C25.4846 9.21784 25.5046 9.08678 25.4988 8.95558C25.493 8.82439 25.4613 8.69562 25.4057 8.57665C25.3501 8.45767 25.2716 8.35081 25.1747 8.26217C25.0778 8.17353 24.9644 8.10484 24.841 8.06003Z" fill="black" /> </svg> ); const about = ( <svg xmlns="http://www.w3.org/2000/svg" width="35" height="36" viewBox="0 0 35 36" fill="none" > <path d="M12.7272 12.9999C13.1128 11.886 13.8739 10.9468 14.8756 10.3485C15.8773 9.75019 17.055 9.53149 18.2002 9.7311C19.3454 9.93074 20.384 10.5358 21.1324 11.4391C21.8805 12.3425 22.2902 13.4858 22.2884 14.6666C22.2884 17.9999 17.3684 19.6666 17.3684 19.6666M17.4996 26.3333H17.516H17.4996ZM33.8996 17.9999C33.8996 27.2046 26.557 34.6666 17.4996 34.6666C8.44213 34.6666 1.09961 27.2046 1.09961 17.9999C1.09961 8.79517 8.44213 1.33325 17.4996 1.33325C26.557 1.33325 33.8996 8.79517 33.8996 17.9999Z" fill="#00EC97" /> <path d="M12.7272 12.9999C13.1128 11.886 13.8739 10.9468 14.8756 10.3485C15.8773 9.75019 17.055 9.53149 18.2002 9.7311C19.3454 9.93074 20.384 10.5358 21.1324 11.4391C21.8805 12.3425 22.2902 13.4858 22.2884 14.6666C22.2884 17.9999 17.3684 19.6666 17.3684 19.6666M17.4996 26.3333H17.516M33.8996 17.9999C33.8996 27.2046 26.557 34.6666 17.4996 34.6666C8.44213 34.6666 1.09961 27.2046 1.09961 17.9999C1.09961 8.79517 8.44213 1.33325 17.4996 1.33325C26.557 1.33325 33.8996 8.79517 33.8996 17.9999Z" stroke="#00EC97" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M12.7275 13C13.1131 11.8861 13.8742 10.9468 14.8759 10.3485C15.8777 9.75024 17.0553 9.53154 18.2005 9.73116C19.3458 9.93079 20.3844 10.5358 21.1327 11.4392C21.8809 12.3425 22.2905 13.4858 22.2887 14.6666C22.2887 18 17.3687 19.6666 17.3687 19.6666M17.4999 26.3333H17.5163" stroke="#3A3F42" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </svg> ); const aboutSelected = ( <svg xmlns="http://www.w3.org/2000/svg" width="41" height="40" viewBox="0 0 41 40" fill="none" > <path d="M15.7272 14.9999C16.1128 13.886 16.8739 12.9468 17.8756 12.3485C18.8773 11.7502 20.055 11.5315 21.2002 11.7311C22.3454 11.9307 23.384 12.5358 24.1324 13.4391C24.8805 14.3425 25.2902 15.4858 25.2884 16.6666C25.2884 19.9999 20.3684 21.6666 20.3684 21.6666M20.4996 28.3333H20.516M36.8996 19.9999C36.8996 29.2046 29.557 36.6666 20.4996 36.6666C11.4421 36.6666 4.09961 29.2046 4.09961 19.9999C4.09961 10.7952 11.4421 3.33325 20.4996 3.33325C29.557 3.33325 36.8996 10.7952 36.8996 19.9999Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </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 }) => ( <NavItem href={`#/${props.widgetOwner ?? ownerId}/widget/WebFusion.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: "Home", id: "home", icon: home, iconSelected: homeSelected, })} {navItem({ text: "Team", id: "team", icon: peopleSelected, iconSelected: people, })} {navItem({ text: "Event", id: "event", icon: eventSelected, iconSelected: eventLogo, })} {navItem({ text: "Projects", id: "projects", icon: projectSelected, iconSelected: project, })} {navItem({ text: "About", id: "about", icon: aboutSelected, iconSelected: about, })} {navItem({ text: "Feeds", id: "socials", icon: feed, iconSelected: feedSelected, })} {navItem({ text: "Community", id: "community", icon: people, iconSelected: peopleSelected, })} <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> <div className="topNav"> <Widget src="agwaze.near/widget/WebFusion.Navbar.Top" /> </div> {content} </Content> </Root> ); } return content;