diff --git a/src/components/Nav/Popup.module.scss b/src/components/Nav/Popup.module.scss index 57c7263f..4a8b32c5 100644 --- a/src/components/Nav/Popup.module.scss +++ b/src/components/Nav/Popup.module.scss @@ -11,7 +11,7 @@ @include font-size(1.6rem); - padding: 2.4rem 2.4rem 2.4rem 1.6rem; + padding: 2.4rem; position: absolute; z-index: 10; @@ -21,7 +21,6 @@ li { margin-bottom: 1.6rem; - padding-left: 3.6rem; position: relative; &:last-child { @@ -32,19 +31,24 @@ a { border: none; white-space: nowrap; + + &:hover { + img { + filter: invert(0); + } + } } img { filter: invert(1); max-height: 2rem; max-width: 2rem; + transition: filter 0.3s; } .icon { - left: 1.5rem; - position: absolute; - top: 50%; - transform: translate(-50%, -50%); + display: inline-block; + width: 3.6rem; } } diff --git a/src/components/Nav/Private.module.scss b/src/components/Nav/Private.module.scss index 5987a0fb..5d68cf08 100644 --- a/src/components/Nav/Private.module.scss +++ b/src/components/Nav/Private.module.scss @@ -41,6 +41,7 @@ width: 23px; } + .button, a { border: none; diff --git a/src/components/Nav/Private.tsx b/src/components/Nav/Private.tsx index 13f49885..da4852e6 100644 --- a/src/components/Nav/Private.tsx +++ b/src/components/Nav/Private.tsx @@ -1,14 +1,17 @@ import type { Author } from '../../graphql/types.gen' import Userpic from '../Author/Userpic' +import { ProfilePopup } from './ProfilePopup' import { Icon } from './Icon' import styles from './Private.module.scss' import { useAuthStore } from '../../stores/auth' import { useRouter } from '../../stores/router' import { clsx } from 'clsx' +import { createSignal } from 'solid-js' export default () => { const { session } = useAuthStore() const { page } = useRouter() + const [isProfilePopupVisible, setIsProfilePopupVisible] = createSignal(false) return (
@@ -26,14 +29,21 @@ export default () => {
-
- - {/*FIXME: replace with route*/} -
- + { + setIsProfilePopupVisible(isVisible) + }} + containerCssClass={styles.control} + trigger={ +
+
-
-
+ } + />
) } diff --git a/src/components/Nav/ProfilePopup.tsx b/src/components/Nav/ProfilePopup.tsx new file mode 100644 index 00000000..d81e4a13 --- /dev/null +++ b/src/components/Nav/ProfilePopup.tsx @@ -0,0 +1,37 @@ +import styles from './Popup.module.scss' +import { Popup, PopupProps } from './Popup' +import { useAuthStore } from '../../stores/auth' + +type ProfilePopupProps = Omit + +export const ProfilePopup = (props: ProfilePopupProps) => { + const { session } = useAuthStore() + + return ( + + + + ) +}