Make main menu reactive

resources/js/Shared/Layout.vue

@@ -11,7 +11,7 @@
             <dropdown class="md:hidden" placement="bottom-end">
               <svg class="fill-white w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" /></svg>
               <div slot="dropdown" class="mt-2 px-8 py-4 shadow-lg bg-indigo-darker rounded">
-                <main-menu />
+                <main-menu :url="url()" />
               </div>
             </dropdown>
           </div>
@@ -34,7 +34,7 @@
           </div>
         </div>
         <div class="flex flex-grow overflow-hidden">
-          <main-menu class="bg-indigo-darker flex-no-shrink w-56 p-12 hidden md:block overflow-y-auto" />
+          <main-menu :url="url()" class="bg-indigo-darker flex-no-shrink w-56 p-12 hidden md:block overflow-y-auto" />
           <div class="w-full overflow-hidden px-4 py-8 md:p-12 overflow-y-auto" scroll-region>
             <flash-messages />
             <slot />
@@ -67,6 +67,9 @@ export default {
     }
   },
   methods: {
+    url() {
+      return location.pathname.substr(1)
+    },
     hideDropdownMenus() {
       this.showUserMenu = false
     },

resources/js/Shared/MainMenu.vue

@@ -34,13 +34,16 @@ export default {
   components: {
     Icon,
   },
+  props: {
+    url: String,
+  },
   methods: {
     isUrl(...urls) {
       if (urls[0] === '') {
-        return location.pathname.substr(1) === ''
+        return this.url === ''
       }
 
-      return urls.filter(url => location.pathname.substr(1).startsWith(url)).length
+      return urls.filter(url => this.url.startsWith(url)).length
     },
   },
 }