38 lines
988 B
TypeScript
38 lines
988 B
TypeScript
// Path: Frontend/src/components/shell/TopBar/UserNavButton.tsx
|
|
|
|
import type { JSX } from "solid-js";
|
|
import { User } from "../../../lib/icons";
|
|
import styles from "./UserNavButton.module.scss";
|
|
|
|
type UserNavButtonProps = {
|
|
isOpen: boolean;
|
|
menuId: string;
|
|
onToggle: () => void;
|
|
};
|
|
|
|
export const UserNavButton = (props: UserNavButtonProps): JSX.Element => {
|
|
return (
|
|
<button
|
|
classList={{
|
|
[styles.userButton]: true,
|
|
[styles.userButtonOpen]: props.isOpen,
|
|
}}
|
|
type="button"
|
|
aria-label={props.isOpen ? "Close profile menu" : "Open profile menu"}
|
|
title={props.isOpen ? "Close profile menu" : "Open profile menu"}
|
|
aria-haspopup="menu"
|
|
aria-controls={props.menuId}
|
|
aria-expanded={props.isOpen}
|
|
onClick={props.onToggle}
|
|
>
|
|
<span class={styles.spinContainer} aria-hidden="true">
|
|
<span class={styles.spinRing} />
|
|
</span>
|
|
|
|
<span class={styles.userCore} aria-hidden="true">
|
|
<User size={16} strokeWidth={2.2} />
|
|
</span>
|
|
</button>
|
|
);
|
|
};
|