Skip to content

Instantly share code, notes, and snippets.

@kidqueb

kidqueb/dropdown thing

Created February 12, 2021 07:13
Show Gist options
  • Save kidqueb/e816308664027a6b2fb6ec2f5ae10a3f to your computer and use it in GitHub Desktop.
Save kidqueb/e816308664027a6b2fb6ec2f5ae10a3f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
dropdown thing
import Link from 'next/link';
import { useRouter } from 'next/router';
import { api } from '@chapterchat/sdk';
import { useAuth } from 'lib/stores/auth_store';
import { Logo } from 'svg';
import { Button } from '../button';
import {
AvatarIcon,
CaretDownIcon,
ExitIcon,
IdCardIcon,
MixerHorizontalIcon,
} from '@modulz/radix-icons';
import { useState } from 'react';
export const Header = () => {
const router = useRouter();
const authStore = useAuth(s => s);
const [showMenu, setShowMenu] = useState(false);
async function handleLogout() {
await api.auth.logout();
authStore.logout();
router.replace('/');
}
return (
<header className="absolute top-0 left-0 w-full flex items-center my-16">
{/* <button
className="px-2 fixed top-0 left-0 opacity-20 focus:outline-none focus-visible:opacity-50"
onClick={() => {
document.body.classList.toggle('dark');
localStorage.setItem(
'chapter_chat_theme',
localStorage.getItem('chapter_chat_theme') === 'dark' ? 'light' : 'dark'
);
}}
aria-label="Toggle light/dark mode"
>
◑
</button> */}
<div className="container flex items-center">
<nav className="flex items-center">
<Link href="/">
<a
className="
w-12 mr-8 focus:outline-none
text-purp-500 focus-visible:text-purp-900
dark:text-white dark:focus-visible:text-purp-200
"
>
<Logo />
</a>
</Link>
{/* <Button
variant="text"
as={className => (
<Link href="/explore">
<a className={`${className}`}>Explore</a>
</Link>
)}
/> */}
{authStore.loggedIn && (
// <div className="ml-2 pl-2 border-l border-gray-200 dark:border-gray-800">
<div className="ml-2 pl-2">
<Button
variant="text"
as={className => (
<Link href="/dashboard">
<a className={`${className}`}>Dashboard</a>
</Link>
)}
/>
<Button
variant="text"
as={className => (
<Link href="/groups">
<a className={`${className}`}>My Groups</a>
</Link>
)}
/>
<Button
variant="stroke"
as={className => (
<Link href="/groups/new">
<a className={`${className} ml-2 border-opacity-10`}>New Group</a>
</Link>
)}
/>
</div>
)}
</nav>
{!authStore.loading && (
<div className="flex items-center ml-auto">
{!authStore.loggedIn ? (
<>
<Button
variant="text"
as={className => (
<Link href="/login">
<a className={`${className} mr-1`}>Login</a>
</Link>
)}
/>
{/* <Button
variant="primary"
as={className => (
<Link href="/signup">
<a className={`${className} mr-1`}>Sign Up</a>
</Link>
)}
/> */}
</>
) : (
<>
<div
className={`ml-4 relative ${showMenu && 'bg-gray-50'}`}
onMouseLeave={() => showMenu && setShowMenu(false)}
>
<button
className="flex items-center p-3 rounded focus:outline-none border border-transparent focus-visible:border-purp-500"
onClick={() => setShowMenu(!showMenu)}
>
<AvatarIcon />
<CaretDownIcon className={`transform ${showMenu && '-rotate-180'}`} />
</button>
<div
className={`
absolute top-full right-0 shadow rounded border border-gray-100 bg-white text-sm
${!showMenu && 'hidden'}
`}
>
<Link href={`/users/${authStore.username.toLowerCase()}`}>
<a className="flex whitespace-nowrap items-center py-3 pl-3 pr-8 hover:bg-gray-50 w-full">
<div className="w-5 h-5 mr-3 flex items-center justify-center">
<IdCardIcon />
</div>
My Profile
</a>
</Link>
<Link href="/settings">
<a className="flex whitespace-nowrap items-center py-3 pl-3 pr-8 hover:bg-gray-50 w-full">
<div className="w-5 h-5 mr-3 flex items-center justify-center">
<MixerHorizontalIcon />
</div>
Account Settings
</a>
</Link>
<button
onClick={handleLogout}
className="flex items-center py-3 pl-3 pr-10 border-t border-gray-100 hover:bg-gray-50 w-full text-left"
>
<div className="w-5 h-5 mr-3 flex items-center justfy-center">
<ExitIcon />
</div>
Logout
</button>
</div>
</div>
</>
)}
</div>
)}
</div>
</header>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment