From 46def0d67161f473958dc58f794273a8f7529f30 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Wed, 2 Dec 2020 12:56:58 +0200
Subject: [PATCH] new header for filter

---
 src/components/FilterHeader.vue | 159 ++++++++++++++++++++++++++++++++
 src/pages/News.vue              |  34 ++++---
 2 files changed, 178 insertions(+), 15 deletions(-)
 create mode 100644 src/components/FilterHeader.vue

diff --git a/src/components/FilterHeader.vue b/src/components/FilterHeader.vue
new file mode 100644
index 000000000..9186f3397
--- /dev/null
+++ b/src/components/FilterHeader.vue
@@ -0,0 +1,159 @@
+<template>
+  <div class="fixed z-50 mb-5 h-16 bg-gray-100 w-full">
+    <header
+      class="flex items-center flex-wrap container mx-auto pt-4 pb-0 sm:px-0 transition-all transition-500"
+      :class="{
+        'opacity-100': !disableScroll && scrollPosition > headerHeight,
+        'opacity-0': !disableScroll && scrollPosition < headerHeight,
+      }"
+    >
+      <div class="flex items-center justify-between px-4 sm:p-0">
+        <div class="inline-flex items-center flex-shrink-0">
+          <span
+            class="flex hidden md:block text-xl p-3 capitalize tracking-tight"
+            >filter:</span
+          >
+        </div>
+
+        <div class="sm:hidden ml-auto">
+          <button
+            @click="isOpen = !isOpen"
+            type="button"
+            class="block text-gray-500 hover:text-white focus:text-white focus:outline-none p-3"
+          >
+            <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
+              <path
+                v-if="isOpen"
+                fill-rule="evenodd"
+                d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"
+              />
+              <path
+                v-if="!isOpen"
+                fill-rule="evenodd"
+                d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <nav
+        :class="isOpen ? 'block' : 'hidden'"
+        class="md:order-2 px-2 pt-2 pb-4 sm:flex sm:p-0 bg-transparent"
+      >
+        <ul
+          class="list-none sm:flex justify-left uppercase transition-all transition-500"
+        >
+          <li
+            class="py-1"
+            :key="header.name"
+            v-for="(header, index) in headers"
+            :class="{
+              'mr-2': index != Object.keys(headers).length - 1,
+            }"
+          >
+            <div class="relative" x-data="{ open: false }">
+              <button
+                @click="setActive(index)"
+                class="flex flex-row items-center w-full md:w-auto md:inline md:mt-0 md:ml-4 animated-link"
+              >
+                <span class="capitalize">{{ header }}</span>
+                <svg
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  :class="{
+                    'rotate-180': active == index,
+                    'rotate-0': !active == index,
+                  }"
+                  class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                    clip-rule="evenodd"
+                  ></path>
+                </svg>
+              </button>
+              <div
+                v-if="active == index"
+                x-show="open"
+                x-transition:enter="transition ease-out duration-100"
+                x-transition:enter-start="transform opacity-0 scale-95"
+                x-transition:enter-end="transform opacity-100 scale-100"
+                x-transition:leave="transition ease-in duration-75"
+                x-transition:leave-start="transform opacity-100 scale-100"
+                x-transition:leave-end="transform opacity-0 scale-95"
+                class="absolute w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-30"
+              >
+                <div
+                  v-if="open"
+                  class="px-2 py-2 bg-white rounded-md shadow dark:bg-gray-700"
+                >
+                  <g-link
+                    :to="header.link"
+                    class="block px-4 py-2 capitalize mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
+                    >All</g-link
+                  >
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </nav>
+    </header>
+  </div>
+</template>
+
+<script>
+/*
+ * I'm a lazy guy, so i used this script
+ * https://codepen.io/ninaregli/pen/OjeMLP
+ * to calculate the current scroll position
+ *
+ * Will be used to add/remove the additional
+ * css classes to show the sticky navbar
+ */
+
+export default {
+  props: {
+    disableScroll: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data: function () {
+    return {
+      scrollPosition: null,
+      headerHeight: 0,
+      isOpen: false,
+      open: false,
+      active: null,
+      headers: ["All topics", "All years", "All months"],
+    };
+  },
+
+  methods: {
+    updateScroll() {
+      this.scrollPosition = window.scrollY;
+    },
+    setHeaderHeight(height) {
+      this.headerHeight = height;
+    },
+    result() {
+      window.location.href = `/search?query=${this.search}`;
+    },
+    setActive(index) {
+      this.active = index;
+      this.open = !this.open;
+    },
+  },
+
+  mounted() {
+    if (!this.disableScroll) {
+      var height = document.getheaderById("header").clientHeight;
+      this.setHeaderHeight(height);
+      window.addEventListener("scroll", this.updateScroll);
+    }
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/pages/News.vue b/src/pages/News.vue
index 243a8285f..2f4fe11ce 100644
--- a/src/pages/News.vue
+++ b/src/pages/News.vue
@@ -1,8 +1,10 @@
 <template>
   <Layout>
-    <div class="container sm:pxi-0 mx-auto">
-      <div class="flex flex-wrap with-large pt-8 pb-8 mx-4 sm:-mx-4">
-        <PostListItem :showtags=true
+    <FilterHeader />
+    <div class="container sm:pxi-0 mx-auto overflow-hidden">
+      <div class="flex flex-wrap with-large pt-12 mt-8 pb-8 mx-4 sm:-mx-4">
+        <PostListItem
+          :showtags="true"
           v-for="edge in news.edges"
           :key="edge.node.id"
           :record="edge.node"
@@ -52,6 +54,7 @@ query{
 </page-query>
 
 <script>
+import FilterHeader from "~/components/FilterHeader.vue";
 import PostListItem from "~/components/PostListItem.vue";
 import Pagination from "~/components/Pagination.vue";
 
@@ -62,29 +65,30 @@ export default {
   components: {
     PostListItem,
     Pagination,
+    FilterHeader,
   },
   computed: {
     baseurl: function () {
       return "";
     },
 
-    news(){
-      var res = {}
-      var old = this.$page.entries
-      res.totalCount = old.totalCount
-      res.pageInfo = old.pageInfo
-      res.edges = []
+    news() {
+      var res = {};
+      var old = this.$page.entries;
+      res.totalCount = old.totalCount;
+      res.pageInfo = old.pageInfo;
+      res.edges = [];
 
-      for(var i=0; i < old.edges.length; i++){
+      for (var i = 0; i < old.edges.length; i++) {
         var node = old.edges[i].node;
-        const diff =  Math.abs(new Date() - new Date(node.datetime))
+        const diff = Math.abs(new Date() - new Date(node.datetime));
         const diffDays = Math.ceil(diff / (1000 * 60 * 60 * 24));
-        if(diffDays <= 30){
-          res.edges.push({"node": node, "id": node.id})
+        if (diffDays <= 30) {
+          res.edges.push({ node: node, id: node.id });
         }
       }
       return res;
-    }
-  }
+    },
+  },
 };
 </script>