Update main menu to use url on Inertia page object

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-800 rounded">
-                <main-menu :url="url()" />
+                <main-menu />
               </div>
             </dropdown>
           </div>
@@ -34,7 +34,7 @@
           </div>
         </div>
         <div class="md:flex md:flex-grow md:overflow-hidden">
-          <main-menu :url="url()" class="hidden md:block bg-indigo-800 flex-shrink-0 w-56 p-12 overflow-y-auto" />
+          <main-menu class="hidden md:block bg-indigo-800 flex-shrink-0 w-56 p-12 overflow-y-auto" />
           <div class="md:flex-1 px-4 py-8 md:p-12 md:overflow-y-auto" scroll-region>
             <flash-messages />
             <slot />
@@ -60,10 +60,5 @@ export default {
     Logo,
     MainMenu,
   },
-  methods: {
-    url() {
-      return location.pathname.substr(1)
-    },
-  },
 }
 </script>

resources/js/Shared/MainMenu.vue

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