aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-07-06 21:22:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: update dropdown component

Browse Source
This commit is contained in:
Steven
2022-09-12 21:17:23 +08:00
parent 840659e2b2
commit 0ba7a9e519
6 changed files with 312 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
web/src/components/Header.tsx
View File

@ -1,13 +1,12 @@
import { useNavigate } from "react-router-dom";
import { useAppSelector } from "../store";
import { userService } from "../services";
import useToggle from "../hooks/useToggle";
import Icon from "./Icon";
import Dropdown from "./common/Dropdown";
const Header: React.FC = () => {
const navigate = useNavigate();
const { user } = useAppSelector((state) => state.user);
const [showDropdown, toggleShowDropdown] = useToggle(false);
const handleSignOutButtonClick = async () => {
await userService.doSignOut();
@ -19,19 +18,21 @@ const Header: React.FC = () => {
<div className="w-full max-w-4xl mx-auto px-3 py-4 flex flex-row justify-between items-center">
<span className="text-xl font-mono font-medium">Corgi</span>
<div className="relative">
<div className="flex flex-row justify-end items-center" onClick={() => toggleShowDropdown()}>
<span>{user?.name}</span>
<Icon.ChevronDown className="ml-1 w-5 h-auto text-gray-600" />
</div>
<div
className={`bg-white flex flex-col justify-start items-start p-1 w-32 absolute top-8 right-0 shadow rounded ${
showDropdown ? "" : "hidden"
}`}
>
<span className="w-full px-2 leading-8 cursor-pointer rounded hover:bg-gray-100" onClick={() => handleSignOutButtonClick()}>
Sign out
</span>
</div>
<Dropdown
trigger={
<div className="flex flex-row justify-end items-center cursor-pointer">
<span>{user?.name}</span>
<Icon.ChevronDown className="ml-1 w-5 h-auto text-gray-600" />
</div>
}
actions={
<>
<span className="w-full px-2 leading-8 cursor-pointer rounded hover:bg-gray-100" onClick={() => handleSignOutButtonClick()}>
Sign out
</span>
</>
}
></Dropdown>
</div>
</div>
</div>