From b7dc94b0e2fcc064e01c6dd7132ac513ca364d14 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Fri, 14 Jun 2019 12:29:58 +0100
Subject: [PATCH] Re-order classes, fix jump in navbar on load

---
 resources/js/components/Navbar.vue       | 8 ++++----
 source/_partials/layout/navbar.html.twig | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/Navbar.vue b/resources/js/components/Navbar.vue
index 10fa420e..08a4636b 100644
--- a/resources/js/components/Navbar.vue
+++ b/resources/js/components/Navbar.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="md:flex">
-      <div class="w-full md:w-1/3 lg:w-1/4 flex items-center">
+      <div class="w-full flex items-center md:w-1/3 lg:w-1/4">
         <div class="w-3/4 py-6">
           <div class="text-sm">
             <a
@@ -27,7 +27,7 @@
       </div>
 
       <nav
-        class="w-full py-4 -mx-4 mt-2px md:mt-0 md:mx-0 block md:flex md:flex-wrap md:flex-1 md:justify-end bg-blue-700 md:bg-blue-500 absolute md:relative border-b md:border-b-0"
+        class="block w-full absolute py-4 -mx-4 mt-2px bg-blue-700 border-b md:mt-0 md:mx-0 md:relative md:flex md:flex-wrap md:flex-1 md:justify-end md:bg-blue-500 md:border-b-0"
         style="margin-top: 3px"
         :class="{ hidden: hidden }"
         role="navigation"
@@ -35,8 +35,8 @@
         <a
           v-for="(item, index) in items"
           :key="index"
-          class="block text-white no-underline focus:outline-none py-3 md:py-2 md:py-1 px-4 md:px-2 mx-4 md:mx-2 mt-1 md:mt-0 rounded md:mr-0 hover:underline text-sm -mb-px"
-          :class="{'bg-blue-500 md:bg-blue-700 hover:border-blue-600 hover:no-underline cursor-default': isActive(item)}"
+          class="block py-3 px-4 mx-4 mt-1 -mb-px rounded text-sm text-white no-underline hover:underline focus:outline-none md:py-1 md:px-2 md:mx-2 md:mt-0 md:mr-0"
+          :class="{ 'cursor-default bg-blue-500 hover:border-blue-600 hover:no-underline md:bg-blue-700': isActive(item) }"
           :href="item.href"
         >
           <span class="flex items-center h-full">{{ item.title }}</span>
diff --git a/source/_partials/layout/navbar.html.twig b/source/_partials/layout/navbar.html.twig
index 7d53b04a..de7f5831 100644
--- a/source/_partials/layout/navbar.html.twig
+++ b/source/_partials/layout/navbar.html.twig
@@ -1,4 +1,4 @@
-<div class="bg-blue-500 border-b-3 border-blue-700 mb-6 w-full fixed top-0 z-20">
+<div class="w-full fixed top-0 mb-6 z-20 bg-blue-500 border-b-3 border-blue-700">
     <div class="container">
         <div class="block py-6 v-cloak-block">
             <div class="text-sm">