Fix compatibility issues with Nova 4.28.0 (#122)

composer.json

@@ -16,7 +16,7 @@
     "license": "MIT",
     "require": {
         "php": ">=8.1",
-        "laravel/nova": "^4.0"
+        "laravel/nova": "^4.28.0"
     },
     "autoload": {
         "psr-4": {

nova.mix.js

@@ -19,6 +19,7 @@ class NovaExtension {
         webpackConfig.resolve.alias = {
             ...(webpackConfig.resolve.alias || {}),
             'laravel-nova': path.join(__dirname, '../../vendor/laravel/nova/resources/js/mixins/packages.js'),
+            'laravel-nova-ui': path.join(__dirname, '../../vendor/laravel/nova/node_modules/laravel-nova-ui'),
             '@': path.resolve(__dirname, '../../vendor/laravel/nova/resources/js/'),
         }
 

package.json

@@ -6,13 +6,13 @@
         "nova:install": "npm --prefix='../../vendor/laravel/nova' ci"
     },
     "devDependencies": {
-        "@vue/compiler-sfc": "^3.2.22",
+        "@vue/compiler-sfc": "^3.3.7",
         "laravel-mix": "^6.0.41",
         "mix-tailwindcss": "^1.3.0",
-        "sass": "^1.69.3",
+        "sass": "^1.69.4",
         "sass-loader": "^13.3.2",
-        "tailwindcss": "^3.3.3",
-        "vue-collapsed": "^1.2.8",
+        "tailwindcss": "^3.3.4",
+        "vue-collapsed": "^1.2.9",
         "vue-loader": "^17.3.0"
     }
 }

resources/js/components/Menu.vue

@@ -252,15 +252,15 @@
 
         @screen lg {
 
-            div[data-testid="content"] {
+            div[dusk="content"] {
                 display: flex;
             }
 
-            div[data-testid="content"] > div:first-child {
+            div[dusk="content"] > div:first-child {
                 position: relative;
             }
 
-            div[data-testid="content"] > div:last-child {
+            div[dusk="content"] > div:last-child {
                 margin-left: 0;
                 flex: 1;
                 width: 0;

resources/js/tool.js

@@ -91,7 +91,7 @@ Nova.booting(app => {
                 let element = null
 
                 if (screen === 'desktop') {
-                    element = document.querySelector('#nova div[data-testid="content"] > div:first-child')
+                    element = document.querySelector('#nova div[dusk="content"] > div:first-child')
                 }
 
                 if (screen === 'responsive') {