From 2cd7d0f3e7138e1190a2f736b0a93cff12d2dd3d Mon Sep 17 00:00:00 2001
From: Freeze455 <baptiste.parmantier.pro@gmail.com>
Date: Tue, 17 Aug 2021 10:20:28 +0200
Subject: [PATCH] :construction: Work in progress

---
 src/components/Footer.vue      | 40 ++++++++++++++++++++++
 src/components/Navbar.vue      | 40 ++++++++--------------
 src/templates/layouts/Base.vue | 35 ++++++++++---------
 src/utils/Icons.ts             | 61 ++++++++++++++++++++++++++++++++++
 src/utils/Navigation.ts        | 13 ++++++++
 src/utils/icons.ts             |  4 ---
 6 files changed, 146 insertions(+), 47 deletions(-)
 create mode 100644 src/components/Footer.vue
 create mode 100644 src/utils/Icons.ts
 create mode 100644 src/utils/Navigation.ts
 delete mode 100644 src/utils/icons.ts

diff --git a/src/components/Footer.vue b/src/components/Footer.vue
new file mode 100644
index 0000000..aa9317a
--- /dev/null
+++ b/src/components/Footer.vue
@@ -0,0 +1,40 @@
+<!-- This example requires Tailwind CSS v2.0+ -->
+<template>
+  <footer class="bg-white dark:bg-gray-800 transition duration-300">
+    <div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
+      <nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
+        <div v-for="item in navigation.main" :key="item.name" class="px-5 py-2">
+          <a :href="item.href" class="text-base text-gray-500 hover:text-gray-900">
+            {{ item.name }}
+          </a>
+        </div>
+      </nav>
+      <div class="mt-8 flex justify-center space-x-6">
+        <a
+          v-for="item in navigation.social"
+          :key="item.name"
+          :href="item.href"
+          rel="nofollow noreferrer noopener"
+          target="_blank"
+          class="text-gray-400 hover:text-gray-500">
+          <span class="sr-only">{{ item.label }}</span>
+          <component :is="item.icon" class="h-6 w-6" aria-hidden="true" />
+        </a>
+      </div>
+      <p class="mt-8 text-center text-base text-gray-400">
+        &copy; 2020 Workflow, Inc. All rights reserved.
+      </p>
+    </div>
+  </footer>
+</template>
+
+<script setup lang="ts">
+import { github, twitter } from '../utils/Icons'
+
+const navigation = {
+  social: [
+    twitter,
+    github,
+  ],
+}
+</script>
\ No newline at end of file
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 8411a35..1322336 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -29,27 +29,18 @@
         </div>
         <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
           <!-- Profile dropdown -->
-          <Menu as="div" class="ml-3 relative">
-            <div>
-              <MenuButton class="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-                <span class="sr-only">Open user menu</span>
-                <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
-              </MenuButton>
-            </div>
-            <transition enter-active-class="transition ease-out duration-200" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
-              <MenuItems class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
-                <MenuItem v-slot="{ active }">
-                  <a href="#" :class="[active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700']">Your Profile</a>
-                </MenuItem>
-                <MenuItem v-slot="{ active }">
-                  <a href="#" :class="[active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700']">Settings</a>
-                </MenuItem>
-                <MenuItem v-slot="{ active }">
-                  <a href="#" :class="[active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700']">Sign out</a>
-                </MenuItem>
-              </MenuItems>
-            </transition>
-          </Menu>
+          <div class="flex space-x-5">
+            <a
+              v-for="item in socials"
+              :key="item.label"
+              :href="item.href"
+              target="_blank"
+              rel="nofollow noreferrer noopener"
+              class="text-gray-400 hover:text-gray-500">
+              <span class="sr-only">{{ item.label }}</span>
+              <component :is="item.icon" class="h-6 w-6" aria-hidden="true" />
+            </a>
+          </div>
         </div>
       </div>
     </div>
@@ -85,12 +76,7 @@ import { BellIcon, MenuIcon, XIcon } from '@heroicons/vue/outline'
 import { NavbarLink } from '../types'
 import NavbarLinkExternal from './NavbarLinkExternal.vue'
 import NavbarLinkLocal from './NavbarLinkLocal.vue'
-
-const links: NavbarLink[] = [
-  { label: 'Home', path: '/', local: true },
-  { label: 'Documentation', path: '/documentation', local: true },
-  { label: 'Github', path: '/', local: false }
-]
+import { socials, links } from '../utils/Navigation'
 </script>
 
 <style>
diff --git a/src/templates/layouts/Base.vue b/src/templates/layouts/Base.vue
index 01d0bcb..add8817 100644
--- a/src/templates/layouts/Base.vue
+++ b/src/templates/layouts/Base.vue
@@ -1,26 +1,29 @@
 <template>
   <Navbar />
-  <div class="pt-[64px] bg-white dark:bg-gray-800 transition duration-300 min-h-screen">
-    <RouterView />
-  </div>
-  <button
-    @click.prevent="toggle()"
-    class="fixed z-50 bottom-5 left-5 w-10 h-10 border-2 rounded focus:outline-none"
-    :class="isDark() ? 'bg-gray-800 border-white' : 'bg-white border-gray-800'">
-    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-      <svg v-if="isDark()" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
-      </svg>
-      <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-800" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
-      </svg>
-    </div>
-  </button>
+    <main class="pt-[64px] bg-white dark:bg-gray-800 transition duration-300 min-h-screen pb-10">
+      <RouterView />
+      <button
+        @click.prevent="toggle()"
+        class="fixed z-50 bottom-5 left-5 w-10 h-10 border-2 rounded focus:outline-none"
+        :class="isDark() ? 'bg-gray-800 border-white' : 'bg-white border-gray-800'">
+        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+          <svg v-if="isDark()" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+          </svg>
+          <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-800" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
+          </svg>
+        </div>
+      </button>
+    </main>
+  <Footer />
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import Navbar from '../../components/Navbar.vue'
+import Footer from '../../components/Footer.vue'
+
 let htmlStatut = ref(false)
 
 onMounted(() => {
diff --git a/src/utils/Icons.ts b/src/utils/Icons.ts
new file mode 100644
index 0000000..6de7cf1
--- /dev/null
+++ b/src/utils/Icons.ts
@@ -0,0 +1,61 @@
+import { defineComponent, h } from 'vue'
+
+export const facebook = {
+  name: 'Facebook',
+  href: '#',
+  icon: defineComponent({
+    render: () =>
+      h('svg', { fill: 'currentColor', viewBox: '0 0 24 24' }, [
+        h('path', {
+          'fill-rule': 'evenodd',
+          d:
+            'M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z',
+          'clip-rule': 'evenodd',
+        }),
+      ]),
+  }),
+}
+
+export const instagram = {
+  label: 'Instagram',
+  href: '#',
+  icon: defineComponent({
+    render: () =>
+      h('svg', { fill: 'currentColor', viewBox: '0 0 24 24' }, [
+        h('path', {
+          'fill-rule': 'evenodd',
+          d:
+            'M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z',
+          'clip-rule': 'evenodd',
+        }),
+      ]),
+  }),
+}
+export const twitter = {
+  label: 'Twitter',
+  href: 'https://twitter.com/factory_discord',
+  icon: defineComponent({
+    render: () =>
+      h('svg', { fill: 'currentColor', viewBox: '0 0 24 24' }, [
+        h('path', {
+          d:
+            'M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84',
+        }),
+      ]),
+  }),
+}
+export const github = {
+  label: 'GitHub',
+  href: 'https://github.com/DiscordFactory',
+  icon: defineComponent({
+    render: () =>
+      h('svg', { fill: 'currentColor', viewBox: '0 0 24 24' }, [
+        h('path', {
+          'fill-rule': 'evenodd',
+          d:
+            'M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z',
+          'clip-rule': 'evenodd',
+        }),
+      ]),
+  }),
+}
\ No newline at end of file
diff --git a/src/utils/Navigation.ts b/src/utils/Navigation.ts
new file mode 100644
index 0000000..535fe0c
--- /dev/null
+++ b/src/utils/Navigation.ts
@@ -0,0 +1,13 @@
+import { NavbarLink } from '../types'
+import { github, twitter } from './Icons'
+
+export const links: NavbarLink[] = [
+  { label: 'Home', path: '/', local: true },
+  { label: 'Documentation', path: '/documentation', local: true },
+  { label: 'Github', path: '/', local: false }
+]
+
+export const socials = [
+  twitter,
+  github,
+]
\ No newline at end of file
diff --git a/src/utils/icons.ts b/src/utils/icons.ts
deleted file mode 100644
index cb8ee5c..0000000
--- a/src/utils/icons.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export const BookOpen = `
-<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
-</svg>`
\ No newline at end of file