muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 12:56:41 +07:00
Code Packages Activity Actions

added profile quick info

Browse source
This commit is contained in:
Fedor Katurov 2022-07-19 14:58:28 +07:00
parent fa17aac056
commit 1241d2c784
9 changed files with 131 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/menu/MenuButton/index.tsx
View file

@ -9,6 +9,7 @@ import { useFocusEvent } from '~/hooks/dom/useFocusEvent';
import styles from './styles.module.scss';
interface MenuButtonProps {
position?: 'top-end' | 'bottom-end' | 'top-start' | 'bottom-start' | 'top' | 'bottom';
icon?: ReactNode;
className?: string;
}
@ -23,11 +24,12 @@ const modifiers = [
];
const MenuButton: FC<MenuButtonProps> = ({
position = 'bottom-end',
children,
className,
icon = <Icon icon="dots-vertical" size={24} />,
}) => {
const { focused, onFocus, onBlur } = useFocusEvent(false, 150);
const { focused, onFocus, onBlur } = useFocusEvent(true, 150);
return (
<Manager>
@ -45,13 +47,9 @@ const MenuButton: FC<MenuButtonProps> = ({
</Reference>
{focused && (
<Popper placement="bottom-end" modifiers={modifiers}>
<Popper placement={position} modifiers={modifiers}>
{({ style, ref, placement }) => (
<div
style={style}
ref={ref}
className={classNames(styles.popper, { [styles.top]: placement === 'top-end' })}
>
<div style={style} ref={ref} className={classNames(styles.popper, styles[placement])}>
{children}
</div>
)}

21
src/components/menu/MenuButton/styles.module.scss
View file

@ -31,10 +31,29 @@
right: 10px;
}
&.top::after {
&.top-end::after {
border-width: 10px 10px 0 10px;
border-color: darken($menu_bg, 8%) transparent transparent transparent;
top: auto;
bottom: -11px;
}
&.top-start::after {
border-width: 10px 10px 0 10px;
border-color: darken($menu_bg, 8%) transparent transparent transparent;
top: auto;
bottom: -11px;
right: auto;
left: 10px;
}
&.top::after {
border-width: 10px 10px 0 10px;
border-color: darken($menu_bg, 8%) transparent transparent transparent;
top: auto;
bottom: -11px;
right: auto;
left: 50%;
margin-left: -10px;
}
}