Merge pull request #4 from Discours/navigation

WIP: sticky main navigation block

src/components/Nav/Header.scss

@@ -1,13 +1,31 @@
 header {
+  background: #fff;
   margin-bottom: 2.2rem;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 10;
 
   .wide-container {
+    background: #fff;
+
     @include media-breakpoint-down(sm) {
       padding: 0 divide($container-padding-x, 2);
     }
   }
 }
 
+.header--scrolled-bottom,
+.header--scrolled-top {
+  .main-logo {
+    height: 56px;
+
+    img {
+      height: 20px;
+    }
+  }
+}
+
 .header__inner {
   background: #fff;
   border-bottom: 4px solid #000;
@@ -35,8 +53,9 @@ header {
   display: inline-flex;
   height: 70px;
   padding: 0 $container-padding-x 0 0;
-  text-align: center;
   position: relative;
+  transition: height 0.2s;
+  text-align: center;
   z-index: 9;
 
   @include media-breakpoint-up(lg) {
@@ -44,6 +63,10 @@ header {
   }
 
   img {
+    height: 32px;
+    object-fit: contain;
+    object-position: left;
+    transition: height 0.2s;
     vertical-align: middle;
     width: 100px;
 
@@ -79,12 +102,16 @@ nav {
 }
 
 .main-navigation {
-  display: inline-flex;
+  position: relative;
   @include font-size(1.7rem);
 
+  ul {
+    display: inline-flex;
     list-style: none;
     margin: 0;
+    opacity: 1;
     padding: 0;
+    transition: opacity 0.3s;
 
     @include media-breakpoint-down(md) {
       background: #fff;
@@ -108,13 +135,20 @@ nav {
       padding: divide($container-padding-x, 2);
     }
 
+    .header--scrolled-bottom & {
+      opacity: 0;
+    }
+  }
+
   &.fixed {
+    ul {
       display: inline-flex;
 
       @include media-breakpoint-down(lg) {
         display: block !important;
       }
     }
+  }
 
   li {
     margin-right: 2.4rem;
@@ -127,8 +161,8 @@ nav {
   .selected a {
     border-bottom: 2px solid;
     color: #000;
-    pointer-events: none;
     cursor: default;
+    pointer-events: none;
   }
 }
 
@@ -208,3 +242,24 @@ nav {
     }
   }
 }
+
+.article-header {
+  @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;
+  }
+}

src/components/Nav/Header.tsx

@@ -1,4 +1,4 @@
-import { For, Show, createSignal, createMemo, createEffect } from 'solid-js'
+import { For, Show, createSignal, createMemo, createEffect, onMount, onCleanup } from 'solid-js'
 import Private from './Private'
 import Notifications from './Notifications'
 import Icon from './Icon'
@@ -20,6 +20,8 @@ const resources = [
 
 export const Header = () => {
   // signals
+  const [getIsScrollingBottom, setIsScrollingBottom] = createSignal(false)
+  const [getIsScrolled, setIsScrolled] = createSignal(false)
   const [fixed, setFixed] = createSignal(false)
   const [visibleWarnings, setVisibleWarnings] = createSignal(false)
   // stores
@@ -58,8 +60,28 @@ export const Header = () => {
     handleClientRouteLinkClick(ev)
   }
 
+  onMount(() => {
+    let scrollTop = window.scrollY
+
+    const handleScroll = () => {
+      setIsScrollingBottom(window.scrollY > scrollTop)
+      setIsScrolled(window.scrollY > 0)
+      scrollTop = window.scrollY
+    }
+
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    onCleanup(() => {
+      window.removeEventListener('scroll', handleScroll)
+    })
+  })
+
   return (
-    <header>
+    <header
+      classList={{
+        ['header--scrolled-top']: !getIsScrollingBottom() && getIsScrolled(),
+        ['header--scrolled-bottom']: getIsScrollingBottom() && getIsScrolled()
+      }}
+    >
       <Modal name="auth">
         <AuthModal />
       </Modal>
@@ -70,7 +92,14 @@ export const Header = () => {
               <img src="/logo.svg" alt={t('Discours')} />
             </a>
           </div>
-          <ul class="col main-navigation text-xl inline-flex" classList={{ fixed: fixed() }}>
+          <div class="col main-navigation">
+            {/*FIXME article header*/}
+            <div class="article-header">
+              Дискурс — независимый художественно-аналитический журнал с горизонтальной редакцией,
+              основанный на принципах свободы слова, прямой демократии и совместного редактирования.
+            </div>
+
+            <ul class="text-xl inline-flex" classList={{ fixed: fixed() }}>
               <For each={resources}>
                 {(r: { href: string; name: string }) => (
                   <li classList={{ selected: r.href === subpath() }}>
@@ -81,6 +110,7 @@ export const Header = () => {
                 )}
               </For>
             </ul>
+          </div>
           <div class="usernav">
             <div class="usercontrol col">
               <div class="usercontrol__item">

src/components/Nav/Topics.scss

@@ -1,7 +1,11 @@
 .subnavigation {
   @include font-size(1.5rem);
 
-  margin-bottom: 2.4rem;
+  height: 3em;
+  line-height: 3em;
+  margin-bottom: 1.2rem !important;
+  overflow: hidden;
+  position: relative;
 
   @include media-breakpoint-down(sm) {
     padding: 0 divide($container-padding-x, 2);
@@ -10,6 +14,7 @@
   .topics {
     display: flex;
     flex-wrap: wrap;
+    justify-content: space-between;
     list-style: none;
     margin-right: 2.2rem;
     padding: 0;

src/layouts/zine.astro

@@ -23,7 +23,7 @@ const locale = useStore(langstore)
       <title>{t('Discours')}</title>
     </head>
     <body>
-      <Header />
+      <Header client:load />
       <main class="main-content">
         <Suspense>
           <slot />

src/styles/app.scss

@@ -33,7 +33,7 @@ body {
   font-family: Muller, Arial, Helvetica, sans-serif;
   font-size: 2rem;
   line-height: 1.4;
-  height: 100%;
+  min-height: 100%;
   text-size-adjust: 100%;
 
   &.fixed {
@@ -533,6 +533,7 @@ figcaption {
 
 .main-content {
   flex: 1 100%;
+  padding-top: 100px;
   transition: all 1s ease;
 }