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 16:47:03 +07:00
parent 1241d2c784
commit 141b9c0d60
8 changed files with 84 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -12,6 +12,7 @@ interface MenuButtonProps {
position?: 'top-end' | 'bottom-end' | 'top-start' | 'bottom-start' | 'top' | 'bottom';
icon?: ReactNode;
className?: string;
translucentMenu?: boolean;
}
const modifiers = [
@ -28,8 +29,9 @@ const MenuButton: FC<MenuButtonProps> = ({
children,
className,
icon = <Icon icon="dots-vertical" size={24} />,
translucentMenu,
}) => {
const { focused, onFocus, onBlur } = useFocusEvent(true, 150);
const { focused, onFocus, onBlur } = useFocusEvent(false, 150);
return (
<Manager>
@ -49,7 +51,13 @@ const MenuButton: FC<MenuButtonProps> = ({
{focused && (
<Popper placement={position} modifiers={modifiers}>
{({ style, ref, placement }) => (
<div style={style} ref={ref} className={classNames(styles.popper, styles[placement])}>
<div
style={style}
ref={ref}
className={classNames(styles.popper, styles[placement], {
[styles.translucent]: translucentMenu,
})}
>
{children}
</div>
)}

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

@ -5,19 +5,13 @@
@import "src/styles/variables.scss";
@keyframes appear {
0% { opacity: 0 }
100% { opacity: 1 }
}
.popper {
@include outer_shadow;
@include blur($content_bg, 15px, 0.5);
background-color: $menu_bg;
box-sizing: border-box;
z-index: 12;
border-radius: $radius;
animation: appear forwards 250ms;
&::after {
content: ' ';
@ -27,14 +21,27 @@
border-width: 0 10px 10px 10px;
border-color: transparent transparent lighten($menu_bg, 6%) transparent;
position: absolute;
}
&.bottom-end::after {
top: -11px;
right: 10px;
}
&.bottom-start::after {
top: -11px;
left: 10px;
}
&.bottom::after {
top: -11px;
left: 50%;
margin-left: -15px;
}
&.top-end::after {
border-width: 10px 10px 0 10px;
border-color: darken($menu_bg, 8%) transparent transparent transparent;
top: auto;
bottom: -11px;
}
@ -43,7 +50,6 @@
border-color: darken($menu_bg, 8%) transparent transparent transparent;
top: auto;
bottom: -11px;
right: auto;
left: 10px;
}
@ -52,8 +58,7 @@
border-color: darken($menu_bg, 8%) transparent transparent transparent;
top: auto;
bottom: -11px;
right: auto;
left: 50%;
margin-left: -10px;
margin-left: -15px;
}
}