From 317237c6bdb757907223602ebb289895fe15d417 Mon Sep 17 00:00:00 2001
From: Andrea Vos <andrea@avris.it>
Date: Wed, 23 Sep 2020 20:34:35 +0200
Subject: [PATCH] #55 menu

---
 components/Header.vue         | 76 +++++++++++++++++++++++++++++++----
 components/Literature.vue     |  8 ++--
 components/LiteratureMenu.vue | 30 --------------
 components/NotFound.vue       |  4 +-
 layouts/default.vue           |  1 +
 pages/_.vue                   |  1 -
 pages/dowolne.vue             |  1 -
 pages/index.vue               |  5 ---
 pages/literatura.vue          |  3 --
 pages/neutratywy.vue          |  1 -
 10 files changed, 75 insertions(+), 55 deletions(-)
 delete mode 100644 components/LiteratureMenu.vue

diff --git a/components/Header.vue b/components/Header.vue
index 88745668f..df8e73ea1 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -1,21 +1,81 @@
 <template>
-    <header class="d-flex justify-content-between mb-3">
-        <h1 class="h4">
+    <header class="mb-4">
+        <h1 class="mb-3">
             <nuxt-link to="/">
                 <Icon v="tags"/>
                 Zaimki.pl
             </nuxt-link>
         </h1>
-        <p class="mb-0'">
-            <nuxt-link to="/" class="btn btn-outline-primary btn-sm">
-                <Icon v="home"/>
-                Strona główna
-            </nuxt-link>
-        </p>
+        <div class="d-block d-md-none">
+            <div class="btn-group-vertical btn-block nav-custom mb-2">
+                <nuxt-link v-for="link in links" :to="link.link" :class="`btn btn-sm ${isActiveRoute(link) ? 'active' : ''}`">
+                    <Icon :v="link.icon"/>
+                    {{ link.textLong || link.text }}
+                </nuxt-link>
+            </div>
+        </div>
+        <div class="d-none d-md-block">
+            <div class="btn-group btn-block nav-custom mb-2">
+                <nuxt-link v-for="link in links" :to="link.link" :class="`btn btn-sm ${isActiveRoute(link) ? 'active' : ''}`">
+                    <Icon :v="link.icon"/>
+                    {{ link.text }}
+                </nuxt-link>
+            </div>
+        </div>
     </header>
 </template>
 
 <script>
     export default {
+        data() {
+            return {
+                links: [
+                    { link: '/', icon: 'home', text: 'Zaimki', textLong: 'Lista zaimków', extra: ['all'] },
+                    { link: '/literatura', icon: 'books', text: 'Teksty kultury', textLong: 'Przykłady z tekstów kultury' },
+                    { link: '/neutratywy', icon: 'atom-alt', text: 'Neutratywy', textLong: 'Słownik neutratywów' },
+                ],
+            };
+        },
+        methods: {
+            isActiveRoute(link) {
+                return this.$route.path === link.link || (link.extra || []).includes(this.$route.name);
+            },
+        },
     }
 </script>
+
+<style lang="scss" scoped>
+    @import "assets/style";
+
+    @include media-breakpoint-down('sm', $grid-breakpoints) {
+        .nav-custom {
+            .btn {
+                border-left: 1px solid $gray-500;
+                border-radius: 0;
+
+                &:hover, &:focus, &.active {
+                    border-left: 3px solid $primary;
+                    padding-left: calc(#{$btn-padding-x-sm} - 2px);
+                    color: $primary;
+                }
+
+                text-align: left;
+            }
+        }
+    }
+
+    @include media-breakpoint-up('md', $grid-breakpoints) {
+        .nav-custom {
+            .btn {
+                border-bottom: 1px solid $gray-500;
+                border-radius: 0;
+
+                &:hover, &:focus, &.active {
+                    border-bottom: 3px solid $primary;
+                    padding-bottom: calc(#{$btn-padding-y-sm} - 2px);
+                    color: $primary;
+                }
+            }
+        }
+    };
+</style>
diff --git a/components/Literature.vue b/components/Literature.vue
index 3b6b0fd1f..9db957772 100644
--- a/components/Literature.vue
+++ b/components/Literature.vue
@@ -1,12 +1,12 @@
 <template>
     <div v-if="Object.keys(sources).length">
         <h2 class="h4">
-            <Icon v="books"/>
-            Przykłady z tekstów kultury:
+            <nuxt-link to="/literatura">
+                <Icon v="books"/>
+                Przykłady z tekstów kultury:
+            </nuxt-link>
         </h2>
 
-        <LiteratureMenu/>
-
         <section v-for="(optionSources, option) in sources">
             <h3 class="h5">
                 <nuxt-link :to="'/' + option">
diff --git a/components/LiteratureMenu.vue b/components/LiteratureMenu.vue
deleted file mode 100644
index 209f01f3c..000000000
--- a/components/LiteratureMenu.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-    <ul class="list-inline small">
-        <li class="list-inline-item">
-            <a href="https://twitter.com/VaultAusir" target="_blank" rel="noopener">
-                <Icon v="book-reader"/>
-                zebrane przez Pawła Dembowskiego
-            </a>
-        </li>
-        <li class="list-inline-item">
-            <a href="mailto:pawel.dembowski@gmail.com" target="_blank" rel="noopener">
-                <Icon v="envelope-open-text"/>
-                dodaj przykłady do listy
-            </a>
-        </li>
-        <li class="list-inline-item" v-if="!all">
-            <nuxt-link to="/literatura">
-                <Icon v="books"/>
-                zobacz przykłady dla innych form
-            </nuxt-link>
-        </li>
-    </ul>
-</template>
-
-<script>
-    export default {
-        props: {
-            all: { type: Boolean },
-        }
-    }
-</script>
diff --git a/components/NotFound.vue b/components/NotFound.vue
index 1665ff93f..836bac069 100644
--- a/components/NotFound.vue
+++ b/components/NotFound.vue
@@ -1,9 +1,9 @@
 <template>
     <div class="container">
-        <h1>
+        <h2>
             <Icon v="person-dolly-empty"/>
             Strony nie znaleziono
-        </h1>
+        </h2>
 
         <p class="h4 mt-4">
             <nuxt-link to="/">
diff --git a/layouts/default.vue b/layouts/default.vue
index db09dd127..c86dc805e 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,6 +1,7 @@
 <template>
     <div class="d-flex flex-column vh-100">
         <div class="flex-grow-1">
+            <Header/>
             <Nuxt/>
         </div>
         <div class="container">
diff --git a/pages/_.vue b/pages/_.vue
index 3158fbab7..5d1fd284b 100644
--- a/pages/_.vue
+++ b/pages/_.vue
@@ -1,7 +1,6 @@
 <template>
     <NotFound v-if="!selectedTemplate"/>
     <div class="container" v-else>
-        <Header/>
         <h2>
             <Icon v="tag"/>
             Moje zaimki to:
diff --git a/pages/dowolne.vue b/pages/dowolne.vue
index 7de5d4deb..2e81ef120 100644
--- a/pages/dowolne.vue
+++ b/pages/dowolne.vue
@@ -1,6 +1,5 @@
 <template>
     <div class="container">
-        <Header/>
         <h2>
             <Icon v="tag"/>
             Moje zaimki to:
diff --git a/pages/index.vue b/pages/index.vue
index 0e3f0bd3f..1a60d00e4 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,10 +1,5 @@
 <template>
     <div class="container">
-        <h1>
-            <Icon v="tags"/>
-            Zaimki.pl
-        </h1>
-
         <section>
             <About/>
             <p>
diff --git a/pages/literatura.vue b/pages/literatura.vue
index 72a428152..6ccfe531d 100644
--- a/pages/literatura.vue
+++ b/pages/literatura.vue
@@ -1,13 +1,10 @@
 <template>
     <div class="container">
-        <Header/>
         <h2>
             <Icon v="books"/>
             Niebinarna polszczyzna w tekstach kultury
         </h2>
 
-        <LiteratureMenu all/>
-
         <section>
             <Share title="Niebinarna polszczyzna w tekstach kultury"/>
         </section>
diff --git a/pages/neutratywy.vue b/pages/neutratywy.vue
index f8e91389a..80401d443 100644
--- a/pages/neutratywy.vue
+++ b/pages/neutratywy.vue
@@ -1,6 +1,5 @@
 <template>
     <div class="container">
-        <Header/>
         <h2>
             <Icon v="atom-alt"/>
             Słownik neutratywów