Profile popup

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;
   }
 }
 

src/components/Nav/Private.module.scss

@@ -41,6 +41,7 @@
     width: 23px;
   }
 
+  .button,
   a {
     border: none;
 

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 (
     <div class={clsx(styles.userControl, 'col')}>
@@ -26,14 +29,21 @@ export default () => {
           </div>
         </a>
       </div>
-      <div class={styles.userControlItem}>
-        <a href={`/${session().user?.slug}`}>
-          {/*FIXME: replace with route*/}
-          <div classList={{ entered: page().path === `/${session().user?.slug}` }}>
-            <Userpic user={session().user as Author} class={styles.userpic} />
+      <ProfilePopup
+        onVisibilityChange={(isVisible) => {
+          setIsProfilePopupVisible(isVisible)
+        }}
+        containerCssClass={styles.control}
+        trigger={
+          <div class={styles.userControlItem}>
+            <button class={styles.button}>
+              <div classList={{ entered: page().path === `/${session().user?.slug}` }}>
+                <Userpic user={session().user as Author} class={styles.userpic} />
+              </div>
+            </button>
           </div>
-        </a>
-      </div>
+        }
+      />
     </div>
   )
 }

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<PopupProps, 'children'>
+
+export const ProfilePopup = (props: ProfilePopupProps) => {
+  const { session } = useAuthStore()
+
+  return (
+    <Popup {...props}>
+      <ul class="nodash">
+        <li>
+          <a href={`/${session().user?.slug}`}>Профиль</a>
+        </li>
+        <li>
+          <a href="#">Черновики</a>
+        </li>
+        <li>
+          <a href="#">Подписки</a>
+        </li>
+        <li>
+          <a href="#">Комментарии</a>
+        </li>
+        <li>
+          <a href="#">Закладки</a>
+        </li>
+        <li>
+          <a href="#">Настройки</a>
+        </li>
+        <li>
+          <a href="#">Выйти из&nbsp;аккаунта</a>
+        </li>
+      </ul>
+    </Popup>
+  )
+}