add nova

nova/resources/js/layouts/AppLayout.vue

@@ -0,0 +1,75 @@
+<template>
+  <div id="nova">
+    <MainHeader />
+
+    <!-- Content -->
+    <div dusk="content">
+      <div
+        class="hidden lg:block lg:absolute left-0 bottom-0 lg:top-[56px] lg:bottom-auto w-60 px-3 py-8"
+      >
+        <!-- The Main Menu on desktop gets extra padding to keep the bottom of the sidebar from feeling crowded -->
+        <MainMenu class="pb-24" data-screen="desktop" />
+      </div>
+
+      <div class="p-4 md:py-8 md:px-12 lg:ml-60 space-y-8">
+        <Breadcrumbs v-if="breadcrumbsEnabled" />
+
+        <FadeTransition>
+          <slot />
+        </FadeTransition>
+
+        <Footer />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import MainHeader from '@/layouts/MainHeader'
+import Footer from '@/layouts/Footer'
+
+export default {
+  components: {
+    MainHeader,
+    Footer,
+  },
+
+  mounted() {
+    Nova.$on('error', this.handleError)
+    Nova.$on('token-expired', this.handleTokenExpired)
+  },
+
+  beforeUnmount() {
+    Nova.$off('error', this.handleError)
+    Nova.$off('token-expired', this.handleTokenExpired)
+  },
+
+  methods: {
+    handleError(message) {
+      Nova.error(message)
+    },
+
+    handleTokenExpired() {
+      // @TODO require Nova._createToast() to support action with link.
+      Nova.$toasted.show(this.__('Sorry, your session has expired.'), {
+        action: {
+          onClick: () => Nova.redirectToLogin(),
+          text: this.__('Reload'),
+        },
+        duration: null,
+        type: 'error',
+      })
+
+      setTimeout(() => {
+        Nova.redirectToLogin()
+      }, 5000)
+    },
+  },
+
+  computed: {
+    breadcrumbsEnabled() {
+      return Nova.config('breadcrumbsEnabled')
+    },
+  },
+}
+</script>

nova/resources/js/layouts/Auth.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="py-6 px-1 md:px-2 lg:px-6">
+    <div class="mx-auto py-8 max-w-sm flex justify-center">
+      <AppLogo class="h-8" />
+    </div>
+
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Auth',
+}
+</script>

nova/resources/js/layouts/ErrorLayout.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="flex justify-center h-screen">
+    <div
+      class="z-50 flex items-center justify-center p-6"
+      :dusk="`${status}-error-page`"
+    >
+      <div
+        class="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-20"
+        role="alert"
+      >
+        <ErrorPageIcon class="shrink-0 md:w-[20rem]" />
+
+        <div class="md:w-[20rem] md:shrink-0 space-y-2 md:space-y-4">
+          <slot />
+
+          <Link
+            :href="$url('/')"
+            class="inline-flex items-center focus:outline-none focus:ring rounded border-2 border-primary-300 dark:border-gray-500 hover:border-primary-500 active:border-primary-400 dark:hover:border-gray-400 dark:active:border-gray-300 bg-white dark:bg-transparent text-primary-500 dark:text-gray-400 px-3 py-2 h-9 font-bold tracking-wide uppercase"
+            tabindex="0"
+            replace
+          >
+            {{ __('Go Home') }}
+          </Link>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    status: {
+      type: String,
+      default: '403',
+    },
+  },
+}
+</script>

nova/resources/js/layouts/Footer.vue

@@ -0,0 +1,16 @@
+<template>
+  <div
+    class="mt-8 leading-normal text-xs text-gray-500 space-y-1"
+    v-html="footer"
+  />
+</template>
+
+<script>
+export default {
+  computed: {
+    footer() {
+      return window.Nova.config('footer')
+    },
+  },
+}
+</script>

nova/resources/js/layouts/Guest.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  //
+}
+</script>

nova/resources/js/layouts/MainHeader.vue

@@ -0,0 +1,175 @@
+<template>
+  <div>
+    <header
+      class="bg-white dark:bg-gray-800 flex items-center h-14 shadow-b dark:border-b dark:border-gray-700"
+    >
+      <Button
+        icon="bars-3"
+        class="lg:hidden ml-1"
+        variant="action"
+        @click.prevent="toggleMainMenu"
+        :aria-label="__('Toggle Sidebar')"
+        :aria-expanded="mainMenuShown ? 'true' : 'false'"
+      />
+
+      <div class="hidden lg:w-60 shrink-0 md:flex items-center">
+        <Link
+          :href="$url('/')"
+          class="text-gray-900 hover:text-gray-500 active:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300 dark:active:text-gray-500 h-12 rounded-lg flex items-center ml-2 focus:ring focus:ring-inset focus:outline-none ring-primary-200 dark:ring-gray-600 px-4"
+          :aria-label="appName"
+        >
+          <AppLogo class="h-6" />
+        </Link>
+
+        <LicenseWarning />
+      </div>
+
+      <div class="flex flex-1 px-4 sm:px-8 lg:px-12">
+        <GlobalSearch
+          class="relative"
+          v-if="globalSearchEnabled"
+          dusk="global-search-component"
+        />
+
+        <div class="isolate relative flex items-center pl-6 ml-auto">
+          <ThemeDropdown />
+          <div class="relative z-50">
+            <NotificationCenter v-if="notificationCenterEnabled" />
+          </div>
+          <div class="relative z-[40] hidden md:flex ml-2">
+            <UserMenu />
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <!-- Mobile Sidebar -->
+    <teleport to="body">
+      <transition
+        enter-active-class="transition duration-100 ease-out"
+        enter-from-class="opacity-0"
+        enter-to-class="opacity-100"
+        leave-active-class="transition duration-200 ease-in"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+      >
+        <div v-if="mainMenuShown" class="lg:hidden w-60">
+          <div class="fixed inset-0 flex z-50">
+            <div class="fixed inset-0" aria-hidden="true">
+              <div
+                @click="toggleMainMenu"
+                class="absolute inset-0 bg-gray-600/75 dark:bg-gray-900/75"
+              />
+            </div>
+
+            <div
+              ref="modalContent"
+              class="bg-white dark:bg-gray-800 relative flex flex-col max-w-xxs w-full"
+            >
+              <!-- Close Button -->
+              <div class="absolute top-0 right-0 -mr-12 pt-2">
+                <button
+                  @click.prevent="toggleMainMenu"
+                  class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
+                  :aria-label="__('Close Sidebar')"
+                >
+                  <!-- Heroicon name: outline/x -->
+                  <svg
+                    class="h-6 w-6 text-white"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    aria-hidden="true"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M6 18L18 6M6 6l12 12"
+                    />
+                  </svg>
+                </button>
+              </div>
+
+              <div class="px-2 border-b border-gray-200 dark:border-gray-700">
+                <Link
+                  :href="$url('/')"
+                  class="text-gray-900 hover:text-gray-500 active:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300 dark:active:text-gray-500 h-12 px-2 rounded-lg flex items-center focus:ring focus:ring-inset focus:outline-none"
+                  :aria-label="appName"
+                >
+                  <AppLogo class="h-6" />
+                </Link>
+              </div>
+
+              <div
+                class="flex flex-col gap-2 justify-between h-full py-3 px-3 overflow-x-auto"
+              >
+                <div class="py-1">
+                  <MainMenu data-screen="responsive" />
+                </div>
+                <div class="mt-auto">
+                  <MobileUserMenu />
+                </div>
+              </div>
+
+              <div class="shrink-0 w-14" aria-hidden="true">
+                <!-- Dummy element to force sidebar to shrink to fit close icon -->
+              </div>
+            </div>
+          </div>
+        </div>
+      </transition>
+    </teleport>
+  </div>
+</template>
+
+<script setup>
+import { useStore } from 'vuex'
+import LicenseWarning from '@/components/LicenseWarning'
+import { Button } from 'laravel-nova-ui'
+import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+
+const store = useStore()
+
+const modalContent = ref(null)
+
+const { activate, deactivate } = useFocusTrap(modalContent, {
+  initialFocus: true,
+  allowOutsideClick: false,
+  escapeDeactivates: false,
+})
+
+const toggleMainMenu = () => store.commit('toggleMainMenu')
+
+const globalSearchEnabled = computed(() => Nova.config('globalSearchEnabled'))
+
+const notificationCenterEnabled = computed(() =>
+  Nova.config('notificationCenterEnabled')
+)
+
+const mainMenuShown = computed(() => store.getters.mainMenuShown)
+const appName = computed(() => Nova.config('appName'))
+
+watch(
+  () => mainMenuShown.value,
+  newValue => {
+    if (newValue === true) {
+      document.body.classList.add('overflow-y-hidden')
+      Nova.pauseShortcuts()
+      return
+    }
+
+    document.body.classList.remove('overflow-y-hidden')
+    Nova.resumeShortcuts()
+    deactivate()
+  }
+)
+
+onBeforeUnmount(() => {
+  document.body.classList.remove('overflow-hidden')
+  Nova.resumeShortcuts()
+  deactivate()
+})
+</script>