1
import Link from 'next/link';
import Image from 'next/image';
import { dark } from "@clerk/themes";
import { ClerkProvider, OrganizationSwitcher, SignOutButton, SignedIn } from '@clerk/nextjs';

function Topbar() {
    return (
        <nav className="topbar" 

            <Link href='/' className='flex items-center gap-4'>
                <Image src='/assets/logo.svg' alt='logo' width={28}
                    height={28} />
                <p className='text-heading3-bold text-light-1 
                max-xs:hidden'>
                    Threads
                </p>
            </Link>

            <div className='flex items-center gap-1'>
                <div className='block md:hidden'>

                    <SignedIn>
                        <SignOutButton>
                            <div className='flex cursor-pointer'>
                                <Image
                                    src='/assets/logout.svg'
                                    alt='logout'
                                    width={24}
                                    height={24}
                                />
                            </div>
                        </SignOutButton>
                    </SignedIn>

                </div>
               <OrganizationSwitcher />
            </div>
        </nav>
    )
}
export default Topbar;

When I launch my project I can only see threads and the logo on the navbar of webpage but not the signout and OrganizationSwitcher components, I don't understand why it isn't rendering on the webpage, Please help

I don't know what to try as there isn't much info regarding this

eglease
  • 2,445
  • 11
  • 18
  • 28
Nikhil Shetty
  • 11
  • 1

1 Answers1

0

I've had the same problem for days The solution was easy Only enable organizations from Clerk's website

Mohamed Nouar
  • 1