Initial commit

resources/js/layouts/basic.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="basic-layout flex items-center justify-center m-0">
+    <child />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BasicLayout'
+}
+</script>
+
+<style lang="scss">
+.basic-layout {
+  color: #636b6f;
+  height: 100vh;
+  font-weight: 100;
+  position: relative;
+
+  .links > a {
+    color: #636b6f;
+    padding: 0 25px;
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: .1rem;
+    text-decoration: none;
+    text-transform: uppercase;
+  }
+}
+</style>

resources/js/layouts/default.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="main-layout min-h-screen flex flex-col">
+    <navbar />
+
+    <div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl px-4">
+      <alert v-if="alert.type"
+             class="my-4"
+             :message="alert.message"
+             :type="alert.type"
+             :auto-close="alert.autoClose"
+             :confirmation-proceed="alert.confirmationProceed"
+             :confirmation-cancel="alert.confirmationCancel"
+             @close="closeAlert"
+      />
+    </div>
+
+    <child class="flex-grow" />
+  </div>
+</template>
+
+<script>
+import Navbar from '~/components/Navbar'
+import Alert from '../components/common/Alert'
+
+export default {
+  name: 'MainLayout',
+
+  components: {
+    Navbar, Alert
+  },
+
+  computed: {
+    alert () {
+      return this.$root.alert
+    }
+  },
+
+  methods: {
+    closeAlert () {
+      this.$root.alert = {
+        type: null,
+        autoClose: 0,
+        message: '',
+        confirmationProceed: null,
+        confirmationCancel: null
+      }
+    }
+  }
+}
+</script>