const accountId = props.debugAccountId ?? context.accountId; // change this back to !accountId if (!accountId) { } const profile = Social.getr(`${accountId}/profile`); if (profile === null) { return ""; } const name = profile.name; const image = profile.image; function classNames(...classes) { return classes.filter(Boolean).join(" "); } const navigation = [ { name: "Dashboard", href: "#", current: true }, { name: "Team", href: "#", current: false }, { name: "Projects", href: "#", current: false }, { name: "Calendar", href: "#", current: false }, { name: "Documents", href: "#", current: false }, { name: "Reports", href: "#", current: false }, ]; return ( <div> <div> {accountId && !name && ( <div classNameName="alert alert-warning rounded-4 mb-3"> <p>Your profile is missing a name.</p> {editProfileButton} </div> )} {accountId && !image.ipfs_cid && (!image.nft.contractId || !image.nft.tokenId) && !image.url && ( <div classNameName="alert alert-warning rounded-4 mb-3"> <p>Your profile is missing a picture.</p> {editProfileButton} </div> )} </div> <nav className="flex flex-1 flex-col" aria-label="Sidebar"> <ul role="list" className="-mx-2 space-y-1"> {navigation.map((item) => ( <li key={item.name}> <a href={item.href} className={ (item.current ? "bg-gray-50 text-indigo-600" : "text-gray-700 hover:text-indigo-600 hover:bg-gray-50") + " group flex gap-x-3 rounded-md p-2 pl-3 text-sm leading-6 font-semibold" } > {item.name} </a> </li> ))} </ul> </nav> </div> );