Update navigation icons

Author: DaneEveritt

resources/assets/scripts/components/Icon.vue

@@ -0,0 +1,18 @@
+<template>
+    <i class="ion" :class="iconClass"></i>
+</template>
+
+<script>
+    export default {
+        props: {
+            type: {type: String, required: true},
+            iconStyle: {type: String, default: 'ios'},
+        },
+
+        computed: {
+            iconClass: function () {
+                return `ion-${this.iconStyle}-${this.type}`;
+            }
+        },
+    }
+</script>

resources/assets/scripts/components/core/Navigation.vue

@@ -44,22 +44,22 @@
             <ul>
                 <li>
                     <router-link :to="{ name: 'dashboard' }">
-                        <server-icon aria-label="Server dashboard" class="h-4"/>
+                        <Icon type="cube"/>
                     </router-link>
                 </li>
                 <li>
                     <router-link :to="{ name: 'account' }">
-                        <user-icon aria-label="Profile management" class="h-4"/>
+                        <Icon type="contact"/>
                     </router-link>
                 </li>
                 <li>
                     <a :href="this.route('admin.index')">
-                        <settings-icon aria-label="Administrative controls" class="h-4"/>
+                        <Icon type="cog"/>
                     </a>
                 </li>
                 <li>
                     <a :href="this.route('auth.logout')" v-on:click.prevent="doLogout">
-                        <log-out-icon aria-label="Sign out" class="h-4"/>
+                        <Icon type="log-out"/>
                     </a>
                 </li>
             </ul>
@@ -70,12 +70,11 @@
 <script>
     import debounce from 'lodash/debounce';
     import { mapState } from 'vuex';
-    import { LogOutIcon, ServerIcon, SettingsIcon, UserIcon } from 'vue-feather-icons'
+    import Icon from '../Icon';
 
     export default {
         name: 'navigation',
-        components: { LogOutIcon, ServerIcon, SettingsIcon, UserIcon },
-
+        components: {Icon},
         data: function () {
             return {
                 loadingResults: false,

resources/assets/styles/components/navigation.css

@@ -17,7 +17,8 @@
 
     & > .search-box {
         & > .search-input {
-            @apply .text-sm .p-2 .mt-3 .mx-3 .rounded .border .border-blue-darker .bg-grey-lightest .text-grey-darkest;
+            @apply .text-sm .p-2 .mx-3 .rounded .border .border-blue-darker .bg-grey-lightest .text-grey-darkest;
+            margin-top: 0.6rem;
             width: 26rem;
             opacity: 0.7;
             transition: ease-in-out opacity 150ms;
@@ -53,7 +54,7 @@
             & > li {
                 @apply .inline-block;
                 & > a {
-                    @apply .block .h-full .no-underline .text-grey-lighter .font-light .text-sm .p-5;
+                    @apply .block .h-full .no-underline .text-grey-lighter .font-light .text-xl .px-5 .py-4;
 
                     &:hover {
                         @apply .bg-blue-dark;