Fixed header controls

src/components/Author/Userpic.tsx

@@ -1,11 +1,13 @@
 import { Show } from 'solid-js/web'
 import type { Author } from '../../graphql/types.gen'
 import style from './Userpic.module.scss'
+import { clsx } from 'clsx'
 
 interface UserpicProps {
   user: Author
   hasLink?: boolean
   isBig?: boolean
+  class?: string
 }
 
 export default (props: UserpicProps) => {
@@ -16,7 +18,7 @@ export default (props: UserpicProps) => {
   }
 
   return (
-    <div class={style.circlewrap} classList={{ [style.big]: props.isBig }}>
+    <div class={clsx(style.circlewrap, props.class)} classList={{ [style.big]: props.isBig }}>
       <Show when={props.hasLink}>
         <a href={`/author/${props.user.slug}`}>
           <Show

src/components/Nav/Private.module.scss

@@ -10,8 +10,13 @@
     padding: divide($container-padding-x, 2);
   }
 
-  .circlewrap {
+  .userpic {
     margin-right: 0;
+
+    img {
+      height: 100%;
+      width: 100%;
+    }
   }
 }
 
@@ -81,6 +86,8 @@
 }
 
 .userControlItemWritePost {
+  width: auto;
+
   @include media-breakpoint-up(lg) {
     .icon {
       display: none;
@@ -88,8 +95,16 @@
 
     .textLabel {
       display: inline;
+      padding: 0 1.2rem;
+      position: relative;
+      z-index: 1;
     }
   }
+
+  &,
+  a::before {
+    border-radius: 1.2em;
+  }
 }
 
 .userControlItemInbox,

src/components/Nav/Private.tsx

@@ -15,7 +15,7 @@ export default () => {
       <div class={clsx(styles.userControlItem, styles.userControlItemWritePost)}>
         <a href="/create">
           <span class={styles.textLabel}>опубликовать материал</span>
-          <Icon name="pencil" />
+          <Icon name="pencil" class={styles.icon} />
         </a>
       </div>
       <div class={clsx(styles.userControlItem, styles.userControlItemInbox)}>
@@ -30,7 +30,7 @@ export default () => {
         <a href={`/${session().user?.slug}`}>
           {/*FIXME: replace with route*/}
           <div classList={{ entered: page().path === `/${session().user?.slug}` }}>
-            <Userpic user={session().user as Author} />
+            <Userpic user={session().user as Author} class={styles.userpic} />
           </div>
         </a>
       </div>