From 4d9f2206448a3b41389c630c9ddee919f6a914d3 Mon Sep 17 00:00:00 2001
From: Daniel-I-Am <djdecloet@gmail.com>
Date: Sun, 5 Sep 2021 18:59:56 +0200
Subject: [PATCH] Make admin panel slightly nicer

---
 resources/js/apps/AppAdmin.vue              | 12 +++++++++
 resources/js/components/AdminPageHeader.vue | 29 +++++++++++++++++++++
 resources/js/components/AdminSiteNav.vue    | 10 +++++++
 resources/js/views/AdminHome.vue            | 18 ++++++++++++-
 4 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 resources/js/components/AdminPageHeader.vue
 create mode 100644 resources/js/components/AdminSiteNav.vue

diff --git a/resources/js/apps/AppAdmin.vue b/resources/js/apps/AppAdmin.vue
index 2785996..c82f80f 100644
--- a/resources/js/apps/AppAdmin.vue
+++ b/resources/js/apps/AppAdmin.vue
@@ -1,3 +1,15 @@
 <template>
+    <admin-page-header></admin-page-header>
+
     <router-view></router-view>
 </template>
+
+<script>
+import AdminPageHeader from "../components/AdminPageHeader.vue";
+
+export default {
+    components: {
+        AdminPageHeader,
+    }
+}
+</script>
diff --git a/resources/js/components/AdminPageHeader.vue b/resources/js/components/AdminPageHeader.vue
new file mode 100644
index 0000000..f74d134
--- /dev/null
+++ b/resources/js/components/AdminPageHeader.vue
@@ -0,0 +1,29 @@
+<template>
+    <div class="header">
+        <div class="container">
+            <header>
+                <router-link class="brand" :to="{ name: 'index' }">
+                    <img
+                        class="brand-logo"
+                        src="//via.placeholder.com/256"
+                        alt="Brand Logo"
+                    />
+                    <span class="brand-name">Admin Panel</span>
+                </router-link>
+                <nav class="site-nav">
+                    <admin-site-nav></admin-site-nav>
+                </nav>
+            </header>
+        </div>
+    </div>
+</template>
+
+<script>
+import AdminSiteNav from './AdminSiteNav.vue';
+
+export default {
+    components: {
+        AdminSiteNav,
+    },
+}
+</script>
diff --git a/resources/js/components/AdminSiteNav.vue b/resources/js/components/AdminSiteNav.vue
new file mode 100644
index 0000000..ca9037a
--- /dev/null
+++ b/resources/js/components/AdminSiteNav.vue
@@ -0,0 +1,10 @@
+<template>
+    <ul class="nav-items">
+        <li class="nav-item">
+            <router-link :to="{ name: 'blog' }">Blog</router-link>
+        </li>
+        <li class="nav-item">
+            <a href="/">Leave Admin</a>
+        </li>
+    </ul>
+</template>
diff --git a/resources/js/views/AdminHome.vue b/resources/js/views/AdminHome.vue
index 13fd089..76a950b 100644
--- a/resources/js/views/AdminHome.vue
+++ b/resources/js/views/AdminHome.vue
@@ -1,3 +1,19 @@
 <template>
-    <h1>Admin Home</h1>
+    <container>
+        <h2>Blog</h2>
+        <ul>
+            <li><router-link :to="{ name: 'blog' }">View blog articles</router-link></li>
+            <li><router-link :to="{ name: 'blog-article-create' }">Create blog post</router-link></li>
+        </ul>
+    </container>
 </template>
+
+<script>
+import Container from "../components/Container.vue"
+
+export default {
+    components: {
+        Container,
+    },
+}
+</script>