Fixed header

public/icons/comments-outline.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.0287 1.11303e-08H11.4833C10.2582 -7.574e-05 9.06438 0.386513 8.07182 1.10475C7.07926 1.82299 6.33897 2.83615 5.95618 4.00001H5.818C4.27493 4.00001 2.79513 4.61294 1.70405 5.70406C0.612932 6.79518 0 8.27506 0 9.81801V10.9089C0.000530297 11.7805 0.196883 12.6408 0.574533 13.4262C0.952183 14.2117 1.50141 14.9023 2.18177 15.447V19.2724C2.1817 19.4752 2.26624 19.6688 2.4151 19.8065C2.56396 19.9442 2.76358 20.0136 2.9657 19.9978C3.16789 19.982 3.35432 19.8824 3.47994 19.7233L5.81802 16.727H8.36342C9.58787 16.7263 10.781 16.3393 11.7726 15.6211C12.7642 14.903 13.5042 13.8902 13.8869 12.727H14.0142L16.3631 15.7233C16.4882 15.8846 16.6752 15.9858 16.8785 16.0024C17.0819 16.019 17.2829 15.9493 17.4324 15.8105C17.5819 15.6717 17.6663 15.4765 17.6649 15.2725V11.4471C18.3453 10.9024 18.8945 10.2118 19.2721 9.42628C19.6498 8.64084 19.8461 7.78056 19.8467 6.909V5.81811C19.8467 4.79685 19.5778 3.79362 19.0672 2.90908C18.5565 2.02464 17.8221 1.29017 16.9376 0.77948C16.0532 0.268887 15.0499 3.49299e-05 14.0286 3.49299e-05L14.0287 1.11303e-08ZM8.3635 15.2724H5.54174C5.30273 15.2571 5.07152 15.3605 4.92357 15.5488L3.63632 17.1705V15.0834C3.63595 14.8455 3.51913 14.6227 3.3236 14.4871C2.74696 14.0852 2.27583 13.5501 1.95045 12.9272C1.625 12.3041 1.45492 11.6118 1.45455 10.9089V9.81799C1.45455 8.66074 1.91432 7.55089 2.73263 6.73248C3.55094 5.91417 4.66085 5.45441 5.81814 5.45441H8.36354C9.52079 5.45441 10.6306 5.91417 11.449 6.73248C12.2674 7.55079 12.7271 8.6607 12.7271 9.81799V10.9089C12.7271 12.0661 12.2674 13.176 11.449 13.9944C10.6307 14.8127 9.52083 15.2725 8.36354 15.2725L8.3635 15.2724ZM18.3923 6.90894C18.3915 7.61211 18.2208 8.30468 17.8948 8.92762C17.5687 9.55056 17.0969 10.0856 16.5196 10.487C16.3254 10.6234 16.2101 10.846 16.2105 11.0833V13.1705L14.9087 11.5341C14.7608 11.3459 14.5296 11.2425 14.2905 11.2578H14.1815V10.8941V9.8178C14.1815 8.79654 13.9126 7.79331 13.402 6.90877C12.8913 6.02433 12.1569 5.28986 11.2724 4.77917C10.388 4.26857 9.38464 3.99972 8.36338 3.99972H7.51612C7.86429 3.24011 8.42321 2.5965 9.12646 2.14529C9.82971 1.69401 10.6477 1.45424 11.4834 1.45432H14.0288C15.186 1.45432 16.2959 1.91408 17.1143 2.73239C17.9326 3.5507 18.3923 4.66061 18.3923 5.8179L18.3923 6.90894Z" fill="black"/>
+</svg>

public/icons/pencil-outline.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.9975 4.89363L13.1038 0L0 13.1064V18H4.89363L17.9975 4.89363ZM13.105 2.55674L15.4421 4.89383L14.4612 5.87591L12.1241 3.53882L13.105 2.55674ZM12.1241 3.53882L14.4612 5.87591L4.14434 16.1915L1.80725 13.8544L12.1241 3.53882ZM1.80725 16.1915V13.8544L4.14434 16.1915H1.80725Z" fill="#141414"/>
+</svg>

public/icons/share-outline.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.9051 5.84476L13.2802 0.219864C13.0659 0.00516444 12.7433 -0.0590774 12.4631 0.057267C12.1827 0.173408 12 0.446907 12 0.750148V2.98109C10.4431 3.00453 6.93799 3.36927 4.10315 5.93941C1.49973 8.29983 0.122008 11.8884 0.00774261 16.6101C0.00376666 16.8204 0 17.0314 0 17.25C0 17.6198 0.269523 17.9345 0.635078 17.9912C0.673581 17.9971 0.712294 18 0.750586 18C1.07243 18 1.36456 17.7924 1.46479 17.4775C1.48885 17.4024 3.87798 10.1908 12 9.76976L11.9997 12.0003C11.9997 12.3035 12.1824 12.577 12.4628 12.6932C12.742 12.8093 13.0655 12.7453 13.28 12.5306L18.9049 6.90566C19.1979 6.61269 19.1979 6.1381 18.9049 5.84512L18.9051 5.84476ZM13.4999 10.1894V9.00001C13.4999 8.58588 13.164 8.25002 12.7499 8.25002C6.93427 8.25002 3.55504 11.3027 1.76204 13.8064C2.23748 10.9045 3.35892 8.6391 5.11105 7.05058C7.66947 4.73114 10.8634 4.47797 12.1347 4.47797C12.3772 4.47797 12.5501 4.48717 12.635 4.49303C12.7083 4.5014 12.7497 4.49994 12.7499 4.49994C13.1529 4.48487 13.4999 4.15319 13.4999 3.74995V2.56053L17.314 6.3749L13.4999 10.1894Z" fill="black"/>
+</svg>

src/components/Nav/Header.module.scss

@@ -20,11 +20,9 @@
   }
 }
 
-.headerFixed {
-  position: fixed;
-  top: 0;
-
-  .main-logo {
+.headerFixed.headerScrolledBottom,
+.headerFixed.headerScrolledTop {
+  .mainLogo {
     height: 56px;
 
     img {
@@ -33,6 +31,11 @@
   }
 }
 
+.headerFixed {
+  position: fixed;
+  top: 0;
+}
+
 .headerInner {
   align-items: center;
   background: #fff;
@@ -96,6 +99,7 @@
 .usernav {
   display: inline-flex;
   padding-right: 0;
+  position: relative;
   width: auto;
 
   @include media-breakpoint-down(md) {
@@ -105,48 +109,47 @@
   }
 }
 
-.mainNavigation {
+.mainNavigationWrapper {
+  padding-left: 0;
   position: relative;
   @include font-size(1.7rem);
+}
 
-  ul {
-    display: inline-flex;
-    list-style: none;
-    margin: 0;
-    opacity: 1;
-    padding: 0;
-    transition: opacity 0.3s;
+.mainNavigation {
+  display: inline-flex;
+  list-style: none;
+  margin: 0;
+  opacity: 1;
+  padding: 0;
+  transition: opacity 0.3s;
 
-    @include media-breakpoint-down(md) {
-      background: #fff;
-      bottom: 0;
-      display: none;
-      font-size: 2.6rem;
-      font-weight: bold;
-      left: 0;
-      padding: $container-padding-x;
-      position: fixed;
-      top: 74px;
-      width: 100%;
-      z-index: 1;
+  @include media-breakpoint-down(md) {
+    background: #fff;
+    bottom: 0;
+    display: none;
+    font-size: 2.6rem;
+    font-weight: bold;
+    left: 0;
+    padding: $container-padding-x;
+    position: fixed;
+    top: 74px;
+    width: 100%;
+    z-index: 1;
 
-      li {
-        margin-bottom: 2.4rem;
-      }
-    }
-
-    @include media-breakpoint-down(sm) {
-      padding: divide($container-padding-x, 2);
+    li {
+      margin-bottom: 2.4rem;
     }
   }
 
-  &.fixed {
-    ul {
-      display: inline-flex;
+  @include media-breakpoint-down(sm) {
+    padding: divide($container-padding-x, 2);
+  }
 
-      @include media-breakpoint-down(lg) {
-        display: block !important;
-      }
+  &.fixed {
+    display: inline-flex;
+
+    @include media-breakpoint-down(lg) {
+      display: block !important;
     }
   }
 
@@ -166,8 +169,11 @@
   }
 }
 
-.headerScrolledBottom .mainNavigation {
-  opacity: 0;
+.headerScrolledBottom {
+  .mainNavigation,
+  .userControl {
+    opacity: 0;
+  }
 }
 
 .burgerContainer {
@@ -247,25 +253,29 @@
   }
 }
 
+.articleHeader,
+.articleControls {
+  opacity: 0;
+  transition: opacity 0.3s, z-index 0s 0.3s;
+  z-index: -1;
+
+  .headerScrolledBottom & {
+    transition: opacity 0.3s;
+    opacity: 1;
+    z-index: 1;
+  }
+}
+
 .articleHeader {
   @include font-size(1.4rem);
 
   left: 0;
   margin: 0.2em;
-  opacity: 0;
   overflow: hidden;
   position: absolute;
   text-overflow: ellipsis;
-  transition: opacity 0.3s, z-index 0s 0.3s;
   white-space: nowrap;
   width: 100%;
-  z-index: -1;
-
-  .header--scrolled-bottom & {
-    transition: opacity 0.3s;
-    opacity: 1;
-    z-index: 1;
-  }
 }
 
 .headerSearch {
@@ -280,3 +290,47 @@
     width: 1em;
   }
 }
+
+.userControl {
+  opacity: 1;
+  transition: opacity 0.3s;
+  z-index: 1;
+
+  .headerScrolledBottom & {
+    transition: opacity 0.3s, z-index 0s 0.3s;
+    opacity: 0;
+    z-index: -1;
+  }
+}
+
+.articleControls {
+  display: flex;
+  left: 0;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 100%;
+
+  .icon {
+    margin-left: 1.6rem;
+    opacity: 0.6;
+    transition: opacity 0.3s;
+  }
+
+  img {
+    vertical-align: middle;
+  }
+
+  a {
+    border: none;
+
+    &:hover {
+      background: none;
+
+      .icon {
+        filter: none;
+        opacity: 1;
+      }
+    }
+  }
+}

src/components/Nav/Header.tsx

@@ -10,6 +10,7 @@ import { useStore } from '@nanostores/solid'
 import { session as ssession } from '../../stores/auth'
 import { handleClientRouteLinkClick, router, Routes, useRouter } from '../../stores/router'
 import styles from './Header.module.scss'
+import privateStyles from './Private.module.scss'
 import { getPagePath } from '@nanostores/router'
 import { getLogger } from '../../utils/logger'
 import { clsx } from 'clsx'
@@ -102,7 +103,7 @@ export const Header = (props: Props) => {
               <img src="/logo.svg" alt={t('Discours')} />
             </a>
           </div>
-          <div class={clsx(styles.mainNavigation, 'col')}>
+          <div class={clsx(styles.mainNavigationWrapper, 'col')}>
             <div class={styles.articleHeader}>{props.title}</div>
 
             <ul
@@ -127,8 +128,8 @@ export const Header = (props: Props) => {
             </ul>
           </div>
           <div class={styles.usernav}>
-            <div class="usercontrol col">
-              <div class="usercontrol__item">
+            <div class={clsx(privateStyles.userControl, styles.userControl, 'col')}>
+              <div class={privateStyles.userControlItem}>
                 <a href="#auth" onClick={handleBellIconClick}>
                   <div>
                     <Icon name="bell-white" counter={authorized() ? getWarnings().length : 1} />
@@ -137,7 +138,7 @@ export const Header = (props: Props) => {
               </div>
 
               <Show when={visibleWarnings()}>
-                <div class="usercontrol__item notifications">
+                <div class={clsx(privateStyles.userControlItem, 'notifications')}>
                   <Notifications />
                 </div>
               </Show>
@@ -145,9 +146,9 @@ export const Header = (props: Props) => {
               <Show
                 when={authorized()}
                 fallback={
-                  <div class="usercontrol__item loginbtn">
+                  <div class={clsx(privateStyles.userControlItem, 'loginbtn')}>
                     <a href="#auth" onClick={handleEnterClick}>
-                      {t('enter')}
+                      <Icon name="user-anonymous" />
                     </a>
                   </div>
                 }
@@ -155,6 +156,14 @@ export const Header = (props: Props) => {
                 <Private />
               </Show>
             </div>
+            <div class={styles.articleControls}>
+              <Icon name="share-outline" class={styles.icon} />
+              <a href="#comments">
+                <Icon name="comments-outline" class={styles.icon} />
+              </a>
+              <Icon name="pencil-outline" class={styles.icon} />
+              <Icon name="bookmark" class={styles.icon} />
+            </div>
           </div>
           <div class={styles.burgerContainer}>
             <div class={styles.burger} classList={{ fixed: fixed() }} onClick={toggleFixed}>

src/components/Nav/Private.module.scss

@@ -0,0 +1,100 @@
+.userControl {
+  align-items: baseline;
+  display: flex;
+
+  @include font-size(1.7rem);
+
+  justify-content: flex-end;
+
+  @include media-breakpoint-down(md) {
+    padding: divide($container-padding-x, 2);
+  }
+
+  .circlewrap {
+    margin-right: 0;
+  }
+}
+
+.userControlItem {
+  align-items: center;
+  border: 2px solid #f6f6f6;
+  border-radius: 100%;
+  display: flex;
+  height: 2.4em;
+  justify-content: center;
+  margin-left: divide($container-padding-x, 2);
+  position: relative;
+  width: 2.4em;
+
+  @include media-breakpoint-up(sm) {
+    margin-left: 1.2rem;
+  }
+
+  .circlewrap {
+    height: 23px;
+    min-width: 23px;
+    width: 23px;
+  }
+
+  a {
+    border: none;
+
+    &:hover {
+      background: none;
+
+      &::before {
+        background-color: #000;
+      }
+
+      img {
+        filter: invert(1);
+      }
+    }
+
+    img {
+      filter: invert(0);
+      transition: filter 0.3s;
+    }
+
+    &::before {
+      background-color: #fff;
+      border-radius: 100%;
+      content: '';
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      transition: background-color 0.3s;
+      width: 100%;
+    }
+  }
+
+  img {
+    height: 20px;
+    vertical-align: middle;
+    width: auto;
+  }
+
+  .text-label {
+    display: none;
+  }
+}
+
+.userControlItemWritePost {
+  @include media-breakpoint-up(lg) {
+    .icon {
+      display: none;
+    }
+
+    .text-label {
+      display: inline;
+    }
+  }
+}
+
+.userControlItemInbox,
+.userControlItemSearch {
+  @include media-breakpoint-down(sm) {
+    display: none;
+  }
+}

src/components/Nav/Private.scss

@@ -1,58 +0,0 @@
-.usercontrol {
-  align-items: baseline;
-  display: flex;
-  @include font-size(1.7rem);
-
-  justify-content: flex-end;
-
-  @include media-breakpoint-down(md) {
-    padding: divide($container-padding-x, 2);
-  }
-
-  .circlewrap {
-    margin-right: 0;
-  }
-}
-
-.usercontrol__item {
-  margin-left: divide($container-padding-x, 2);
-
-  @include media-breakpoint-up(sm) {
-    margin-left: 3.2rem;
-  }
-
-  .circlewrap {
-    height: 23px;
-    min-width: 23px;
-    width: 23px;
-  }
-
-  img {
-    height: 20px;
-    vertical-align: middle;
-    width: auto;
-  }
-
-  .text-label {
-    display: none;
-  }
-}
-
-.usercontrol__item--write-post {
-  @include media-breakpoint-up(lg) {
-    .icon {
-      display: none;
-    }
-
-    .text-label {
-      display: inline;
-    }
-  }
-}
-
-.usercontrol__item--inbox,
-.usercontrol__item--search {
-  @include media-breakpoint-down(sm) {
-    display: none;
-  }
-}

src/components/Nav/Private.tsx

@@ -1,7 +1,7 @@
 import type { Author } from '../../graphql/types.gen'
 import Userpic from '../Author/Userpic'
 import { Icon } from './Icon'
-import './Private.scss'
+import './Private.module.scss'
 import { session as sesstore } from '../../stores/auth'
 import { useStore } from '@nanostores/solid'
 import { useRouter } from '../../stores/router'
@@ -11,19 +11,19 @@ export default () => {
   const { getPage } = useRouter()
 
   return (
-    <div class="usercontrol col">
-      <div class="usercontrol__item usercontrol__item--write-post">
+    <div class="userControl col">
+      <div class="userControlItem userControlItemWritePost">
         <a href="/create">
           <span class="text-label">опубликовать материал</span>
           <Icon name="pencil" />
         </a>
       </div>
-      <div class="usercontrol__item usercontrol__item--search">
+      <div class="userControlItem userControlItemSearch">
         <a href="/search">
           <Icon name="search" />
         </a>
       </div>
-      <div class="usercontrol__item usercontrol__item--inbox">
+      <div class="userControlItem userControlItemInbox">
         <a href="/inbox">
           {/*FIXME: replace with route*/}
           <div classList={{ entered: getPage().path === '/inbox' }}>
@@ -31,7 +31,7 @@ export default () => {
           </div>
         </a>
       </div>
-      <div class="usercontrol__item">
+      <div class="userControlItem">
         <a href={`/${session().user?.slug}`}>
           {/*FIXME: replace with route*/}
           <div classList={{ entered: getPage().path === `/${session().user?.slug}` }}>

src/styles/FourOuFour.module.scss

@@ -1,12 +1,3 @@
-.main-logo {
-  height: 80px !important;
-}
-
-.main-content {
-  padding-bottom: 0;
-  padding-top: 0 !important;
-}
-
 .errorPageWrapper {
   height: 100vh;
   padding-top: 100px;

src/styles/app.scss

@@ -537,6 +537,7 @@ figcaption {
 }
 
 .main-content--no-padding {
+  padding-bottom: 0;
   padding-top: 0;
 }