From e7a05a2b6f5753fb701711b806bf7c36903263e9 Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Tue, 4 Oct 2022 10:41:02 +1000
Subject: [PATCH 01/36] Course page and Controller

---
 app/Http/Controllers/ShowCoursesController.php | 18 ++++++++++++++++++
 resources/js/Pages/Courses.vue                 | 14 ++++++++++++++
 routes/web.php                                 | 12 +++++++++---
 3 files changed, 41 insertions(+), 3 deletions(-)
 create mode 100644 app/Http/Controllers/ShowCoursesController.php
 create mode 100644 resources/js/Pages/Courses.vue

diff --git a/app/Http/Controllers/ShowCoursesController.php b/app/Http/Controllers/ShowCoursesController.php
new file mode 100644
index 0000000..05731ba
--- /dev/null
+++ b/app/Http/Controllers/ShowCoursesController.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Inertia\Response;
+use Illuminate\Http\Request;
+
+class ShowCoursesController extends Controller
+{
+    public function __invoke(): Response {
+        $courses = [
+            ['title'=> 'Larascape', 'lessons'=>12, 'progress'=> 50]
+        ];
+        return Inertia('Courses', [
+            'courses' => $courses
+        ]);
+    }
+}
diff --git a/resources/js/Pages/Courses.vue b/resources/js/Pages/Courses.vue
new file mode 100644
index 0000000..dad4c9c
--- /dev/null
+++ b/resources/js/Pages/Courses.vue
@@ -0,0 +1,14 @@
+<script setup>
+
+    let props = defineProps(['courses']);
+
+</script>
+
+<style> </style>
+
+<template>
+    <h1> This is courses page</h1>
+    <div v-for="course in courses">
+        {{ course.title }}
+    </div>
+</template>
diff --git a/routes/web.php b/routes/web.php
index 2f15d0e..e25a6c4 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,9 +1,9 @@
 <?php
 
-use Illuminate\Foundation\Application;
-use Illuminate\Support\Facades\Route;
 use Inertia\Inertia;
-
+use Illuminate\Support\Facades\Route;
+use Illuminate\Foundation\Application;
+use App\Http\Controllers\ShowCoursesController;
 /*
 |--------------------------------------------------------------------------
 | Web Routes
@@ -28,4 +28,10 @@
     return Inertia::render('Dashboard');
 })->middleware(['auth', 'verified'])->name('dashboard');
 
+Route::prefix('courses')->name('courses.')->group(function() {
+    Route::middleware(['auth'])->group(function() {
+        Route::get('/', ShowCoursesController::class)->name('courses.show');
+    });
+});
+
 require __DIR__.'/auth.php';

From 7a21130e352809fda5ec27b6e8007ac527000566 Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Tue, 4 Oct 2022 11:17:58 +1000
Subject: [PATCH 02/36] Authenticated layout and custom background colour and
 gradient

---
 resources/js/Components/ApplicationLogo.vue  |  7 +-
 resources/js/Layouts/AuthenticatedLayout.vue | 79 ++++----------------
 resources/js/Pages/Courses.vue               | 14 ++--
 tailwind.config.js                           | 17 +++--
 4 files changed, 38 insertions(+), 79 deletions(-)

diff --git a/resources/js/Components/ApplicationLogo.vue b/resources/js/Components/ApplicationLogo.vue
index d503f69..dff1a6c 100644
--- a/resources/js/Components/ApplicationLogo.vue
+++ b/resources/js/Components/ApplicationLogo.vue
@@ -1,5 +1,6 @@
 <template>
-    <svg viewBox="0 0 316 316" xmlns="http://www.w3.org/2000/svg">
-         <path d="M305.8 81.125C305.77 80.995 305.69 80.885 305.65 80.755C305.56 80.525 305.49 80.285 305.37 80.075C305.29 79.935 305.17 79.815 305.07 79.685C304.94 79.515 304.83 79.325 304.68 79.175C304.55 79.045 304.39 78.955 304.25 78.845C304.09 78.715 303.95 78.575 303.77 78.475L251.32 48.275C249.97 47.495 248.31 47.495 246.96 48.275L194.51 78.475C194.33 78.575 194.19 78.725 194.03 78.845C193.89 78.955 193.73 79.045 193.6 79.175C193.45 79.325 193.34 79.515 193.21 79.685C193.11 79.815 192.99 79.935 192.91 80.075C192.79 80.285 192.71 80.525 192.63 80.755C192.58 80.875 192.51 80.995 192.48 81.125C192.38 81.495 192.33 81.875 192.33 82.265V139.625L148.62 164.795V52.575C148.62 52.185 148.57 51.805 148.47 51.435C148.44 51.305 148.36 51.195 148.32 51.065C148.23 50.835 148.16 50.595 148.04 50.385C147.96 50.245 147.84 50.125 147.74 49.995C147.61 49.825 147.5 49.635 147.35 49.485C147.22 49.355 147.06 49.265 146.92 49.155C146.76 49.025 146.62 48.885 146.44 48.785L93.99 18.585C92.64 17.805 90.98 17.805 89.63 18.585L37.18 48.785C37 48.885 36.86 49.035 36.7 49.155C36.56 49.265 36.4 49.355 36.27 49.485C36.12 49.635 36.01 49.825 35.88 49.995C35.78 50.125 35.66 50.245 35.58 50.385C35.46 50.595 35.38 50.835 35.3 51.065C35.25 51.185 35.18 51.305 35.15 51.435C35.05 51.805 35 52.185 35 52.575V232.235C35 233.795 35.84 235.245 37.19 236.025L142.1 296.425C142.33 296.555 142.58 296.635 142.82 296.725C142.93 296.765 143.04 296.835 143.16 296.865C143.53 296.965 143.9 297.015 144.28 297.015C144.66 297.015 145.03 296.965 145.4 296.865C145.5 296.835 145.59 296.775 145.69 296.745C145.95 296.655 146.21 296.565 146.45 296.435L251.36 236.035C252.72 235.255 253.55 233.815 253.55 232.245V174.885L303.81 145.945C305.17 145.165 306 143.725 306 142.155V82.265C305.95 81.875 305.89 81.495 305.8 81.125ZM144.2 227.205L100.57 202.515L146.39 176.135L196.66 147.195L240.33 172.335L208.29 190.625L144.2 227.205ZM244.75 114.995V164.795L226.39 154.225L201.03 139.625V89.825L219.39 100.395L244.75 114.995ZM249.12 57.105L292.81 82.265L249.12 107.425L205.43 82.265L249.12 57.105ZM114.49 184.425L96.13 194.995V85.305L121.49 70.705L139.85 60.135V169.815L114.49 184.425ZM91.76 27.425L135.45 52.585L91.76 77.745L48.07 52.585L91.76 27.425ZM43.67 60.135L62.03 70.705L87.39 85.305V202.545V202.555V202.565C87.39 202.735 87.44 202.895 87.46 203.055C87.49 203.265 87.49 203.485 87.55 203.695V203.705C87.6 203.875 87.69 204.035 87.76 204.195C87.84 204.375 87.89 204.575 87.99 204.745C87.99 204.745 87.99 204.755 88 204.755C88.09 204.905 88.22 205.035 88.33 205.175C88.45 205.335 88.55 205.495 88.69 205.635L88.7 205.645C88.82 205.765 88.98 205.855 89.12 205.965C89.28 206.085 89.42 206.225 89.59 206.325C89.6 206.325 89.6 206.325 89.61 206.335C89.62 206.335 89.62 206.345 89.63 206.345L139.87 234.775V285.065L43.67 229.705V60.135ZM244.75 229.705L148.58 285.075V234.775L219.8 194.115L244.75 179.875V229.705ZM297.2 139.625L253.49 164.795V114.995L278.85 100.395L297.21 89.825V139.625H297.2Z"/>
-    </svg>
+    <img
+        src="https://d2wks4gidu9630.cloudfront.net/f9e7e5eb-767a-4239-a8b4-63b76580c003/svg/codinglabs-logo.svg"
+        alt="Coding Labs"
+    />
 </template>
diff --git a/resources/js/Layouts/AuthenticatedLayout.vue b/resources/js/Layouts/AuthenticatedLayout.vue
index 20dfd52..2d1d1a4 100644
--- a/resources/js/Layouts/AuthenticatedLayout.vue
+++ b/resources/js/Layouts/AuthenticatedLayout.vue
@@ -1,19 +1,12 @@
 <script setup>
-import { ref } from 'vue';
-import ApplicationLogo from '@/Components/ApplicationLogo.vue';
-import Dropdown from '@/Components/Dropdown.vue';
-import DropdownLink from '@/Components/DropdownLink.vue';
-import NavLink from '@/Components/NavLink.vue';
-import ResponsiveNavLink from '@/Components/ResponsiveNavLink.vue';
-import { Link } from '@inertiajs/inertia-vue3';
-
-const showingNavigationDropdown = ref(false);
+    import ApplicationLogo from '@/Components/ApplicationLogo.vue';
+    import { Link } from '@inertiajs/inertia-vue3';
 </script>
 
 <template>
     <div>
-        <div class="min-h-screen bg-gray-100">
-            <nav class="bg-white border-b border-gray-100">
+        <div class="min-h-screen">
+            <nav class="">
                 <!-- Primary Navigation Menu -->
                 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                     <div class="flex justify-between h-16">
@@ -25,73 +18,29 @@ const showingNavigationDropdown = ref(false);
                                 </Link>
                             </div>
 
-                            <!-- Navigation Links -->
-                            <div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
-                                <NavLink :href="route('dashboard')" :active="route().current('dashboard')">
-                                    Dashboard
-                                </NavLink>
-                            </div>
                         </div>
 
                         <div class="hidden sm:flex sm:items-center sm:ml-6">
                             <!-- Settings Dropdown -->
                             <div class="ml-3 relative">
-                                <Dropdown align="right" width="48">
-                                    <template #trigger>
-                                        <span class="inline-flex rounded-md">
-                                            <button type="button" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition ease-in-out duration-150">
-                                                {{ $page.props.auth.user.name }}
-
-                                                <svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
-                                                </svg>
-                                            </button>
-                                        </span>
-                                    </template>
-
-                                    <template #content>
-                                        <DropdownLink :href="route('logout')" method="post" as="button">
-                                            Log Out
-                                        </DropdownLink>
-                                    </template>
-                                </Dropdown>
+                                <span class="inline-flex rounded-md">
+                                    <button type="button"
+                                            class=" inline-flex items-center px-3 py-2
+                                                    border border-transparent text-sm leading-4 font-medium rounded-md
+                                                    text-white bg-orange hover:text-backgroundFrom
+                                                    focus:outline-none transition ease-in-out duration-150">
+                                        Logouta
+                                    </button>
+                                </span>
                             </div>
                         </div>
 
-                        <!-- Hamburger -->
-                        <div class="-mr-2 flex items-center sm:hidden">
-                            <button @click="showingNavigationDropdown = ! showingNavigationDropdown" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
-                                <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
-                                    <path :class="{'hidden': showingNavigationDropdown, 'inline-flex': ! showingNavigationDropdown }" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-                                    <path :class="{'hidden': ! showingNavigationDropdown, 'inline-flex': showingNavigationDropdown }" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                                </svg>
-                            </button>
-                        </div>
-                    </div>
-                </div>
 
-                <!-- Responsive Navigation Menu -->
-                <div :class="{'block': showingNavigationDropdown, 'hidden': ! showingNavigationDropdown}" class="sm:hidden">
-                    <div class="pt-2 pb-3 space-y-1">
-                        <ResponsiveNavLink :href="route('dashboard')" :active="route().current('dashboard')">
-                            Dashboard
-                        </ResponsiveNavLink>
-                    </div>
 
-                    <!-- Responsive Settings Options -->
-                    <div class="pt-4 pb-1 border-t border-gray-200">
-                        <div class="px-4">
-                            <div class="font-medium text-base text-gray-800">{{ $page.props.auth.user.name }}</div>
-                            <div class="font-medium text-sm text-gray-500">{{ $page.props.auth.user.email }}</div>
-                        </div>
 
-                        <div class="mt-3 space-y-1">
-                            <ResponsiveNavLink :href="route('logout')" method="post" as="button">
-                                Log Out
-                            </ResponsiveNavLink>
-                        </div>
                     </div>
                 </div>
+
             </nav>
 
             <!-- Page Heading -->
diff --git a/resources/js/Pages/Courses.vue b/resources/js/Pages/Courses.vue
index dad4c9c..8ce2b3a 100644
--- a/resources/js/Pages/Courses.vue
+++ b/resources/js/Pages/Courses.vue
@@ -1,14 +1,18 @@
 <script setup>
-
+    import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
     let props = defineProps(['courses']);
-
 </script>
 
 <style> </style>
 
 <template>
-    <h1> This is courses page</h1>
-    <div v-for="course in courses">
-        {{ course.title }}
+    <div class="bg-gradient-to-br from-backgroundFrom to-backgroundTo">
+        <AuthenticatedLayout>
+            <h1> This is courses page</h1>
+            <div v-for="course in courses">
+                {{ course.title }}
+            </div>
+        </AuthenticatedLayout>
     </div>
+
 </template>
diff --git a/tailwind.config.js b/tailwind.config.js
index 7f06c1a..36d2666 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,19 +3,24 @@ const defaultTheme = require('tailwindcss/defaultTheme');
 /** @type {import('tailwindcss').Config} */
 module.exports = {
     content: [
-        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
-        './storage/framework/views/*.php',
-        './resources/views/**/*.blade.php',
-        './resources/js/**/*.vue',
+        "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
+        "./storage/framework/views/*.php",
+        "./resources/views/**/*.blade.php",
+        "./resources/js/**/*.vue",
     ],
 
     theme: {
         extend: {
             fontFamily: {
-                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
+                sans: ["Nunito", ...defaultTheme.fontFamily.sans],
+            },
+            colors: {
+                backgroundFrom: "#030B10",
+                backgroundTo: "#071A25",
+                orange: "#F8590A",
             },
         },
     },
 
-    plugins: [require('@tailwindcss/forms')],
+    plugins: [require("@tailwindcss/forms")],
 };

From 47a5bfb1abe01be87346c648f14fec5437684a4a Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Tue, 4 Oct 2022 11:24:52 +1000
Subject: [PATCH 03/36] Lesson card

---
 resources/js/Components/CourseCard.vue | 10 ++++++++++
 resources/js/Pages/Courses.vue         | 10 ++++------
 2 files changed, 14 insertions(+), 6 deletions(-)
 create mode 100644 resources/js/Components/CourseCard.vue

diff --git a/resources/js/Components/CourseCard.vue b/resources/js/Components/CourseCard.vue
new file mode 100644
index 0000000..1845c0d
--- /dev/null
+++ b/resources/js/Components/CourseCard.vue
@@ -0,0 +1,10 @@
+<script setup>
+    let props = defineProps(['title']);
+</script>
+
+
+<template>
+    <div class="bg-white">
+        <h1> {{title}} </h1>
+    </div>
+</template>
diff --git a/resources/js/Pages/Courses.vue b/resources/js/Pages/Courses.vue
index 8ce2b3a..30ef2e8 100644
--- a/resources/js/Pages/Courses.vue
+++ b/resources/js/Pages/Courses.vue
@@ -1,18 +1,16 @@
 <script setup>
     import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
+import CourseCard from '@/Components/CourseCard.vue';
     let props = defineProps(['courses']);
 </script>
 
-<style> </style>
-
 <template>
     <div class="bg-gradient-to-br from-backgroundFrom to-backgroundTo">
         <AuthenticatedLayout>
-            <h1> This is courses page</h1>
-            <div v-for="course in courses">
-                {{ course.title }}
+            <h1 class="text-white"> All courses</h1>
+            <div class="grid grid-cols-4 gap-4" v-for="course in courses">
+                <CourseCard :title="course.title"/>
             </div>
         </AuthenticatedLayout>
     </div>
-
 </template>

From 28db55c878ea1bdd51d0483ceb91ebf8a56f95cb Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Tue, 4 Oct 2022 12:02:55 +1000
Subject: [PATCH 04/36] Card design, db seeder for more courses

---
 .../Controllers/ShowCoursesController.php     |  5 ++---
 database/seeders/DatabaseSeeder.php           | 15 +++++++++++++++
 resources/js/Components/CourseCard.vue        | 19 ++++++++++++++++---
 resources/js/Pages/Courses.vue                |  6 +++---
 tailwind.config.js                            |  1 +
 5 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/app/Http/Controllers/ShowCoursesController.php b/app/Http/Controllers/ShowCoursesController.php
index 05731ba..b68abf6 100644
--- a/app/Http/Controllers/ShowCoursesController.php
+++ b/app/Http/Controllers/ShowCoursesController.php
@@ -2,15 +2,14 @@
 
 namespace App\Http\Controllers;
 
+use App\Models\Course;
 use Inertia\Response;
 use Illuminate\Http\Request;
 
 class ShowCoursesController extends Controller
 {
     public function __invoke(): Response {
-        $courses = [
-            ['title'=> 'Larascape', 'lessons'=>12, 'progress'=> 50]
-        ];
+        $courses = Course::all();
         return Inertia('Courses', [
             'courses' => $courses
         ]);
diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php
index 98d163a..5c3bb56 100644
--- a/database/seeders/DatabaseSeeder.php
+++ b/database/seeders/DatabaseSeeder.php
@@ -21,6 +21,21 @@ public function run()
             'email' => 'student@codinglabs-learn.test',
         ]);
 
+        \App\Models\Course::factory()->create([
+            'name'=>'Laracast',
+            'description'=>'Interactive game to learn laravel'
+        ]);
+
+        \App\Models\Course::factory()->create([
+            'name'=>'Vue Raider',
+            'description'=>'Interactive game to learn vue'
+        ]);
+
+        \App\Models\Course::factory()->create([
+            'name'=>'Inertia',
+            'description'=>'Interactive game to learn intertia'
+        ]);
+
         Artisan::call(Bootstrap::class);
     }
 }
diff --git a/resources/js/Components/CourseCard.vue b/resources/js/Components/CourseCard.vue
index 1845c0d..871e5dc 100644
--- a/resources/js/Components/CourseCard.vue
+++ b/resources/js/Components/CourseCard.vue
@@ -1,10 +1,23 @@
 <script setup>
-    let props = defineProps(['title']);
+    let props = defineProps(['name']);
 </script>
 
 
 <template>
-    <div class="bg-white">
-        <h1> {{title}} </h1>
+    <div class="bg-card rounded-3xl">
+        <div class="grid grid-cols-1 grid-rows-2 p-4">
+            <div class="">
+                <!-- <p class="bg-orange font-white px-3 w-22"> Beginner </p> -->
+                <!-- Temp image -->
+                <div class="bg-black rounded-3xl w-full h-40">
+
+                </div>
+            </div>
+            <div class="pt-8">
+                <h1 class="text-white text-lg"> {{ name }} </h1>
+                <h1 class="text-gray-300 pt-2 text-md"> 12 Lessons </h1>
+                <h1 class="text-gray-300 pt-3 text-sm"> Beginner | 100 students | Certificate included </h1>
+            </div>
+        </div>
     </div>
 </template>
diff --git a/resources/js/Pages/Courses.vue b/resources/js/Pages/Courses.vue
index 30ef2e8..c8c4785 100644
--- a/resources/js/Pages/Courses.vue
+++ b/resources/js/Pages/Courses.vue
@@ -7,9 +7,9 @@ import CourseCard from '@/Components/CourseCard.vue';
 <template>
     <div class="bg-gradient-to-br from-backgroundFrom to-backgroundTo">
         <AuthenticatedLayout>
-            <h1 class="text-white"> All courses</h1>
-            <div class="grid grid-cols-4 gap-4" v-for="course in courses">
-                <CourseCard :title="course.title"/>
+            <h1 class="text-white text-4xl font-bold mx-12 py-6"> All courses</h1>
+            <div class="display flex justify-start space-x-8 mx-12">
+                <CourseCard v-for="course in courses" :name="course.name" />
             </div>
         </AuthenticatedLayout>
     </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 36d2666..01850d0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -18,6 +18,7 @@ module.exports = {
                 backgroundFrom: "#030B10",
                 backgroundTo: "#071A25",
                 orange: "#F8590A",
+                card: "#0F1A25",
             },
         },
     },

From 293daba860f5fdb24b6ca316bdd3e4ebc5dc00ed Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Tue, 4 Oct 2022 12:05:10 +1000
Subject: [PATCH 05/36] Responsive

---
 resources/js/Components/CourseCard.vue | 2 +-
 resources/js/Pages/Courses.vue         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/Components/CourseCard.vue b/resources/js/Components/CourseCard.vue
index 871e5dc..a395b92 100644
--- a/resources/js/Components/CourseCard.vue
+++ b/resources/js/Components/CourseCard.vue
@@ -4,7 +4,7 @@
 
 
 <template>
-    <div class="bg-card rounded-3xl">
+    <div class="bg-card rounded-3xl mx-4 my-4">
         <div class="grid grid-cols-1 grid-rows-2 p-4">
             <div class="">
                 <!-- <p class="bg-orange font-white px-3 w-22"> Beginner </p> -->
diff --git a/resources/js/Pages/Courses.vue b/resources/js/Pages/Courses.vue
index c8c4785..0e2d046 100644
--- a/resources/js/Pages/Courses.vue
+++ b/resources/js/Pages/Courses.vue
@@ -8,7 +8,7 @@ import CourseCard from '@/Components/CourseCard.vue';
     <div class="bg-gradient-to-br from-backgroundFrom to-backgroundTo">
         <AuthenticatedLayout>
             <h1 class="text-white text-4xl font-bold mx-12 py-6"> All courses</h1>
-            <div class="display flex justify-start space-x-8 mx-12">
+            <div class="display flex justify-center md:justify-start flex-wrap mx-12">
                 <CourseCard v-for="course in courses" :name="course.name" />
             </div>
         </AuthenticatedLayout>

From a39b6529fffed3d82ee803c17924beab018ffacf Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Tue, 4 Oct 2022 12:25:32 +1000
Subject: [PATCH 06/36] Logout controller and functionality

---
 app/Http/Controllers/LogoutController.php    | 19 +++++++++++++++++++
 resources/js/Components/NavLink.vue          |  9 ++-------
 resources/js/Layouts/AuthenticatedLayout.vue | 14 ++++----------
 resources/js/Pages/Courses.vue               |  1 +
 routes/web.php                               |  3 +++
 5 files changed, 29 insertions(+), 17 deletions(-)
 create mode 100644 app/Http/Controllers/LogoutController.php

diff --git a/app/Http/Controllers/LogoutController.php b/app/Http/Controllers/LogoutController.php
new file mode 100644
index 0000000..15dac30
--- /dev/null
+++ b/app/Http/Controllers/LogoutController.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Session;
+
+class LogoutController extends Controller
+{
+    public function perform()
+    {
+        Session::flush();
+
+        Auth::logout();
+
+        return redirect('login');
+    }
+}
diff --git a/resources/js/Components/NavLink.vue b/resources/js/Components/NavLink.vue
index 180d07d..6ff675f 100644
--- a/resources/js/Components/NavLink.vue
+++ b/resources/js/Components/NavLink.vue
@@ -1,17 +1,12 @@
 <script setup>
-import { computed } from 'vue';
 import { Link } from '@inertiajs/inertia-vue3';
 
-const props = defineProps(['href', 'active']);
+const props = defineProps(['href']);
 
-const classes = computed(() => props.active
-    ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 text-sm font-medium leading-5 text-gray-900 focus:outline-none focus:border-indigo-700 transition  duration-150 ease-in-out'
-    : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out'
-);
 </script>
 
 <template>
-    <Link :href="href" :class="classes">
+    <Link :href="href">
         <slot />
     </Link>
 </template>
diff --git a/resources/js/Layouts/AuthenticatedLayout.vue b/resources/js/Layouts/AuthenticatedLayout.vue
index 2d1d1a4..db879f5 100644
--- a/resources/js/Layouts/AuthenticatedLayout.vue
+++ b/resources/js/Layouts/AuthenticatedLayout.vue
@@ -17,11 +17,9 @@
                                     <ApplicationLogo class="block h-9 w-auto" />
                                 </Link>
                             </div>
-
                         </div>
 
-                        <div class="hidden sm:flex sm:items-center sm:ml-6">
-                            <!-- Settings Dropdown -->
+                        <div class="sm:flex sm:items-center sm:ml-6">
                             <div class="ml-3 relative">
                                 <span class="inline-flex rounded-md">
                                     <button type="button"
@@ -29,20 +27,16 @@
                                                     border border-transparent text-sm leading-4 font-medium rounded-md
                                                     text-white bg-orange hover:text-backgroundFrom
                                                     focus:outline-none transition ease-in-out duration-150">
-                                        Logouta
+                                        <Link :href="route('logout')">
+                                            Logout
+                                        </Link>
                                     </button>
                                 </span>
                             </div>
                         </div>
-
-
-
-
                     </div>
                 </div>
-
             </nav>
-
             <!-- Page Heading -->
             <header class="bg-white shadow" v-if="$slots.header">
                 <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
diff --git a/resources/js/Pages/Courses.vue b/resources/js/Pages/Courses.vue
index 0e2d046..f0ec91d 100644
--- a/resources/js/Pages/Courses.vue
+++ b/resources/js/Pages/Courses.vue
@@ -1,6 +1,7 @@
 <script setup>
     import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
 import CourseCard from '@/Components/CourseCard.vue';
+import { Head} from '@inertiajs/inertia-vue3';
     let props = defineProps(['courses']);
 </script>
 
diff --git a/routes/web.php b/routes/web.php
index e25a6c4..b01939f 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,5 +1,6 @@
 <?php
 
+use App\Http\Controllers\LogoutController;
 use Inertia\Inertia;
 use Illuminate\Support\Facades\Route;
 use Illuminate\Foundation\Application;
@@ -34,4 +35,6 @@
     });
 });
 
+Route::get('/logout', [LogoutController::class, 'perform'])->middleware('auth', 'verified');
+
 require __DIR__.'/auth.php';

From f7c79c1370991307600a383db88042ecc0aaa319 Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Tue, 4 Oct 2022 15:36:28 +1000
Subject: [PATCH 07/36] withCount between Course and Lessons, changes to seeder

---
 app/Console/Commands/Bootstrap.php            | 55 ++++++++++++-------
 .../Controllers/ShowCoursesController.php     |  8 ++-
 app/Models/Course.php                         |  1 +
 database/seeders/DatabaseSeeder.php           | 15 -----
 resources/js/Components/CourseCard.vue        |  7 +--
 resources/js/Pages/Courses.vue                |  7 ++-
 6 files changed, 50 insertions(+), 43 deletions(-)

diff --git a/app/Console/Commands/Bootstrap.php b/app/Console/Commands/Bootstrap.php
index 9edd5ff..96ef09b 100644
--- a/app/Console/Commands/Bootstrap.php
+++ b/app/Console/Commands/Bootstrap.php
@@ -12,46 +12,59 @@ class Bootstrap extends Command
 
     public function handle(): int
     {
+        $lessons = [
+            [
+                'name' => 'Lesson 1',
+                'description' => 'Lesson 1',
+            ],
+            [
+                'name' => 'Lesson 1b',
+                'description' => 'Lesson 1b',
+            ],
+            [
+                'name' => 'Lesson 2',
+                'description' => 'Lesson 2',
+            ],
+            [
+                'name' => 'Lesson 3',
+                'description' => 'Lesson 3',
+            ],
+        ];
         $courses = [
             [
                 'name' => 'Bootcamp',
                 'description' => 'Bootcamp',
-                'lessons' => [
-                    [
-                        'name' => 'Lesson 1',
-                        'description' => 'Lesson 1',
-                    ],
-                    [
-                        'name' => 'Lesson 1b',
-                        'description' => 'Lesson 1b',
-                    ],
-                    [
-                        'name' => 'Lesson 2',
-                        'description' => 'Lesson 2',
-                    ],
-                    [
-                        'name' => 'Lesson 3',
-                        'description' => 'Lesson 3',
-                    ],
-                ],
+                'lessons' => $lessons
+            ],
+            [
+                'name' => 'Larascape',
+                'description' => 'Interactive game to learn Laravel',
+                'lessons' => $lessons
+            ],
+            [
+                'name' => 'Vue Raider',
+                'description' => 'Interactive game to learn Vue Raider',
+                'lessons' => $lessons
+            ],
+            [
+                'name' => 'Inertia',
+                'description' => 'Interactive game to learn Inertia',
+                'lessons' => $lessons
             ]
         ];
 
         foreach ($courses as $data) {
-            // TODO: firstOrCreate
             $course = Course::firstOrCreate([
                'name' => $data['name'],
                'description' => $data['description'],
             ]);
 
             foreach ($data['lessons'] as $index => $lesson) {
-                // TODO: firstOrCreate
                 $course->lessons()->firstOrCreate([
                     'index' => $index + 1,
                 ]);
             }
         }
-
         return 0;
     }
 }
diff --git a/app/Http/Controllers/ShowCoursesController.php b/app/Http/Controllers/ShowCoursesController.php
index b68abf6..da202a4 100644
--- a/app/Http/Controllers/ShowCoursesController.php
+++ b/app/Http/Controllers/ShowCoursesController.php
@@ -2,14 +2,18 @@
 
 namespace App\Http\Controllers;
 
-use App\Models\Course;
+
+use App\Models\User;
 use Inertia\Response;
+use App\Models\Course;
+use App\Models\Lesson;
 use Illuminate\Http\Request;
+use Illuminate\Database\Eloquent\Builder;
 
 class ShowCoursesController extends Controller
 {
     public function __invoke(): Response {
-        $courses = Course::all();
+        $courses = Course::withCount('lessons')->get();
         return Inertia('Courses', [
             'courses' => $courses
         ]);
diff --git a/app/Models/Course.php b/app/Models/Course.php
index 176dfe2..4d902a8 100644
--- a/app/Models/Course.php
+++ b/app/Models/Course.php
@@ -2,6 +2,7 @@
 
 namespace App\Models;
 
+use App\Models\Lesson;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\SoftDeletes;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php
index 5c3bb56..98d163a 100644
--- a/database/seeders/DatabaseSeeder.php
+++ b/database/seeders/DatabaseSeeder.php
@@ -21,21 +21,6 @@ public function run()
             'email' => 'student@codinglabs-learn.test',
         ]);
 
-        \App\Models\Course::factory()->create([
-            'name'=>'Laracast',
-            'description'=>'Interactive game to learn laravel'
-        ]);
-
-        \App\Models\Course::factory()->create([
-            'name'=>'Vue Raider',
-            'description'=>'Interactive game to learn vue'
-        ]);
-
-        \App\Models\Course::factory()->create([
-            'name'=>'Inertia',
-            'description'=>'Interactive game to learn intertia'
-        ]);
-
         Artisan::call(Bootstrap::class);
     }
 }
diff --git a/resources/js/Components/CourseCard.vue b/resources/js/Components/CourseCard.vue
index a395b92..ad41725 100644
--- a/resources/js/Components/CourseCard.vue
+++ b/resources/js/Components/CourseCard.vue
@@ -1,5 +1,5 @@
 <script setup>
-    let props = defineProps(['name']);
+    let props = defineProps(['name', 'lessonCount', 'userCount']);
 </script>
 
 
@@ -10,13 +10,12 @@
                 <!-- <p class="bg-orange font-white px-3 w-22"> Beginner </p> -->
                 <!-- Temp image -->
                 <div class="bg-black rounded-3xl w-full h-40">
-
                 </div>
             </div>
             <div class="pt-8">
                 <h1 class="text-white text-lg"> {{ name }} </h1>
-                <h1 class="text-gray-300 pt-2 text-md"> 12 Lessons </h1>
-                <h1 class="text-gray-300 pt-3 text-sm"> Beginner | 100 students | Certificate included </h1>
+                <h1 class="text-gray-300 pt-2 text-md"> {{ lessonCount }} Lessons </h1>
+                <h1 class="text-gray-300 pt-3 text-sm"> Beginner | {{ userCount }} students | Certificate included </h1>
             </div>
         </div>
     </div>
diff --git a/resources/js/Pages/Courses.vue b/resources/js/Pages/Courses.vue
index f0ec91d..af0af05 100644
--- a/resources/js/Pages/Courses.vue
+++ b/resources/js/Pages/Courses.vue
@@ -2,7 +2,12 @@
     import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
 import CourseCard from '@/Components/CourseCard.vue';
 import { Head} from '@inertiajs/inertia-vue3';
+import {ref} from 'vue';
     let props = defineProps(['courses']);
+    var challenge = ref(false);
+    const change = () => {
+        challenge.value = !challenge.value;
+    }
 </script>
 
 <template>
@@ -10,7 +15,7 @@ import { Head} from '@inertiajs/inertia-vue3';
         <AuthenticatedLayout>
             <h1 class="text-white text-4xl font-bold mx-12 py-6"> All courses</h1>
             <div class="display flex justify-center md:justify-start flex-wrap mx-12">
-                <CourseCard v-for="course in courses" :name="course.name" />
+                <CourseCard v-for="course in courses" :name="course.name" :lessonCount="course.lessons_count" :userCount="course.user_count"/>
             </div>
         </AuthenticatedLayout>
     </div>

From 9275a9ac0c297ceff3a4960a927c5808c333e7b8 Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Tue, 4 Oct 2022 16:56:54 +1000
Subject: [PATCH 08/36] Course lesson page design with controller  and
 retrieval from db

---
 .../ShowCourseLessonsController.php           | 18 +++++++
 resources/js/Components/CourseCard.vue        | 31 ++++++------
 resources/js/Components/LessonCard.vue        |  9 ++++
 resources/js/Layouts/AuthenticatedLayout.vue  |  3 +-
 resources/js/Pages/Courses.vue                | 16 +++----
 resources/js/Pages/Lessons.vue                | 47 +++++++++++++++++++
 routes/web.php                                |  2 +
 tailwind.config.js                            |  1 +
 8 files changed, 104 insertions(+), 23 deletions(-)
 create mode 100644 app/Http/Controllers/ShowCourseLessonsController.php
 create mode 100644 resources/js/Components/LessonCard.vue
 create mode 100644 resources/js/Pages/Lessons.vue

diff --git a/app/Http/Controllers/ShowCourseLessonsController.php b/app/Http/Controllers/ShowCourseLessonsController.php
new file mode 100644
index 0000000..1917f52
--- /dev/null
+++ b/app/Http/Controllers/ShowCourseLessonsController.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Inertia\Response;
+use App\Models\Course;
+use App\Models\Lesson;
+use Illuminate\Http\Request;
+
+class ShowCourseLessonsController extends Controller
+{
+    public function __invoke($course_id): Response {
+        $lessons = Lesson::all()->where('course_id', $course_id);
+        return Inertia('Lessons', [
+            'lessons' => $lessons
+        ]);
+    }
+}
diff --git a/resources/js/Components/CourseCard.vue b/resources/js/Components/CourseCard.vue
index ad41725..ed8e895 100644
--- a/resources/js/Components/CourseCard.vue
+++ b/resources/js/Components/CourseCard.vue
@@ -1,22 +1,25 @@
 <script setup>
-    let props = defineProps(['name', 'lessonCount', 'userCount']);
+    import { Link } from '@inertiajs/inertia-vue3';
+    let props = defineProps(['name', 'lessonCount', 'userCount', 'id']);
 </script>
 
-
 <template>
-    <div class="bg-card rounded-3xl mx-4 my-4">
-        <div class="grid grid-cols-1 grid-rows-2 p-4">
-            <div class="">
-                <!-- <p class="bg-orange font-white px-3 w-22"> Beginner </p> -->
-                <!-- Temp image -->
-                <div class="bg-black rounded-3xl w-full h-40">
+    <Link :href="'/courses/' + id + '/lessons'">
+        <div class="bg-card rounded-3xl mx-4 my-4">
+            <div class="grid grid-cols-1 grid-rows-2 p-4">
+                <div class="">
+                    <!-- <p class="bg-orange font-white px-3 w-22"> Beginner </p> -->
+                    <!-- Temp image -->
+                    <div class="bg-black rounded-3xl w-full h-40">
+                    </div>
+                </div>
+                <div class="pt-8">
+                    <h1 class="text-white text-lg"> {{ name }} </h1>
+                    <h1 class="text-gray-300 pt-2 text-md"> {{ lessonCount }} Lessons </h1>
+                    <h1 class="text-gray-300 pt-3 text-sm"> Beginner | {{ userCount }} students | Certificate included </h1>
                 </div>
-            </div>
-            <div class="pt-8">
-                <h1 class="text-white text-lg"> {{ name }} </h1>
-                <h1 class="text-gray-300 pt-2 text-md"> {{ lessonCount }} Lessons </h1>
-                <h1 class="text-gray-300 pt-3 text-sm"> Beginner | {{ userCount }} students | Certificate included </h1>
             </div>
         </div>
-    </div>
+    </Link>
+
 </template>
diff --git a/resources/js/Components/LessonCard.vue b/resources/js/Components/LessonCard.vue
new file mode 100644
index 0000000..17139e9
--- /dev/null
+++ b/resources/js/Components/LessonCard.vue
@@ -0,0 +1,9 @@
+<script setup>
+    //const props = defineProps(['']);
+</script>
+
+<template>
+    <div class="bg-gray-600 rounded-sm w-32 h-32 m-4">
+
+    </div>
+</template>
diff --git a/resources/js/Layouts/AuthenticatedLayout.vue b/resources/js/Layouts/AuthenticatedLayout.vue
index db879f5..7d16513 100644
--- a/resources/js/Layouts/AuthenticatedLayout.vue
+++ b/resources/js/Layouts/AuthenticatedLayout.vue
@@ -4,7 +4,8 @@
 </script>
 
 <template>
-    <div>
+    <!--  -->
+    <div class="bg-gradient-to-br from-backgroundFrom to-backgroundTo">
         <div class="min-h-screen">
             <nav class="">
                 <!-- Primary Navigation Menu -->
diff --git a/resources/js/Pages/Courses.vue b/resources/js/Pages/Courses.vue
index af0af05..6d95977 100644
--- a/resources/js/Pages/Courses.vue
+++ b/resources/js/Pages/Courses.vue
@@ -11,12 +11,12 @@ import {ref} from 'vue';
 </script>
 
 <template>
-    <div class="bg-gradient-to-br from-backgroundFrom to-backgroundTo">
-        <AuthenticatedLayout>
-            <h1 class="text-white text-4xl font-bold mx-12 py-6"> All courses</h1>
-            <div class="display flex justify-center md:justify-start flex-wrap mx-12">
-                <CourseCard v-for="course in courses" :name="course.name" :lessonCount="course.lessons_count" :userCount="course.user_count"/>
-            </div>
-        </AuthenticatedLayout>
-    </div>
+    <AuthenticatedLayout>
+        <h1 class="text-white text-4xl font-bold mx-12 py-6"> All courses</h1>
+        <div class="display flex justify-center md:justify-start flex-wrap mx-12">
+            <CourseCard v-for="(course, index) in courses"
+                        :name="course.name" :lessonCount="course.lessons_count"
+                        :userCount="course.user_count" :id="course.id"/>
+        </div>
+    </AuthenticatedLayout>
 </template>
diff --git a/resources/js/Pages/Lessons.vue b/resources/js/Pages/Lessons.vue
new file mode 100644
index 0000000..a277b12
--- /dev/null
+++ b/resources/js/Pages/Lessons.vue
@@ -0,0 +1,47 @@
+<script setup>
+    import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
+    import LessonCard from '../Components/LessonCard.vue';
+    const props = defineProps(['lessons']);
+</script>
+
+<template>
+    <AuthenticatedLayout>
+        <h1 class="text-white text-4xl font-bold mx-12 py-6"> Larascape </h1>
+        <div class="bg-card rounded-3xl mx-12 display flex flex-wrap justify-center p-4">
+            <div class="bg-black rounded-3xl h-32 w-1/5"> </div>
+            <div class="w-4/5">
+                <div class="w-full h-full">
+                    <div class="float-left my-6
+                                grid max-w-sm grid-cols-2 mx-auto text-center divide-x shadow-md">
+                        <div class="p-4">
+                            <div class="grid grid-rows-2 text-left">
+                                <p class="text-cardText text-md"> Lessons </p>
+                                <p class="text-gray-300 text-sm"> 12 lessons </p>
+                            </div>
+                        </div>
+                        <div class="p-4">
+                            <div class="grid grid-rows-2 text-left">
+                                <p class="text-cardText text-md"> Level </p>
+                                <p class="text-gray-300 text-sm"> Beginner </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="float-right">
+                        <button class="bg-orange text-white px-4 py-2 rounded-xl my-10 mr-8 hover:text-backgroundFrom
+                                                    focus:outline-none transition ease-in-out duration-150"> Play Demo </button>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+        <div class="mx-12 display flex flex-wrap pt-8">
+            <div class="dispaly flex flex-wrap w-3/5">
+                <LessonCard v-for="lesson in lessons" />
+            </div>
+            <div class="w-2/5 pt-3">
+                <h1 class="text-cardText text-lg"> Lesson 1 </h1>
+                <p class="text-gray-300 text-md"> Lesson description</p>
+            </div>
+        </div>
+    </AuthenticatedLayout>
+</template>
diff --git a/routes/web.php b/routes/web.php
index b01939f..0f35c7b 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,6 +1,7 @@
 <?php
 
 use App\Http\Controllers\LogoutController;
+use App\Http\Controllers\ShowCourseLessonsController;
 use Inertia\Inertia;
 use Illuminate\Support\Facades\Route;
 use Illuminate\Foundation\Application;
@@ -32,6 +33,7 @@
 Route::prefix('courses')->name('courses.')->group(function() {
     Route::middleware(['auth'])->group(function() {
         Route::get('/', ShowCoursesController::class)->name('courses.show');
+        Route::get('/{id}/lessons', ShowCourseLessonsController::class)->name('courses.lessons');
     });
 });
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 01850d0..6cdcfe4 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -19,6 +19,7 @@ module.exports = {
                 backgroundTo: "#071A25",
                 orange: "#F8590A",
                 card: "#0F1A25",
+                cardText: "#7398BD",
             },
         },
     },

From 1dd8ebc41456c7e7ab40db0dde9beaa4d18cc401 Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Wed, 5 Oct 2022 09:31:04 +1000
Subject: [PATCH 09/36] Add Lesson name and description (To model, migration
 and seeder)

---
 app/Console/Commands/Bootstrap.php                       | 2 ++
 app/Http/Controllers/ShowCourseLessonsController.php     | 5 ++++-
 app/Models/Lesson.php                                    | 1 +
 .../2022_09_06_235542_create_lessons_table.php           | 2 ++
 resources/js/Components/CourseCard.vue                   | 3 +--
 resources/js/Components/LessonCard.vue                   | 4 ++--
 resources/js/Pages/Courses.vue                           | 2 +-
 resources/js/Pages/Lessons.vue                           | 9 +++++----
 8 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/app/Console/Commands/Bootstrap.php b/app/Console/Commands/Bootstrap.php
index 96ef09b..6b670b7 100644
--- a/app/Console/Commands/Bootstrap.php
+++ b/app/Console/Commands/Bootstrap.php
@@ -61,6 +61,8 @@ public function handle(): int
 
             foreach ($data['lessons'] as $index => $lesson) {
                 $course->lessons()->firstOrCreate([
+                    'name' => $lesson['name'],
+                    'description' => $lesson['description'],
                     'index' => $index + 1,
                 ]);
             }
diff --git a/app/Http/Controllers/ShowCourseLessonsController.php b/app/Http/Controllers/ShowCourseLessonsController.php
index 1917f52..6c6b8d8 100644
--- a/app/Http/Controllers/ShowCourseLessonsController.php
+++ b/app/Http/Controllers/ShowCourseLessonsController.php
@@ -10,8 +10,11 @@
 class ShowCourseLessonsController extends Controller
 {
     public function __invoke($course_id): Response {
-        $lessons = Lesson::all()->where('course_id', $course_id);
+        $lessons = Lesson::all()->where('course_id', $course_id)->toArray();
+        // dd($lessons);
         return Inertia('Lessons', [
+            //TODO: name as slug (not id)
+            'name' => $course_id,
             'lessons' => $lessons
         ]);
     }
diff --git a/app/Models/Lesson.php b/app/Models/Lesson.php
index 78d1639..aeca920 100644
--- a/app/Models/Lesson.php
+++ b/app/Models/Lesson.php
@@ -14,6 +14,7 @@ class Lesson extends Model
     use SoftDeletes;
 
     protected $guarded = [];
+    protected $fillable = ['name', 'description'];
 
     public function course()
     {
diff --git a/database/migrations/2022_09_06_235542_create_lessons_table.php b/database/migrations/2022_09_06_235542_create_lessons_table.php
index c67fb9e..a824859 100644
--- a/database/migrations/2022_09_06_235542_create_lessons_table.php
+++ b/database/migrations/2022_09_06_235542_create_lessons_table.php
@@ -11,6 +11,8 @@ public function up()
             $table->id();
             $table->foreignId('course_id');
             $table->smallInteger('index');
+            $table->text('name');
+            $table->text('description');
             $table->timestamps();
             $table->softDeletes();
         });
diff --git a/resources/js/Components/CourseCard.vue b/resources/js/Components/CourseCard.vue
index ed8e895..a4f2bcd 100644
--- a/resources/js/Components/CourseCard.vue
+++ b/resources/js/Components/CourseCard.vue
@@ -10,8 +10,7 @@
                 <div class="">
                     <!-- <p class="bg-orange font-white px-3 w-22"> Beginner </p> -->
                     <!-- Temp image -->
-                    <div class="bg-black rounded-3xl w-full h-40">
-                    </div>
+                    <div class="bg-black rounded-3xl w-full h-40"> </div>
                 </div>
                 <div class="pt-8">
                     <h1 class="text-white text-lg"> {{ name }} </h1>
diff --git a/resources/js/Components/LessonCard.vue b/resources/js/Components/LessonCard.vue
index 17139e9..9e7a965 100644
--- a/resources/js/Components/LessonCard.vue
+++ b/resources/js/Components/LessonCard.vue
@@ -1,9 +1,9 @@
 <script setup>
-    //const props = defineProps(['']);
+    const props = defineProps(['name']);
 </script>
 
 <template>
     <div class="bg-gray-600 rounded-sm w-32 h-32 m-4">
-
+        {{ name }}
     </div>
 </template>
diff --git a/resources/js/Pages/Courses.vue b/resources/js/Pages/Courses.vue
index 6d95977..206770b 100644
--- a/resources/js/Pages/Courses.vue
+++ b/resources/js/Pages/Courses.vue
@@ -14,7 +14,7 @@ import {ref} from 'vue';
     <AuthenticatedLayout>
         <h1 class="text-white text-4xl font-bold mx-12 py-6"> All courses</h1>
         <div class="display flex justify-center md:justify-start flex-wrap mx-12">
-            <CourseCard v-for="(course, index) in courses"
+            <CourseCard v-for="course in courses"
                         :name="course.name" :lessonCount="course.lessons_count"
                         :userCount="course.user_count" :id="course.id"/>
         </div>
diff --git a/resources/js/Pages/Lessons.vue b/resources/js/Pages/Lessons.vue
index a277b12..69f4159 100644
--- a/resources/js/Pages/Lessons.vue
+++ b/resources/js/Pages/Lessons.vue
@@ -1,12 +1,13 @@
 <script setup>
     import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
     import LessonCard from '../Components/LessonCard.vue';
-    const props = defineProps(['lessons']);
+    const props = defineProps(['name','lessons']);
+    console.log(props.lessons);
 </script>
 
 <template>
     <AuthenticatedLayout>
-        <h1 class="text-white text-4xl font-bold mx-12 py-6"> Larascape </h1>
+        <h1 class="text-white text-4xl font-bold mx-12 py-6"> {{ name }} </h1>
         <div class="bg-card rounded-3xl mx-12 display flex flex-wrap justify-center p-4">
             <div class="bg-black rounded-3xl h-32 w-1/5"> </div>
             <div class="w-4/5">
@@ -16,7 +17,7 @@
                         <div class="p-4">
                             <div class="grid grid-rows-2 text-left">
                                 <p class="text-cardText text-md"> Lessons </p>
-                                <p class="text-gray-300 text-sm"> 12 lessons </p>
+                                <p class="text-gray-300 text-sm">{{ lessons.length }} Lessons </p>
                             </div>
                         </div>
                         <div class="p-4">
@@ -36,7 +37,7 @@
         </div>
         <div class="mx-12 display flex flex-wrap pt-8">
             <div class="dispaly flex flex-wrap w-3/5">
-                <LessonCard v-for="lesson in lessons" />
+                <LessonCard v-for="lesson in lessons" :name="lesson.name"/>
             </div>
             <div class="w-2/5 pt-3">
                 <h1 class="text-cardText text-lg"> Lesson 1 </h1>

From 009c2aa128ccb171b8e5af64ccd7e28c20abdc62 Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Wed, 5 Oct 2022 09:36:07 +1000
Subject: [PATCH 10/36] Dynamically load placeholder text with currently
 selected lesson

---
 resources/js/Pages/Lessons.vue | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/resources/js/Pages/Lessons.vue b/resources/js/Pages/Lessons.vue
index 69f4159..0077d1e 100644
--- a/resources/js/Pages/Lessons.vue
+++ b/resources/js/Pages/Lessons.vue
@@ -1,8 +1,16 @@
 <script setup>
     import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
     import LessonCard from '../Components/LessonCard.vue';
+    import {ref} from "vue";
     const props = defineProps(['name','lessons']);
-    console.log(props.lessons);
+    var placeholderName = ref('Default name');
+    var placeholderDesc = ref('Default desc');
+    const changePlaceholder = (i) => {
+        placeholderName.value = props.lessons[i].name;
+        placeholderDesc.value = props.lessons[i].description;
+    }
+
+    changePlaceholder(1);
 </script>
 
 <template>
@@ -37,11 +45,11 @@
         </div>
         <div class="mx-12 display flex flex-wrap pt-8">
             <div class="dispaly flex flex-wrap w-3/5">
-                <LessonCard v-for="lesson in lessons" :name="lesson.name"/>
+                <LessonCard v-for="(lesson, index) in lessons" @click="changePlaceholder(index)" :name="lesson.name"/>
             </div>
             <div class="w-2/5 pt-3">
-                <h1 class="text-cardText text-lg"> Lesson 1 </h1>
-                <p class="text-gray-300 text-md"> Lesson description</p>
+                <h1 class="text-cardText text-lg"> {{ placeholderName }} </h1>
+                <p class="text-gray-300 text-md"> {{ placeholderDesc }} </p>
             </div>
         </div>
     </AuthenticatedLayout>

From 32c3b4ff3d8e9740a220fa310ca7847c3f32925a Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Wed, 5 Oct 2022 10:01:03 +1000
Subject: [PATCH 11/36] Lesson Select animation

---
 resources/js/Components/LessonCard.vue |  1 -
 resources/js/Pages/Lessons.vue         | 21 +++++++++++++++++++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/resources/js/Components/LessonCard.vue b/resources/js/Components/LessonCard.vue
index 9e7a965..fc500f0 100644
--- a/resources/js/Components/LessonCard.vue
+++ b/resources/js/Components/LessonCard.vue
@@ -4,6 +4,5 @@
 
 <template>
     <div class="bg-gray-600 rounded-sm w-32 h-32 m-4">
-        {{ name }}
     </div>
 </template>
diff --git a/resources/js/Pages/Lessons.vue b/resources/js/Pages/Lessons.vue
index 0077d1e..0b6f65c 100644
--- a/resources/js/Pages/Lessons.vue
+++ b/resources/js/Pages/Lessons.vue
@@ -13,6 +13,18 @@
     changePlaceholder(1);
 </script>
 
+<style>
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.5s ease-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+</style>
+
 <template>
     <AuthenticatedLayout>
         <h1 class="text-white text-4xl font-bold mx-12 py-6"> {{ name }} </h1>
@@ -48,8 +60,13 @@
                 <LessonCard v-for="(lesson, index) in lessons" @click="changePlaceholder(index)" :name="lesson.name"/>
             </div>
             <div class="w-2/5 pt-3">
-                <h1 class="text-cardText text-lg"> {{ placeholderName }} </h1>
-                <p class="text-gray-300 text-md"> {{ placeholderDesc }} </p>
+                <transition name="fade" mode="out-in">
+                    <div :key="placeholderDesc">
+                        <h1 class="text-cardText text-lg"> {{ placeholderName }} </h1>
+                        <p class="text-gray-300 text-md"> {{ placeholderDesc }} </p>
+                    </div>
+                </transition>
+
             </div>
         </div>
     </AuthenticatedLayout>

From e0fab3a8a8d7e5461653bbccd46184a6547d0264 Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Wed, 5 Oct 2022 10:52:22 +1000
Subject: [PATCH 12/36] Rough dashboard implementation, authenticated layout
 change and added new header layout

---
 .../ShowCourseLessonsController.php           |  2 +-
 .../Controllers/ShowDashboardController.php   | 21 +++++
 resources/js/Components/CourseCard.vue        | 27 +++----
 resources/js/Components/Lessons.vue           | 70 +++++++++++++++++
 resources/js/Layouts/AuthenticatedLayout.vue  | 78 +++++++------------
 resources/js/Layouts/Header.vue               | 53 +++++++++++++
 resources/js/Pages/Courses.vue                | 20 ++---
 resources/js/Pages/Dashboard.vue              | 30 +++----
 resources/js/Pages/Lessons.vue                | 74 ++----------------
 routes/web.php                                |  6 +-
 10 files changed, 216 insertions(+), 165 deletions(-)
 create mode 100644 app/Http/Controllers/ShowDashboardController.php
 create mode 100644 resources/js/Components/Lessons.vue
 create mode 100644 resources/js/Layouts/Header.vue

diff --git a/app/Http/Controllers/ShowCourseLessonsController.php b/app/Http/Controllers/ShowCourseLessonsController.php
index 6c6b8d8..7dc4c49 100644
--- a/app/Http/Controllers/ShowCourseLessonsController.php
+++ b/app/Http/Controllers/ShowCourseLessonsController.php
@@ -9,7 +9,7 @@
 
 class ShowCourseLessonsController extends Controller
 {
-    public function __invoke($course_id): Response {
+    public function __invoke($course_id) {
         $lessons = Lesson::all()->where('course_id', $course_id)->toArray();
         // dd($lessons);
         return Inertia('Lessons', [
diff --git a/app/Http/Controllers/ShowDashboardController.php b/app/Http/Controllers/ShowDashboardController.php
new file mode 100644
index 0000000..b9c2797
--- /dev/null
+++ b/app/Http/Controllers/ShowDashboardController.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Inertia\Response;
+use App\Models\Lesson;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+
+class ShowDashboardController extends Controller
+{
+    public function __invoke(): Response {
+        if (Auth::user()) {
+            $lessons = Lesson::all()->where('course_id', 1)->toArray();
+            return Inertia('Dashboard', [
+                'lessons' => $lessons
+            ]);
+        }
+        return Inertia('Welcome');
+    }
+}
diff --git a/resources/js/Components/CourseCard.vue b/resources/js/Components/CourseCard.vue
index a4f2bcd..27f9607 100644
--- a/resources/js/Components/CourseCard.vue
+++ b/resources/js/Components/CourseCard.vue
@@ -4,21 +4,18 @@
 </script>
 
 <template>
-    <Link :href="'/courses/' + id + '/lessons'">
-        <div class="bg-card rounded-3xl mx-4 my-4">
-            <div class="grid grid-cols-1 grid-rows-2 p-4">
-                <div class="">
-                    <!-- <p class="bg-orange font-white px-3 w-22"> Beginner </p> -->
-                    <!-- Temp image -->
-                    <div class="bg-black rounded-3xl w-full h-40"> </div>
-                </div>
-                <div class="pt-8">
-                    <h1 class="text-white text-lg"> {{ name }} </h1>
-                    <h1 class="text-gray-300 pt-2 text-md"> {{ lessonCount }} Lessons </h1>
-                    <h1 class="text-gray-300 pt-3 text-sm"> Beginner | {{ userCount }} students | Certificate included </h1>
-                </div>
+    <div class="bg-card rounded-3xl mx-4 my-4 w-72 h-auto">
+        <div class="grid grid-cols-1 grid-rows-2 p-4">
+            <div class="">
+                <!-- <p class="bg-orange font-white px-3 w-22"> Beginner </p> -->
+                <!-- Temp image -->
+                <div class="bg-black rounded-3xl w-full h-40"></div>
+            </div>
+            <div class="pt-8">
+                <h1 class="text-white text-lg"> {{ name }} </h1>
+                <h1 class="text-gray-300 pt-2 text-md"> {{ lessonCount }} Lessons </h1>
+                <h1 class="text-gray-300 pt-3 text-sm"> Beginner | {{ userCount }} students | Certificate included </h1>
             </div>
         </div>
-    </Link>
-
+    </div>
 </template>
diff --git a/resources/js/Components/Lessons.vue b/resources/js/Components/Lessons.vue
new file mode 100644
index 0000000..f78b8c4
--- /dev/null
+++ b/resources/js/Components/Lessons.vue
@@ -0,0 +1,70 @@
+<script setup>
+    import LessonCard from '../Components/LessonCard.vue';
+    import {ref} from "vue";
+    const props = defineProps(['userAuth','name','lessons']);
+    var placeholderName = ref('Default name');
+    var placeholderDesc = ref('Default desc');
+    const changePlaceholder = (i) => {
+        placeholderName.value = props.lessons[i].name;
+        placeholderDesc.value = props.lessons[i].description;
+    }
+    changePlaceholder(1);
+</script>
+
+<style>
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.5s ease-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+</style>
+
+<template>
+    <h1 class="text-white text-4xl font-bold mx-12 py-6"> {{ name }} </h1>
+    <div class="bg-card rounded-3xl mx-12 display flex flex-wrap justify-center p-4">
+        <div class="bg-black rounded-3xl h-32 w-1/5"> </div>
+        <div class="w-4/5">
+            <div class="w-full h-full">
+                <div class="float-left my-6
+                                    grid max-w-sm grid-cols-2 mx-auto text-center divide-x shadow-md">
+                    <div class="p-4">
+                        <div class="grid grid-rows-2 text-left">
+                            <p class="text-cardText text-md"> Lessons </p>
+                            <p class="text-gray-300 text-sm">{{ lessons.length }} Lessons </p>
+                        </div>
+                    </div>
+                    <div class="p-4">
+                        <div class="grid grid-rows-2 text-left">
+                            <p class="text-cardText text-md"> Level </p>
+                            <p class="text-gray-300 text-sm"> Beginner </p>
+                        </div>
+                    </div>
+                </div>
+                <div class="float-right">
+                    <button class="bg-orange text-white px-4 py-2 rounded-xl my-10 mr-8 hover:text-backgroundFrom
+                                                        focus:outline-none transition ease-in-out duration-150"> Play Demo
+                    </button>
+                </div>
+            </div>
+
+        </div>
+    </div>
+    <div class="mx-12 display flex flex-wrap pt-8">
+        <div class="dispaly flex flex-wrap w-3/5">
+            <LessonCard v-for="(lesson, index) in lessons" @click="changePlaceholder(index)" :name="lesson.name" />
+        </div>
+        <div class="w-2/5 pt-3">
+            <transition name="fade" mode="out-in">
+                <div :key="placeholderDesc">
+                    <h1 class="text-cardText text-lg"> {{ placeholderName }} </h1>
+                    <p class="text-gray-300 text-md"> {{ placeholderDesc }} </p>
+                </div>
+            </transition>
+
+        </div>
+    </div>
+</template>
diff --git a/resources/js/Layouts/AuthenticatedLayout.vue b/resources/js/Layouts/AuthenticatedLayout.vue
index 7d16513..80fff72 100644
--- a/resources/js/Layouts/AuthenticatedLayout.vue
+++ b/resources/js/Layouts/AuthenticatedLayout.vue
@@ -1,54 +1,36 @@
 <script setup>
-    import ApplicationLogo from '@/Components/ApplicationLogo.vue';
-    import { Link } from '@inertiajs/inertia-vue3';
+import CourseCard from '@/Components/CourseCard.vue';
+
+    const props = defineProps(['lessons'])
+    var selected = 'profile';
 </script>
 
 <template>
-    <!--  -->
-    <div class="bg-gradient-to-br from-backgroundFrom to-backgroundTo">
-        <div class="min-h-screen">
-            <nav class="">
-                <!-- Primary Navigation Menu -->
-                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                    <div class="flex justify-between h-16">
-                        <div class="flex">
-                            <!-- Logo -->
-                            <div class="shrink-0 flex items-center">
-                                <Link :href="route('dashboard')">
-                                    <ApplicationLogo class="block h-9 w-auto" />
-                                </Link>
-                            </div>
-                        </div>
-
-                        <div class="sm:flex sm:items-center sm:ml-6">
-                            <div class="ml-3 relative">
-                                <span class="inline-flex rounded-md">
-                                    <button type="button"
-                                            class=" inline-flex items-center px-3 py-2
-                                                    border border-transparent text-sm leading-4 font-medium rounded-md
-                                                    text-white bg-orange hover:text-backgroundFrom
-                                                    focus:outline-none transition ease-in-out duration-150">
-                                        <Link :href="route('logout')">
-                                            Logout
-                                        </Link>
-                                    </button>
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </nav>
-            <!-- Page Heading -->
-            <header class="bg-white shadow" v-if="$slots.header">
-                <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
-                    <slot name="header" />
-                </div>
-            </header>
-
-            <!-- Page Content -->
-            <main>
-                <slot />
-            </main>
-        </div>
+    <div>
+        <ul
+            class="flex flex-wrap text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400">
+            <li class="mr-2">
+                <a href="#"
+                    class="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300">
+                    Profile
+                </a>
+            </li>
+            <li class="mr-2">
+                <a href="#"
+                    class="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300">
+                    My Courses
+                </a>
+            </li>
+            <li class="mr-2">
+                <a href="#"
+                    class="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300">
+                    Achievements
+                </a>
+            </li>
+        </ul>
     </div>
+
+    <main>
+        <CourseCard name="Larascape" :lessonCount="4" :userCount="100" :id="1"/>
+    </main>
 </template>
diff --git a/resources/js/Layouts/Header.vue b/resources/js/Layouts/Header.vue
new file mode 100644
index 0000000..992697e
--- /dev/null
+++ b/resources/js/Layouts/Header.vue
@@ -0,0 +1,53 @@
+<script setup>
+import ApplicationLogo from '@/Components/ApplicationLogo.vue';
+import { Link } from '@inertiajs/inertia-vue3';
+</script>
+
+<template>
+    <!--  -->
+    <div class="bg-gradient-to-br from-backgroundFrom to-backgroundTo">
+        <div class="min-h-screen">
+            <nav class="">
+                <!-- Primary Navigation Menu -->
+                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                    <div class="flex justify-between h-16">
+                        <div class="flex">
+                            <!-- Logo -->
+                            <div class="shrink-0 flex items-center">
+                                <Link :href="route('dashboard')">
+                                <ApplicationLogo class="block h-9 w-auto" />
+                                </Link>
+                            </div>
+                        </div>
+
+                        <div class="sm:flex sm:items-center sm:ml-6">
+                            <div class="ml-3 relative">
+                                <span class="inline-flex rounded-md">
+                                    <button type="button" class=" inline-flex items-center px-3 py-2
+                                                    border border-transparent text-sm leading-4 font-medium rounded-md
+                                                    text-white bg-orange hover:text-backgroundFrom
+                                                    focus:outline-none transition ease-in-out duration-150">
+                                        <Link :href="route('logout')">
+                                        Logout
+                                        </Link>
+                                    </button>
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+            <!-- Page Heading -->
+            <header class="bg-white shadow" v-if="$slots.header">
+                <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+                    <slot name="header" />
+                </div>
+            </header>
+
+            <!-- Page Content -->
+            <main>
+                <slot />
+            </main>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/Pages/Courses.vue b/resources/js/Pages/Courses.vue
index 206770b..e113741 100644
--- a/resources/js/Pages/Courses.vue
+++ b/resources/js/Pages/Courses.vue
@@ -1,8 +1,8 @@
 <script setup>
-    import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
-import CourseCard from '@/Components/CourseCard.vue';
-import { Head} from '@inertiajs/inertia-vue3';
-import {ref} from 'vue';
+    import Header from '@/Layouts/Header.vue';
+    import CourseCard from '@/Components/CourseCard.vue';
+    import { Link } from '@inertiajs/inertia-vue3';
+    import {ref} from 'vue';
     let props = defineProps(['courses']);
     var challenge = ref(false);
     const change = () => {
@@ -11,12 +11,14 @@ import {ref} from 'vue';
 </script>
 
 <template>
-    <AuthenticatedLayout>
+    <Header>
         <h1 class="text-white text-4xl font-bold mx-12 py-6"> All courses</h1>
         <div class="display flex justify-center md:justify-start flex-wrap mx-12">
-            <CourseCard v-for="course in courses"
-                        :name="course.name" :lessonCount="course.lessons_count"
-                        :userCount="course.user_count" :id="course.id"/>
+            <Link :href="'/courses/' + id + '/lessons'">
+                <CourseCard v-for="course in courses"
+                            :name="course.name" :lessonCount="course.lessons_count"
+                            :userCount="course.user_count" :id="course.id"/>
+            </Link>
         </div>
-    </AuthenticatedLayout>
+    </Header>
 </template>
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index a39b9ae..4c1868c 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -1,26 +1,14 @@
 <script setup>
-import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
-import { Head } from '@inertiajs/inertia-vue3';
+    import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
+    import Header from '@/Layouts/Header.vue';
+    import { Link } from '@inertiajs/inertia-vue3';
+    import GuestLayout from '@/Layouts/GuestLayout.vue';
+    import Lessons from '@/Components/Lessons.vue';
+    const props = defineProps(['lessons']);
 </script>
 
 <template>
-    <Head title="Dashboard" />
-
-    <AuthenticatedLayout>
-        <template #header>
-            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
-                Dashboard
-            </h2>
-        </template>
-
-        <div class="py-12">
-            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
-                    <div class="p-6 bg-white border-b border-gray-200">
-                        You're logged in!
-                    </div>
-                </div>
-            </div>
-        </div>
-    </AuthenticatedLayout>
+    <Header>
+        <AuthenticatedLayout :lessons="lessons"/>
+    </Header>
 </template>
diff --git a/resources/js/Pages/Lessons.vue b/resources/js/Pages/Lessons.vue
index 0b6f65c..e85704a 100644
--- a/resources/js/Pages/Lessons.vue
+++ b/resources/js/Pages/Lessons.vue
@@ -1,73 +1,11 @@
 <script setup>
-    import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
-    import LessonCard from '../Components/LessonCard.vue';
-    import {ref} from "vue";
-    const props = defineProps(['name','lessons']);
-    var placeholderName = ref('Default name');
-    var placeholderDesc = ref('Default desc');
-    const changePlaceholder = (i) => {
-        placeholderName.value = props.lessons[i].name;
-        placeholderDesc.value = props.lessons[i].description;
-    }
-
-    changePlaceholder(1);
+import Header from '@/Layouts/Header.vue';
+import Lessons from '@/Components/Lessons.vue';
+const props = defineProps(['name', 'lessons']);
 </script>
 
-<style>
-.fade-enter-active,
-.fade-leave-active {
-    transition: opacity 0.5s ease-out;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-    opacity: 0;
-}
-</style>
-
 <template>
-    <AuthenticatedLayout>
-        <h1 class="text-white text-4xl font-bold mx-12 py-6"> {{ name }} </h1>
-        <div class="bg-card rounded-3xl mx-12 display flex flex-wrap justify-center p-4">
-            <div class="bg-black rounded-3xl h-32 w-1/5"> </div>
-            <div class="w-4/5">
-                <div class="w-full h-full">
-                    <div class="float-left my-6
-                                grid max-w-sm grid-cols-2 mx-auto text-center divide-x shadow-md">
-                        <div class="p-4">
-                            <div class="grid grid-rows-2 text-left">
-                                <p class="text-cardText text-md"> Lessons </p>
-                                <p class="text-gray-300 text-sm">{{ lessons.length }} Lessons </p>
-                            </div>
-                        </div>
-                        <div class="p-4">
-                            <div class="grid grid-rows-2 text-left">
-                                <p class="text-cardText text-md"> Level </p>
-                                <p class="text-gray-300 text-sm"> Beginner </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="float-right">
-                        <button class="bg-orange text-white px-4 py-2 rounded-xl my-10 mr-8 hover:text-backgroundFrom
-                                                    focus:outline-none transition ease-in-out duration-150"> Play Demo </button>
-                    </div>
-                </div>
-
-            </div>
-        </div>
-        <div class="mx-12 display flex flex-wrap pt-8">
-            <div class="dispaly flex flex-wrap w-3/5">
-                <LessonCard v-for="(lesson, index) in lessons" @click="changePlaceholder(index)" :name="lesson.name"/>
-            </div>
-            <div class="w-2/5 pt-3">
-                <transition name="fade" mode="out-in">
-                    <div :key="placeholderDesc">
-                        <h1 class="text-cardText text-lg"> {{ placeholderName }} </h1>
-                        <p class="text-gray-300 text-md"> {{ placeholderDesc }} </p>
-                    </div>
-                </transition>
-
-            </div>
-        </div>
-    </AuthenticatedLayout>
+    <Header>
+        <Lessons :name="name" :lessons="lessons"/>
+    </Header>
 </template>
diff --git a/routes/web.php b/routes/web.php
index 0f35c7b..4b57a5d 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,11 +1,13 @@
 <?php
 
 use App\Http\Controllers\LogoutController;
+use App\Http\Controllers\ShowDashboardController;
 use App\Http\Controllers\ShowCourseLessonsController;
 use Inertia\Inertia;
 use Illuminate\Support\Facades\Route;
 use Illuminate\Foundation\Application;
 use App\Http\Controllers\ShowCoursesController;
+
 /*
 |--------------------------------------------------------------------------
 | Web Routes
@@ -26,9 +28,7 @@
     ]);
 });
 
-Route::get('/dashboard', function () {
-    return Inertia::render('Dashboard');
-})->middleware(['auth', 'verified'])->name('dashboard');
+Route::get('/dashboard', ShowDashboardController::class)->middleware('auth', 'verified')->name('dashboard');
 
 Route::prefix('courses')->name('courses.')->group(function() {
     Route::middleware(['auth'])->group(function() {

From d0b90a372ae87f142bcd436ccfc6b52e0490072c Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Wed, 5 Oct 2022 11:05:18 +1000
Subject: [PATCH 13/36] Fixed v-for in Courses and fixed naming collision with
 Lessons

---
 .../js/Components/{Lessons.vue => LessonGrid.vue}    |  0
 resources/js/Pages/Courses.vue                       | 12 +++++++-----
 resources/js/Pages/Dashboard.vue                     |  3 ---
 resources/js/Pages/Lessons.vue                       |  4 ++--
 4 files changed, 9 insertions(+), 10 deletions(-)
 rename resources/js/Components/{Lessons.vue => LessonGrid.vue} (100%)

diff --git a/resources/js/Components/Lessons.vue b/resources/js/Components/LessonGrid.vue
similarity index 100%
rename from resources/js/Components/Lessons.vue
rename to resources/js/Components/LessonGrid.vue
diff --git a/resources/js/Pages/Courses.vue b/resources/js/Pages/Courses.vue
index e113741..99c82b1 100644
--- a/resources/js/Pages/Courses.vue
+++ b/resources/js/Pages/Courses.vue
@@ -14,11 +14,13 @@
     <Header>
         <h1 class="text-white text-4xl font-bold mx-12 py-6"> All courses</h1>
         <div class="display flex justify-center md:justify-start flex-wrap mx-12">
-            <Link :href="'/courses/' + id + '/lessons'">
-                <CourseCard v-for="course in courses"
-                            :name="course.name" :lessonCount="course.lessons_count"
-                            :userCount="course.user_count" :id="course.id"/>
-            </Link>
+            <div v-for="course in courses">
+                <Link :href="'/courses/' + course.id + '/lessons'" >
+                    <CourseCard :name="course.name" :lessonCount="course.lessons_count"
+                                :userCount="course.user_count" :id="course.id"/>
+                </Link>
+            </div>
+
         </div>
     </Header>
 </template>
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index 4c1868c..aeb43f8 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -1,9 +1,6 @@
 <script setup>
     import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
     import Header from '@/Layouts/Header.vue';
-    import { Link } from '@inertiajs/inertia-vue3';
-    import GuestLayout from '@/Layouts/GuestLayout.vue';
-    import Lessons from '@/Components/Lessons.vue';
     const props = defineProps(['lessons']);
 </script>
 
diff --git a/resources/js/Pages/Lessons.vue b/resources/js/Pages/Lessons.vue
index e85704a..67ee7a7 100644
--- a/resources/js/Pages/Lessons.vue
+++ b/resources/js/Pages/Lessons.vue
@@ -1,11 +1,11 @@
 <script setup>
 import Header from '@/Layouts/Header.vue';
-import Lessons from '@/Components/Lessons.vue';
+import LessonGrid from '@/Components/LessonGrid.vue';
 const props = defineProps(['name', 'lessons']);
 </script>
 
 <template>
     <Header>
-        <Lessons :name="name" :lessons="lessons"/>
+        <LessonGrid :name="name" :lessons="lessons"/>
     </Header>
 </template>

From b1d6c409df195544a1d46bd00ea17f9fa4fcfe12 Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Wed, 5 Oct 2022 11:54:14 +1000
Subject: [PATCH 14/36] Added routes, controllers and pages for dashboard views

---
 .../Controllers/ShowAchievementsController.php   | 14 ++++++++++++++
 app/Http/Controllers/ShowCoursesController.php   |  4 ----
 app/Http/Controllers/ShowMyCoursesController.php | 14 ++++++++++++++
 ...dController.php => ShowProfileController.php} |  8 ++------
 resources/js/Components/ProfileCard.vue          | 16 ++++++++++++++++
 resources/js/Layouts/AuthenticatedLayout.vue     |  7 ++++---
 resources/js/Pages/Achievements.vue              | 12 ++++++++++++
 resources/js/Pages/MyCourses.vue                 | 12 ++++++++++++
 .../js/Pages/{Dashboard.vue => Profile.vue}      |  4 +++-
 routes/web.php                                   | 12 ++++++++++--
 10 files changed, 87 insertions(+), 16 deletions(-)
 create mode 100644 app/Http/Controllers/ShowAchievementsController.php
 create mode 100644 app/Http/Controllers/ShowMyCoursesController.php
 rename app/Http/Controllers/{ShowDashboardController.php => ShowProfileController.php} (51%)
 create mode 100644 resources/js/Components/ProfileCard.vue
 create mode 100644 resources/js/Pages/Achievements.vue
 create mode 100644 resources/js/Pages/MyCourses.vue
 rename resources/js/Pages/{Dashboard.vue => Profile.vue} (66%)

diff --git a/app/Http/Controllers/ShowAchievementsController.php b/app/Http/Controllers/ShowAchievementsController.php
new file mode 100644
index 0000000..b00dc1e
--- /dev/null
+++ b/app/Http/Controllers/ShowAchievementsController.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Inertia\Inertia;
+use Inertia\Response;
+use Illuminate\Http\Request;
+
+class ShowAchievementsController extends Controller
+{
+    public function __invoke(): Response {
+        return Inertia('Achievements');
+    }
+}
diff --git a/app/Http/Controllers/ShowCoursesController.php b/app/Http/Controllers/ShowCoursesController.php
index da202a4..99327f5 100644
--- a/app/Http/Controllers/ShowCoursesController.php
+++ b/app/Http/Controllers/ShowCoursesController.php
@@ -3,12 +3,8 @@
 namespace App\Http\Controllers;
 
 
-use App\Models\User;
 use Inertia\Response;
 use App\Models\Course;
-use App\Models\Lesson;
-use Illuminate\Http\Request;
-use Illuminate\Database\Eloquent\Builder;
 
 class ShowCoursesController extends Controller
 {
diff --git a/app/Http/Controllers/ShowMyCoursesController.php b/app/Http/Controllers/ShowMyCoursesController.php
new file mode 100644
index 0000000..fe811e6
--- /dev/null
+++ b/app/Http/Controllers/ShowMyCoursesController.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Inertia\Inertia;
+use Inertia\Response;
+use Illuminate\Http\Request;
+
+class ShowMyCoursesController extends Controller
+{
+    public function __invoke(): Response {
+        return Inertia('MyCourses');
+    }
+}
diff --git a/app/Http/Controllers/ShowDashboardController.php b/app/Http/Controllers/ShowProfileController.php
similarity index 51%
rename from app/Http/Controllers/ShowDashboardController.php
rename to app/Http/Controllers/ShowProfileController.php
index b9c2797..6f0157c 100644
--- a/app/Http/Controllers/ShowDashboardController.php
+++ b/app/Http/Controllers/ShowProfileController.php
@@ -3,18 +3,14 @@
 namespace App\Http\Controllers;
 
 use Inertia\Response;
-use App\Models\Lesson;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
 
-class ShowDashboardController extends Controller
+class ShowProfileController extends Controller
 {
     public function __invoke(): Response {
         if (Auth::user()) {
-            $lessons = Lesson::all()->where('course_id', 1)->toArray();
-            return Inertia('Dashboard', [
-                'lessons' => $lessons
-            ]);
+            return Inertia('Profile');
         }
         return Inertia('Welcome');
     }
diff --git a/resources/js/Components/ProfileCard.vue b/resources/js/Components/ProfileCard.vue
new file mode 100644
index 0000000..715b85a
--- /dev/null
+++ b/resources/js/Components/ProfileCard.vue
@@ -0,0 +1,16 @@
+<script setup>
+    const props = defineProps(['name', 'email', "pfp"]);
+</script>
+
+<template>
+    <div class="display flex flex-wrap">
+        <div class="font-bold text-gray-700 rounded-full bg-white flex items-center justify-center font-mono
+                    w-32 h-32">
+
+        </div>
+        <div class="py-8 pl-8">
+            <p class="text-cardText pb-2 text-4xl"> {{ name }} </p>
+            <p class="text-sm text-cardText"> {{ email }} </p>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/Layouts/AuthenticatedLayout.vue b/resources/js/Layouts/AuthenticatedLayout.vue
index 80fff72..8c28ccb 100644
--- a/resources/js/Layouts/AuthenticatedLayout.vue
+++ b/resources/js/Layouts/AuthenticatedLayout.vue
@@ -1,11 +1,12 @@
 <script setup>
-import CourseCard from '@/Components/CourseCard.vue';
-
+    import CourseCard from '@/Components/CourseCard.vue';
+    import ProfileCard from '@/Components/ProfileCard.vue';
     const props = defineProps(['lessons'])
     var selected = 'profile';
 </script>
 
 <template>
+    <ProfileCard name="Seth Sharp" email="sesharp@outlook.com"/>
     <div>
         <ul
             class="flex flex-wrap text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400">
@@ -31,6 +32,6 @@ import CourseCard from '@/Components/CourseCard.vue';
     </div>
 
     <main>
-        <CourseCard name="Larascape" :lessonCount="4" :userCount="100" :id="1"/>
+       <slot/>
     </main>
 </template>
diff --git a/resources/js/Pages/Achievements.vue b/resources/js/Pages/Achievements.vue
new file mode 100644
index 0000000..fe12c7c
--- /dev/null
+++ b/resources/js/Pages/Achievements.vue
@@ -0,0 +1,12 @@
+<script setup>
+    import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
+    import Header from '@/Layouts/Header.vue';
+</script>
+
+<template>
+    <Header>
+        <AuthenticatedLayout>
+            <p class="text-white"> This is the achievements </p>
+        </AuthenticatedLayout>
+    </Header>
+</template>
diff --git a/resources/js/Pages/MyCourses.vue b/resources/js/Pages/MyCourses.vue
new file mode 100644
index 0000000..6220c5d
--- /dev/null
+++ b/resources/js/Pages/MyCourses.vue
@@ -0,0 +1,12 @@
+<script setup>
+    import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
+    import Header from '@/Layouts/Header.vue';
+</script>
+
+<template>
+    <Header>
+        <AuthenticatedLayout>
+            <p class="text-white"> This is my courses </p>
+        </AuthenticatedLayout>
+    </Header>
+</template>
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Profile.vue
similarity index 66%
rename from resources/js/Pages/Dashboard.vue
rename to resources/js/Pages/Profile.vue
index aeb43f8..bc47a03 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Profile.vue
@@ -6,6 +6,8 @@
 
 <template>
     <Header>
-        <AuthenticatedLayout :lessons="lessons"/>
+        <AuthenticatedLayout>
+            <p class="text-white"> This is the profile </p>
+        </AuthenticatedLayout>
     </Header>
 </template>
diff --git a/routes/web.php b/routes/web.php
index 4b57a5d..caf870a 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,12 +1,14 @@
 <?php
 
 use App\Http\Controllers\LogoutController;
-use App\Http\Controllers\ShowDashboardController;
+use App\Http\Controllers\ShowAchievementsController;
+use App\Http\Controllers\ShowProfileController;
 use App\Http\Controllers\ShowCourseLessonsController;
 use Inertia\Inertia;
 use Illuminate\Support\Facades\Route;
 use Illuminate\Foundation\Application;
 use App\Http\Controllers\ShowCoursesController;
+use App\Http\Controllers\ShowMyCoursesController;
 
 /*
 |--------------------------------------------------------------------------
@@ -28,7 +30,13 @@
     ]);
 });
 
-Route::get('/dashboard', ShowDashboardController::class)->middleware('auth', 'verified')->name('dashboard');
+Route::prefix('dashboard')->name('dashboard')->group(function() {
+    Route::middleware(['auth'])->group(function() {
+        Route::get('/profile', ShowProfileController::class);
+        Route::get('/mycourses', ShowMyCoursesController::class)->name('.courses');
+        Route::get('/achievements', ShowAchievementsController::class)->name('.achievements');
+    });
+});
 
 Route::prefix('courses')->name('courses.')->group(function() {
     Route::middleware(['auth'])->group(function() {

From 634f8da3e009ea26051d2dc859d022d812eb8307 Mon Sep 17 00:00:00 2001
From: vrodriguero <vickyamauti@hotmail.com>
Date: Wed, 5 Oct 2022 14:49:37 +1000
Subject: [PATCH 15/36] install headlessui/vue

---
 package-lock.json | 20 ++++++++++++++++++++
 package.json      |  1 +
 2 files changed, 21 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 861f7cb..440b1cc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
     "packages": {
         "": {
             "devDependencies": {
+                "@headlessui/vue": "^1.7.3",
                 "@inertiajs/inertia": "^0.11.0",
                 "@inertiajs/inertia-vue3": "^0.6.0",
                 "@inertiajs/progress": "^0.2.7",
@@ -48,6 +49,18 @@
                 "node": ">=12"
             }
         },
+        "node_modules/@headlessui/vue": {
+            "version": "1.7.3",
+            "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.3.tgz",
+            "integrity": "sha512-Is4iakKts9u9E0+jEZNzoJpBjwq2SamwEIoEl2RlyYSu6Zco536GsPXaQEfg/o7Eyc1GUUlcL+dJd4Rt7qyf7A==",
+            "dev": true,
+            "engines": {
+                "node": ">=10"
+            },
+            "peerDependencies": {
+                "vue": "^3.2.0"
+            }
+        },
         "node_modules/@inertiajs/inertia": {
             "version": "0.11.0",
             "resolved": "https://registry.npmjs.org/@inertiajs/inertia/-/inertia-0.11.0.tgz",
@@ -1874,6 +1887,13 @@
             "dev": true,
             "optional": true
         },
+        "@headlessui/vue": {
+            "version": "1.7.3",
+            "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.3.tgz",
+            "integrity": "sha512-Is4iakKts9u9E0+jEZNzoJpBjwq2SamwEIoEl2RlyYSu6Zco536GsPXaQEfg/o7Eyc1GUUlcL+dJd4Rt7qyf7A==",
+            "dev": true,
+            "requires": {}
+        },
         "@inertiajs/inertia": {
             "version": "0.11.0",
             "resolved": "https://registry.npmjs.org/@inertiajs/inertia/-/inertia-0.11.0.tgz",
diff --git a/package.json b/package.json
index 39d8528..9a5a38e 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
         "build": "vite build"
     },
     "devDependencies": {
+        "@headlessui/vue": "^1.7.3",
         "@inertiajs/inertia": "^0.11.0",
         "@inertiajs/inertia-vue3": "^0.6.0",
         "@inertiajs/progress": "^0.2.7",

From 690a1f5fccdc364d2dbeaeae3a89d21ccfac1690 Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Wed, 5 Oct 2022 15:31:00 +1000
Subject: [PATCH 16/36] Code styling

---
 .../Controllers/ShowAchievementsController.php     |  3 ++-
 .../Controllers/ShowCourseLessonsController.php    |  5 +++--
 app/Http/Controllers/ShowCoursesController.php     |  4 ++--
 app/Http/Controllers/ShowMyCoursesController.php   |  3 ++-
 app/Http/Controllers/ShowProfileController.php     |  3 ++-
 routes/web.php                                     | 14 +++++++-------
 6 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/app/Http/Controllers/ShowAchievementsController.php b/app/Http/Controllers/ShowAchievementsController.php
index b00dc1e..9f13162 100644
--- a/app/Http/Controllers/ShowAchievementsController.php
+++ b/app/Http/Controllers/ShowAchievementsController.php
@@ -8,7 +8,8 @@
 
 class ShowAchievementsController extends Controller
 {
-    public function __invoke(): Response {
+    public function __invoke(): Response
+    {
         return Inertia('Achievements');
     }
 }
diff --git a/app/Http/Controllers/ShowCourseLessonsController.php b/app/Http/Controllers/ShowCourseLessonsController.php
index 7814f61..e1dbdad 100644
--- a/app/Http/Controllers/ShowCourseLessonsController.php
+++ b/app/Http/Controllers/ShowCourseLessonsController.php
@@ -6,10 +6,11 @@
 
 class ShowCourseLessonsController extends Controller
 {
-    public function __invoke($course_id) {
+    public function __invoke($course_id)
+    {
         $lessons = Lesson::where('course_id', $course_id)->get();
         return Inertia('Lessons', [
-            //TODO: name as slug (not id)
+            // TODO: name as slug (not id)
             'name' => $course_id,
             'lessons' => $lessons
         ]);
diff --git a/app/Http/Controllers/ShowCoursesController.php b/app/Http/Controllers/ShowCoursesController.php
index 99327f5..ed9f86b 100644
--- a/app/Http/Controllers/ShowCoursesController.php
+++ b/app/Http/Controllers/ShowCoursesController.php
@@ -2,13 +2,13 @@
 
 namespace App\Http\Controllers;
 
-
 use Inertia\Response;
 use App\Models\Course;
 
 class ShowCoursesController extends Controller
 {
-    public function __invoke(): Response {
+    public function __invoke(): Response
+    {
         $courses = Course::withCount('lessons')->get();
         return Inertia('Courses', [
             'courses' => $courses
diff --git a/app/Http/Controllers/ShowMyCoursesController.php b/app/Http/Controllers/ShowMyCoursesController.php
index fe811e6..aaa6fcc 100644
--- a/app/Http/Controllers/ShowMyCoursesController.php
+++ b/app/Http/Controllers/ShowMyCoursesController.php
@@ -8,7 +8,8 @@
 
 class ShowMyCoursesController extends Controller
 {
-    public function __invoke(): Response {
+    public function __invoke(): Response
+    {
         return Inertia('MyCourses');
     }
 }
diff --git a/app/Http/Controllers/ShowProfileController.php b/app/Http/Controllers/ShowProfileController.php
index 6f0157c..f1f5ca9 100644
--- a/app/Http/Controllers/ShowProfileController.php
+++ b/app/Http/Controllers/ShowProfileController.php
@@ -8,7 +8,8 @@
 
 class ShowProfileController extends Controller
 {
-    public function __invoke(): Response {
+    public function __invoke(): Response
+    {
         if (Auth::user()) {
             return Inertia('Profile');
         }
diff --git a/routes/web.php b/routes/web.php
index d3da5a7..0e206c6 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,14 +1,14 @@
 <?php
 
-use App\Http\Controllers\LogoutController;
-use App\Http\Controllers\ShowAchievementsController;
-use App\Http\Controllers\ShowProfileController;
-use App\Http\Controllers\ShowCourseLessonsController;
 use Inertia\Inertia;
 use Illuminate\Support\Facades\Route;
 use Illuminate\Foundation\Application;
+use App\Http\Controllers\LogoutController;
 use App\Http\Controllers\ShowCoursesController;
+use App\Http\Controllers\ShowProfileController;
 use App\Http\Controllers\ShowMyCoursesController;
+use App\Http\Controllers\ShowAchievementsController;
+use App\Http\Controllers\ShowCourseLessonsController;
 
 /*
 |--------------------------------------------------------------------------
@@ -30,8 +30,8 @@
     ]);
 });
 
-Route::prefix('/dashboard')->name('dashboard')->group(function() {
-    Route::middleware(['auth'])->group(function() {
+Route::prefix('/dashboard')->name('dashboard')->group(function () {
+    Route::middleware(['auth'])->group(function () {
         Route::get('/profile', ShowProfileController::class);
         Route::get('/mycourses', ShowMyCoursesController::class)->name('.courses');
         Route::get('/achievements', ShowAchievementsController::class)->name('.achievements');
@@ -41,7 +41,7 @@
 Route::get('/logout', [LogoutController::class, 'perform'])->middleware('auth', 'verified');
 
 Route::prefix('/courses')->name('courses.')->group(function () {
-    Route::middleware(['auth'])->group(function() {
+    Route::middleware(['auth'])->group(function () {
         Route::get('/all', ShowCoursesController::class)->name('course.show');
         Route::get('/all/{id}/lessons', ShowCourseLessonsController::class)->name('course.lessons');
     });

From 685779d498f0d50dfb83ed75f45f941dd4702d64 Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Wed, 5 Oct 2022 15:51:56 +1000
Subject: [PATCH 17/36] NavLink implementation to show active dash page

---
 resources/js/Components/NavLink.vue          | 13 +++++++-----
 resources/js/Layouts/AuthenticatedLayout.vue | 21 +++++++++-----------
 resources/js/Layouts/Header.vue              |  2 +-
 routes/web.php                               |  2 +-
 4 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/resources/js/Components/NavLink.vue b/resources/js/Components/NavLink.vue
index 6ff675f..8153187 100644
--- a/resources/js/Components/NavLink.vue
+++ b/resources/js/Components/NavLink.vue
@@ -1,12 +1,15 @@
 <script setup>
-import { Link } from '@inertiajs/inertia-vue3';
-
-const props = defineProps(['href']);
+    import { computed } from 'vue';
+    const props = defineProps(['href', 'active']);
+    const classes = computed(() => props.active ?
+    'inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300 border-b-2 border-orange' :
+    'inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300 border-b-2 border-transparent'
+);
 
 </script>
 
 <template>
-    <Link :href="href">
+    <a :href="href" :class="classes">
         <slot />
-    </Link>
+    </a>
 </template>
diff --git a/resources/js/Layouts/AuthenticatedLayout.vue b/resources/js/Layouts/AuthenticatedLayout.vue
index 8c28ccb..1670128 100644
--- a/resources/js/Layouts/AuthenticatedLayout.vue
+++ b/resources/js/Layouts/AuthenticatedLayout.vue
@@ -1,8 +1,8 @@
 <script setup>
-    import CourseCard from '@/Components/CourseCard.vue';
+    import { Link } from '@inertiajs/inertia-vue3';
+    import NavLink from '@/Components/NavLink.vue';
     import ProfileCard from '@/Components/ProfileCard.vue';
-    const props = defineProps(['lessons'])
-    var selected = 'profile';
+    const props = defineProps(['lessons']);
 </script>
 
 <template>
@@ -11,22 +11,19 @@
         <ul
             class="flex flex-wrap text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400">
             <li class="mr-2">
-                <a href="#"
-                    class="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300">
+                <NavLink :href="route('dashboard.profile')" :active="route().current('dashboard.profile')">
                     Profile
-                </a>
+                </NavLink>
             </li>
             <li class="mr-2">
-                <a href="#"
-                    class="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300">
+                <NavLink :href="route('dashboard.courses')" :active="route().current('dashboard.courses')">
                     My Courses
-                </a>
+                </NavLink>
             </li>
             <li class="mr-2">
-                <a href="#"
-                    class="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300">
+                <NavLink :href="route('dashboard.achievements')" :active="route().current('dashboard.achievements')">
                     Achievements
-                </a>
+                </NavLink>
             </li>
         </ul>
     </div>
diff --git a/resources/js/Layouts/Header.vue b/resources/js/Layouts/Header.vue
index 992697e..b61a9bc 100644
--- a/resources/js/Layouts/Header.vue
+++ b/resources/js/Layouts/Header.vue
@@ -14,7 +14,7 @@ import { Link } from '@inertiajs/inertia-vue3';
                         <div class="flex">
                             <!-- Logo -->
                             <div class="shrink-0 flex items-center">
-                                <Link :href="route('dashboard')">
+                                <Link :href="route('dashboard.profile')">
                                 <ApplicationLogo class="block h-9 w-auto" />
                                 </Link>
                             </div>
diff --git a/routes/web.php b/routes/web.php
index 0e206c6..0996eb5 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -32,7 +32,7 @@
 
 Route::prefix('/dashboard')->name('dashboard')->group(function () {
     Route::middleware(['auth'])->group(function () {
-        Route::get('/profile', ShowProfileController::class);
+        Route::get('/profile', ShowProfileController::class)->name('.profile');
         Route::get('/mycourses', ShowMyCoursesController::class)->name('.courses');
         Route::get('/achievements', ShowAchievementsController::class)->name('.achievements');
     });

From 5dfa80ab0218cd92bb6c901cb12e087c8a5616c9 Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Wed, 5 Oct 2022 15:58:43 +1000
Subject: [PATCH 18/36] Styling changes

---
 resources/js/Layouts/AuthenticatedLayout.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/resources/js/Layouts/AuthenticatedLayout.vue b/resources/js/Layouts/AuthenticatedLayout.vue
index 1670128..a258ccb 100644
--- a/resources/js/Layouts/AuthenticatedLayout.vue
+++ b/resources/js/Layouts/AuthenticatedLayout.vue
@@ -6,10 +6,11 @@
 </script>
 
 <template>
-    <ProfileCard name="Seth Sharp" email="sesharp@outlook.com"/>
-    <div>
+
+    <div class="pl-12 pt-12">
+        <ProfileCard name="Seth Sharp" email="sesharp@outlook.com"/>
         <ul
-            class="flex flex-wrap text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400">
+            class="flex flex-wrap text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400">
             <li class="mr-2">
                 <NavLink :href="route('dashboard.profile')" :active="route().current('dashboard.profile')">
                     Profile
@@ -29,6 +30,8 @@
     </div>
 
     <main>
-       <slot/>
+        <div class="pl-12 pt-6">
+            <slot />
+        </div>
     </main>
 </template>

From a86f0aa8de2d448ef208c66a64302c74f874633e Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Wed, 5 Oct 2022 16:16:36 +1000
Subject: [PATCH 19/36] My courses functionality (Course Card -> Lessons for
 that course, as well as a nav back btn)

---
 .../ShowMyCourseLessonsController.php         | 19 ++++++++++++++++++
 .../Controllers/ShowMyCoursesController.php   |  7 ++++++-
 resources/js/Pages/MyCourseLessons.vue        | 20 +++++++++++++++++++
 resources/js/Pages/MyCourses.vue              | 11 +++++++++-
 routes/web.php                                |  2 ++
 5 files changed, 57 insertions(+), 2 deletions(-)
 create mode 100644 app/Http/Controllers/ShowMyCourseLessonsController.php
 create mode 100644 resources/js/Pages/MyCourseLessons.vue

diff --git a/app/Http/Controllers/ShowMyCourseLessonsController.php b/app/Http/Controllers/ShowMyCourseLessonsController.php
new file mode 100644
index 0000000..911f0e5
--- /dev/null
+++ b/app/Http/Controllers/ShowMyCourseLessonsController.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Lesson;
+
+class ShowMyCourseLessonsController extends Controller
+{
+    public function __invoke($course_id)
+    {
+        $lessons = Lesson::where('course_id', $course_id)->get();
+
+        return Inertia('MyCourseLessons', [
+            // TODO: name as slug (not id)
+            'name' => $course_id,
+            'lessons' => $lessons
+        ]);
+    }
+}
diff --git a/app/Http/Controllers/ShowMyCoursesController.php b/app/Http/Controllers/ShowMyCoursesController.php
index aaa6fcc..6f5efd3 100644
--- a/app/Http/Controllers/ShowMyCoursesController.php
+++ b/app/Http/Controllers/ShowMyCoursesController.php
@@ -4,12 +4,17 @@
 
 use Inertia\Inertia;
 use Inertia\Response;
+use App\Models\Course;
 use Illuminate\Http\Request;
 
 class ShowMyCoursesController extends Controller
 {
     public function __invoke(): Response
     {
-        return Inertia('MyCourses');
+        $courses = Course::withCount('lessons')->get();
+        // dd($courses);
+        return Inertia('MyCourses', [
+            'courses' => $courses
+        ]);
     }
 }
diff --git a/resources/js/Pages/MyCourseLessons.vue b/resources/js/Pages/MyCourseLessons.vue
new file mode 100644
index 0000000..21bf552
--- /dev/null
+++ b/resources/js/Pages/MyCourseLessons.vue
@@ -0,0 +1,20 @@
+<script setup>
+    import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
+    import Header from '@/Layouts/Header.vue';
+    import LessonGrid from '@/Components/LessonGrid.vue';
+    import { Link } from '@inertiajs/inertia-vue3';
+    const props = defineProps(['name', 'lessons']);
+</script>
+
+<template>
+    <Header>
+        <AuthenticatedLayout>
+            <p class="text-orange">
+                <Link href="/dashboard/mycourses">
+                    Back
+                </Link>
+            </p>
+            <LessonGrid :name="name" :lessons="lessons" />
+        </AuthenticatedLayout>
+    </Header>
+</template>
diff --git a/resources/js/Pages/MyCourses.vue b/resources/js/Pages/MyCourses.vue
index 6220c5d..32b07b3 100644
--- a/resources/js/Pages/MyCourses.vue
+++ b/resources/js/Pages/MyCourses.vue
@@ -1,12 +1,21 @@
 <script setup>
     import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
     import Header from '@/Layouts/Header.vue';
+    import CourseCard from '@/Components/CourseCard.vue';
+    import { Link } from '@inertiajs/inertia-vue3';
+    const props = defineProps(['courses']);
 </script>
 
 <template>
     <Header>
         <AuthenticatedLayout>
-            <p class="text-white"> This is my courses </p>
+            <div class="display flex flex-wrap justify-center md:justify-start">
+                <div v-for="course in courses">
+                    <Link :href="'/dashboard/mycourses/' + course.id">
+                        <CourseCard :name="course.name" :lessonCount="courses.lesson_count" :id="course.id" />
+                    </Link>
+                </div>
+            </div>
         </AuthenticatedLayout>
     </Header>
 </template>
diff --git a/routes/web.php b/routes/web.php
index 0996eb5..4596902 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -9,6 +9,7 @@
 use App\Http\Controllers\ShowMyCoursesController;
 use App\Http\Controllers\ShowAchievementsController;
 use App\Http\Controllers\ShowCourseLessonsController;
+use App\Http\Controllers\ShowMyCourseLessonsController;
 
 /*
 |--------------------------------------------------------------------------
@@ -34,6 +35,7 @@
     Route::middleware(['auth'])->group(function () {
         Route::get('/profile', ShowProfileController::class)->name('.profile');
         Route::get('/mycourses', ShowMyCoursesController::class)->name('.courses');
+        Route::get('/mycourses/{id}', ShowMyCourseLessonsController::class)->name('.lessons');
         Route::get('/achievements', ShowAchievementsController::class)->name('.achievements');
     });
 });

From d356d9fd8eda53cb42db231b77a3714e544491f7 Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Wed, 5 Oct 2022 23:07:26 +1000
Subject: [PATCH 20/36] Header responsiveness fixed

---
 resources/js/Layouts/Header.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/Layouts/Header.vue b/resources/js/Layouts/Header.vue
index b61a9bc..eaeff96 100644
--- a/resources/js/Layouts/Header.vue
+++ b/resources/js/Layouts/Header.vue
@@ -9,7 +9,7 @@ import { Link } from '@inertiajs/inertia-vue3';
         <div class="min-h-screen">
             <nav class="">
                 <!-- Primary Navigation Menu -->
-                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="mx-auto px-12">
                     <div class="flex justify-between h-16">
                         <div class="flex">
                             <!-- Logo -->

From acd132dfaa5a00c7b4e2c7d994738c3a71a86dac Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Tue, 1 Nov 2022 15:30:14 +1000
Subject: [PATCH 21/36] Dashboard subpage layout changes and general UI
 changes/improvments

---
 .../Controllers/ShowDashboardController.php   | 40 +++++++++
 .../ShowMyCourseLessonsController.php         | 10 +--
 resources/js/Components/ApplicationLogo.vue   | 12 ++-
 resources/js/Components/CourseCard.vue        | 10 ++-
 resources/js/Components/LessonGrid.vue        | 82 +++++++++++--------
 resources/js/Components/NavLink.vue           |  6 +-
 resources/js/Components/ProfileCard.vue       |  5 +-
 resources/js/Layouts/AuthenticatedLayout.vue  | 25 ------
 resources/js/Layouts/GuestLayout.vue          |  2 +-
 resources/js/Layouts/Header.vue               | 15 ++--
 resources/js/Pages/Achievements.vue           |  6 +-
 resources/js/Pages/Dashboard.vue              | 49 +++++++++++
 resources/js/Pages/MyCourseLessons.vue        |  9 +-
 resources/js/Pages/MyCourses.vue              | 37 +++++----
 resources/js/Pages/Profile.vue                |  6 +-
 routes/web.php                                |  7 +-
 tailwind.config.js                            |  4 +-
 17 files changed, 206 insertions(+), 119 deletions(-)
 create mode 100644 app/Http/Controllers/ShowDashboardController.php
 create mode 100644 resources/js/Pages/Dashboard.vue

diff --git a/app/Http/Controllers/ShowDashboardController.php b/app/Http/Controllers/ShowDashboardController.php
new file mode 100644
index 0000000..f311503
--- /dev/null
+++ b/app/Http/Controllers/ShowDashboardController.php
@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Inertia\Response;
+use App\Models\Course;
+use App\Models\Lesson;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+
+class ShowDashboardController extends Controller
+{
+    public function __invoke(): Response
+    {
+        if (Auth::user()) {
+            $courses = Course::withCount('lessons')->get();
+            $l = Lesson::all();
+            $lessons = array();
+            $prev = 1;
+            $temp = array();
+            foreach ($l as $lesson) {
+                if ($lesson->course_id == $prev) {
+                    array_push($temp, $lesson);
+                } else {
+                    array_push($lessons, $temp);
+                    $temp = array();
+                    array_push($temp, $lesson);
+                    $prev = $lesson->course_id;
+                }
+            }
+            array_push($lessons, $temp);
+            return Inertia('Dashboard', [
+                'courses' => $courses,
+                'lessons' => $lessons,
+                'user' => Auth::check()
+            ]);
+        }
+        return Inertia('Welcome');
+    }
+}
diff --git a/app/Http/Controllers/ShowMyCourseLessonsController.php b/app/Http/Controllers/ShowMyCourseLessonsController.php
index 911f0e5..23b6cb5 100644
--- a/app/Http/Controllers/ShowMyCourseLessonsController.php
+++ b/app/Http/Controllers/ShowMyCourseLessonsController.php
@@ -3,16 +3,14 @@
 namespace App\Http\Controllers;
 
 use App\Models\Lesson;
-
+use App\Models\Course;
 class ShowMyCourseLessonsController extends Controller
 {
-    public function __invoke($course_id)
+    public function __invoke(Course $course)
     {
-        $lessons = Lesson::where('course_id', $course_id)->get();
-
+        $lessons = Lesson::where('course_id', $course->id)->get();
         return Inertia('MyCourseLessons', [
-            // TODO: name as slug (not id)
-            'name' => $course_id,
+            'name' => $course->name,
             'lessons' => $lessons
         ]);
     }
diff --git a/resources/js/Components/ApplicationLogo.vue b/resources/js/Components/ApplicationLogo.vue
index dff1a6c..4943255 100644
--- a/resources/js/Components/ApplicationLogo.vue
+++ b/resources/js/Components/ApplicationLogo.vue
@@ -1,6 +1,16 @@
+<script setup>
+    import { computed } from 'vue';
+    const props = defineProps(['dark']);
+    const newImg = computed(() => props.dark ?
+    'https://d2wks4gidu9630.cloudfront.net/f9e7e5eb-767a-4239-a8b4-63b76580c003/svg/codinglabs-logo.svg' :
+    'https://d2wks4gidu9630.cloudfront.net/9bfe4af0-d7a0-4399-930f-d93ec6019812/svg/codinglabs-logo-stacked.svg'
+);
+
+</script>
+
 <template>
     <img
-        src="https://d2wks4gidu9630.cloudfront.net/f9e7e5eb-767a-4239-a8b4-63b76580c003/svg/codinglabs-logo.svg"
+        :src="newImg"
         alt="Coding Labs"
     />
 </template>
diff --git a/resources/js/Components/CourseCard.vue b/resources/js/Components/CourseCard.vue
index 27f9607..51e8ea5 100644
--- a/resources/js/Components/CourseCard.vue
+++ b/resources/js/Components/CourseCard.vue
@@ -7,14 +7,18 @@
     <div class="bg-card rounded-3xl mx-4 my-4 w-72 h-auto">
         <div class="grid grid-cols-1 grid-rows-2 p-4">
             <div class="">
-                <!-- <p class="bg-orange font-white px-3 w-22"> Beginner </p> -->
                 <!-- Temp image -->
-                <div class="bg-black rounded-3xl w-full h-40"></div>
+                <div class="bg-black rounded-3xl w-full h-40 text-white">
+                    <!-- <p class="bg-orange font-white px-6 w-28 rounded-lg ml-2"> Beginner </p> -->
+                </div>
             </div>
             <div class="pt-8">
                 <h1 class="text-white text-lg"> {{ name }} </h1>
                 <h1 class="text-gray-300 pt-2 text-md"> {{ lessonCount }} Lessons </h1>
-                <h1 class="text-gray-300 pt-3 text-sm"> Beginner | {{ userCount }} students | Certificate included </h1>
+                <h1 class="text-gray-300 pt-3 text-xs"> Beginner | {{ userCount }} students | Certificate included </h1>
+                <div class="mt-3 w-4/5 bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
+                    <div class="bg-emerald-300 h-2.5 rounded-full" style="width: 45%"></div>
+                </div>
             </div>
         </div>
     </div>
diff --git a/resources/js/Components/LessonGrid.vue b/resources/js/Components/LessonGrid.vue
index c59209b..b99a859 100644
--- a/resources/js/Components/LessonGrid.vue
+++ b/resources/js/Components/LessonGrid.vue
@@ -1,7 +1,7 @@
 <script setup>
     import {ref} from "vue";
     import LessonCard from "./LessonCard.vue";
-    const props = defineProps(['userAuth','name','lessons']);
+    const props = defineProps(['name','lessons']);
     var placeholderName = ref('Default name');
     var placeholderDesc = ref('Default desc');
     const changePlaceholder = (i) => {
@@ -24,47 +24,59 @@
 </style>
 
 <template>
-    <h1 class="text-white text-4xl font-bold mx-12 py-6"> {{ name }} </h1>
-    <div class="bg-card rounded-3xl mx-12 display flex flex-wrap justify-center p-4">
-        <div class="bg-black rounded-3xl h-32 w-1/5"> </div>
-        <div class="w-4/5">
-            <div class="w-full h-full">
-                <div class="float-left my-6
-                                    grid max-w-sm grid-cols-2 mx-auto text-center divide-x shadow-md">
-                    <div class="p-4">
-                        <div class="grid grid-rows-2 text-left">
-                            <p class="text-cardText text-md"> Lessons </p>
-                            <p class="text-gray-300 text-sm"> {{ lessons.length }} Lessons </p>
+    <div class="w-full">
+        <h1 class="text-white text-4xl font-bold py-6"> {{ name }} </h1>
+        <div class="bg-card rounded-3xl display flex flex-wrap justify-center p-4">
+            <div class="bg-black rounded-3xl h-32 w-1/5"> </div>
+            <div class="w-4/5">
+                <div class="w-full h-full">
+                    <div class="float-left my-6
+                                grid grid-cols-3 mx-auto text-center divide-x">
+                        <div class="p-4">
+                            <div class="grid grid-rows-2 text-left">
+                                <p class="text-cardText text-md"> Lessons </p>
+                                <p class="text-gray-300 text-sm"> {{ lessons.length }} Lessons </p>
+                            </div>
                         </div>
-                    </div>
-                    <div class="p-4">
-                        <div class="grid grid-rows-2 text-left">
-                            <p class="text-cardText text-md"> Level </p>
-                            <p class="text-gray-300 text-sm"> Beginner </p>
+                        <div class="p-4">
+                            <div class="grid grid-rows-2 text-left">
+                                <p class="text-cardText text-md"> Level </p>
+                                <p class="text-gray-300 text-sm"> Beginner </p>
+                            </div>
+                        </div>
+                        <div class="p-4 w-32">
+                            <div class="grid grid-rows-2 text-left">
+                                <p class="text-cardText text-md"> Progress </p>
+                                <div class="mt-3 w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
+                                    <div class="bg-emerald-300 h-2.5 rounded-full" style="width: 90%"></div>
+                                </div>
+                            </div>
                         </div>
                     </div>
+                    <div class="float-right">
+                        <button class=" bg-orange text-white
+                                        px-4 py-2 rounded-xl my-10 mr-8
+                                        hover:text-backgroundFrom focus:outline-none transition ease-in-out duration-150"> Play Demo
+                        </button>
+                    </div>
                 </div>
-                <div class="float-right">
-                    <button class="bg-orange text-white px-4 py-2 rounded-xl my-10 mr-8 hover:text-backgroundFrom
-                                                        focus:outline-none transition ease-in-out duration-150"> Play Demo
-                    </button>
-                </div>
-            </div>
 
+            </div>
         </div>
-    </div>
-    <div class="mx-12 display flex flex-wrap pt-8">
-        <div class="dispaly flex flex-wrap w-3/5">
-            <LessonCard v-for="(lesson, index) in lessons" @click="changePlaceholder(index)"/>
-        </div>
-        <div class="w-2/5 pt-3">
-            <transition name="fade" mode="out-in">
-                <div :key="placeholderDesc">
-                    <h1 class="text-cardText text-lg"> {{ placeholderName }} </h1>
-                    <p class="text-gray-300 text-md"> {{ placeholderDesc }} </p>
-                </div>
-            </transition>
+        <div class="display flex flex-wrap pt-8">
+            <div class="flex flex-wrap w-3/5 sm:justify-start justify-center">
+                <LessonCard v-for="(lesson, index) in lessons" @click="changePlaceholder(index)"/>
+            </div>
+            <div class="w-2/5 pt-3">
+                <transition name="fade" mode="out-in">
+                    <div :key="placeholderDesc">
+                        <h1 class="text-cardText text-lg"> {{ placeholderName }} </h1>
+                        <p class="text-gray-300 text-md"> {{ placeholderDesc }} </p>
+                    </div>
+                </transition>
 
+            </div>
         </div>
     </div>
+
 </template>
diff --git a/resources/js/Components/NavLink.vue b/resources/js/Components/NavLink.vue
index 8153187..6b106e4 100644
--- a/resources/js/Components/NavLink.vue
+++ b/resources/js/Components/NavLink.vue
@@ -2,14 +2,14 @@
     import { computed } from 'vue';
     const props = defineProps(['href', 'active']);
     const classes = computed(() => props.active ?
-    'inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300 border-b-2 border-orange' :
+    'inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300 border-b-2 text-teal-400 border-teal-400' :
     'inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300 border-b-2 border-transparent'
 );
 
 </script>
 
 <template>
-    <a :href="href" :class="classes">
+    <div :class="classes">
         <slot />
-    </a>
+    </div>
 </template>
diff --git a/resources/js/Components/ProfileCard.vue b/resources/js/Components/ProfileCard.vue
index 715b85a..a388928 100644
--- a/resources/js/Components/ProfileCard.vue
+++ b/resources/js/Components/ProfileCard.vue
@@ -6,11 +6,10 @@
     <div class="display flex flex-wrap">
         <div class="font-bold text-gray-700 rounded-full bg-white flex items-center justify-center font-mono
                     w-32 h-32">
-
         </div>
         <div class="py-8 pl-8">
-            <p class="text-cardText pb-2 text-4xl"> {{ name }} </p>
-            <p class="text-sm text-cardText"> {{ email }} </p>
+            <p class="text-white pb-2 text-4xl"> {{ name }} </p>
+            <p class="text-sm text-white"> {{ email }} </p>
         </div>
     </div>
 </template>
diff --git a/resources/js/Layouts/AuthenticatedLayout.vue b/resources/js/Layouts/AuthenticatedLayout.vue
index a258ccb..358c2b3 100644
--- a/resources/js/Layouts/AuthenticatedLayout.vue
+++ b/resources/js/Layouts/AuthenticatedLayout.vue
@@ -6,32 +6,7 @@
 </script>
 
 <template>
-
     <div class="pl-12 pt-12">
         <ProfileCard name="Seth Sharp" email="sesharp@outlook.com"/>
-        <ul
-            class="flex flex-wrap text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400">
-            <li class="mr-2">
-                <NavLink :href="route('dashboard.profile')" :active="route().current('dashboard.profile')">
-                    Profile
-                </NavLink>
-            </li>
-            <li class="mr-2">
-                <NavLink :href="route('dashboard.courses')" :active="route().current('dashboard.courses')">
-                    My Courses
-                </NavLink>
-            </li>
-            <li class="mr-2">
-                <NavLink :href="route('dashboard.achievements')" :active="route().current('dashboard.achievements')">
-                    Achievements
-                </NavLink>
-            </li>
-        </ul>
     </div>
-
-    <main>
-        <div class="pl-12 pt-6">
-            <slot />
-        </div>
-    </main>
 </template>
diff --git a/resources/js/Layouts/GuestLayout.vue b/resources/js/Layouts/GuestLayout.vue
index fc8f519..3418eef 100644
--- a/resources/js/Layouts/GuestLayout.vue
+++ b/resources/js/Layouts/GuestLayout.vue
@@ -7,7 +7,7 @@ import { Link } from '@inertiajs/inertia-vue3';
     <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
         <div>
             <Link href="/">
-                <ApplicationLogo class="w-20 h-20 fill-current text-gray-500" />
+                <ApplicationLogo class="w-20 h-20 fill-current text-gray-500" :dark="true"/>
             </Link>
         </div>
 
diff --git a/resources/js/Layouts/Header.vue b/resources/js/Layouts/Header.vue
index eaeff96..e2cedd7 100644
--- a/resources/js/Layouts/Header.vue
+++ b/resources/js/Layouts/Header.vue
@@ -1,6 +1,7 @@
 <script setup>
-import ApplicationLogo from '@/Components/ApplicationLogo.vue';
-import { Link } from '@inertiajs/inertia-vue3';
+    import ApplicationLogo from '@/Components/ApplicationLogo.vue';
+    import { Link } from '@inertiajs/inertia-vue3';
+    const props = defineProps(['user']);
 </script>
 
 <template>
@@ -14,7 +15,7 @@ import { Link } from '@inertiajs/inertia-vue3';
                         <div class="flex">
                             <!-- Logo -->
                             <div class="shrink-0 flex items-center">
-                                <Link :href="route('dashboard.profile')">
+                                <Link href="/dashboard/courses">
                                 <ApplicationLogo class="block h-9 w-auto" />
                                 </Link>
                             </div>
@@ -27,8 +28,12 @@ import { Link } from '@inertiajs/inertia-vue3';
                                                     border border-transparent text-sm leading-4 font-medium rounded-md
                                                     text-white bg-orange hover:text-backgroundFrom
                                                     focus:outline-none transition ease-in-out duration-150">
-                                        <Link :href="route('logout')">
-                                        Logout
+
+                                        <Link v-if="user" :href="route('logout')">
+                                            Logout
+                                        </Link>
+                                        <Link v-else :href="route('login')">
+                                            Login
                                         </Link>
                                     </button>
                                 </span>
diff --git a/resources/js/Pages/Achievements.vue b/resources/js/Pages/Achievements.vue
index fe12c7c..d95fc30 100644
--- a/resources/js/Pages/Achievements.vue
+++ b/resources/js/Pages/Achievements.vue
@@ -4,9 +4,5 @@
 </script>
 
 <template>
-    <Header>
-        <AuthenticatedLayout>
-            <p class="text-white"> This is the achievements </p>
-        </AuthenticatedLayout>
-    </Header>
+    <p class="text-white"> This is achievements </p>
 </template>
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
new file mode 100644
index 0000000..ed73c22
--- /dev/null
+++ b/resources/js/Pages/Dashboard.vue
@@ -0,0 +1,49 @@
+<script setup>
+    import Header from '@/Layouts/Header.vue';
+    import NavLink from '@/Components/NavLink.vue';
+    import Profile from './Profile.vue';
+    import { ref } from "vue";
+    import MyCourses from './MyCourses.vue';
+    import Achievements from './Achievements.vue';
+    import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
+    const props = defineProps(['courses', 'lessons', 'user']);
+
+    var page = ref('profile');
+
+    const changePlaceholder = (str) => {
+        page.value = str;
+    };
+</script>
+
+<template>
+    <Header :user="user">
+        <AuthenticatedLayout/>
+        <div class="pl-12 pt-6">
+            <ul class="flex flex-wrap
+                    text-sm font-medium text-center
+                    text-gray-500 border-b border-gray-200 dark:text-gray-400">
+                <li class="mr-2" @click="changePlaceholder('profile')">
+                    <NavLink :href="route('dashboard.profile')" :active="page=='profile'">
+                        Profile
+                    </NavLink>
+                </li>
+                <li class="mr-2" @click="changePlaceholder('courses')">
+                    <NavLink :href="route('dashboard.courses')" :active="page=='courses'">
+                        My Courses
+                    </NavLink>
+                </li>
+                <li class="mr-2" @click="changePlaceholder('achievements')">
+                    <NavLink :href="route('dashboard.achievements')" :active="page=='achievements'">
+                        Achievements
+                    </NavLink>
+                </li>
+            </ul>
+            <div class="mt-3">
+                <Profile v-if="page=='profile'"></Profile>
+                <MyCourses v-if="page=='courses'" :courses="courses" :lessons="lessons"></MyCourses>
+                <Achievements v-if="page=='achievements'"></Achievements>
+            </div>
+        </div>
+
+    </Header>
+</template>
diff --git a/resources/js/Pages/MyCourseLessons.vue b/resources/js/Pages/MyCourseLessons.vue
index 21bf552..7947604 100644
--- a/resources/js/Pages/MyCourseLessons.vue
+++ b/resources/js/Pages/MyCourseLessons.vue
@@ -8,13 +8,6 @@
 
 <template>
     <Header>
-        <AuthenticatedLayout>
-            <p class="text-orange">
-                <Link href="/dashboard/mycourses">
-                    Back
-                </Link>
-            </p>
-            <LessonGrid :name="name" :lessons="lessons" />
-        </AuthenticatedLayout>
+        <LessonGrid :name="name" :lessons="lessons" />
     </Header>
 </template>
diff --git a/resources/js/Pages/MyCourses.vue b/resources/js/Pages/MyCourses.vue
index 32b07b3..608fe9e 100644
--- a/resources/js/Pages/MyCourses.vue
+++ b/resources/js/Pages/MyCourses.vue
@@ -1,21 +1,30 @@
 <script setup>
-    import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
-    import Header from '@/Layouts/Header.vue';
     import CourseCard from '@/Components/CourseCard.vue';
-    import { Link } from '@inertiajs/inertia-vue3';
-    const props = defineProps(['courses']);
+    import LessonGrid from '../Components/LessonGrid.vue';
+    import { ref } from "vue"
+
+    const props = defineProps(['courses', 'lessons']);
+    var show = ref(false), index = ref(0);
+    const hide = () => {
+        show.value = !show.value;
+    }
+    const showLessons = (i) => {
+        hide();
+        index.value = i;
+    };
 </script>
 
 <template>
-    <Header>
-        <AuthenticatedLayout>
-            <div class="display flex flex-wrap justify-center md:justify-start">
-                <div v-for="course in courses">
-                    <Link :href="'/dashboard/mycourses/' + course.id">
-                        <CourseCard :name="course.name" :lessonCount="courses.lesson_count" :id="course.id" />
-                    </Link>
-                </div>
+    <div class="display flex flex-wrap justify-center md:justify-start">
+        <div v-if="show==false" v-for="(course, index) in courses">
+            <div @click="showLessons(index)">
+                <CourseCard :name="course.name" :lessonCount="courses.lesson_count" :id="course.id" />
             </div>
-        </AuthenticatedLayout>
-    </Header>
+        </div>
+        <div v-else class="w-full mr-12">
+            <div class="text-orange text-xl font-extrabold border-2 rounded-full border-orange
+                        px-1.5 w-8" @click="hide()"> &lt </div>
+            <LessonGrid :name="courses[index].name" :lessons="lessons[index]"></LessonGrid>
+        </div>
+    </div>
 </template>
diff --git a/resources/js/Pages/Profile.vue b/resources/js/Pages/Profile.vue
index bc47a03..89c6471 100644
--- a/resources/js/Pages/Profile.vue
+++ b/resources/js/Pages/Profile.vue
@@ -5,9 +5,5 @@
 </script>
 
 <template>
-    <Header>
-        <AuthenticatedLayout>
-            <p class="text-white"> This is the profile </p>
-        </AuthenticatedLayout>
-    </Header>
+    <p class="text-white"> This is the profile </p>
 </template>
diff --git a/routes/web.php b/routes/web.php
index 4596902..59ed48b 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -6,11 +6,13 @@
 use App\Http\Controllers\LogoutController;
 use App\Http\Controllers\ShowCoursesController;
 use App\Http\Controllers\ShowProfileController;
+use App\Http\Controllers\ShowDashboardController;
 use App\Http\Controllers\ShowMyCoursesController;
 use App\Http\Controllers\ShowAchievementsController;
 use App\Http\Controllers\ShowCourseLessonsController;
 use App\Http\Controllers\ShowMyCourseLessonsController;
 
+
 /*
 |--------------------------------------------------------------------------
 | Web Routes
@@ -33,9 +35,10 @@
 
 Route::prefix('/dashboard')->name('dashboard')->group(function () {
     Route::middleware(['auth'])->group(function () {
+        Route::get('/', ShowDashboardController::class)->name('.dashboard');
         Route::get('/profile', ShowProfileController::class)->name('.profile');
         Route::get('/mycourses', ShowMyCoursesController::class)->name('.courses');
-        Route::get('/mycourses/{id}', ShowMyCourseLessonsController::class)->name('.lessons');
+        Route::get('/mycourses/{course}', ShowMyCourseLessonsController::class)->name('.lessons');
         Route::get('/achievements', ShowAchievementsController::class)->name('.achievements');
     });
 });
@@ -54,6 +57,4 @@
     });
 });
 
-
-
 require __DIR__ . '/auth.php';
diff --git a/tailwind.config.js b/tailwind.config.js
index 6cdcfe4..30033ba 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -15,8 +15,8 @@ module.exports = {
                 sans: ["Nunito", ...defaultTheme.fontFamily.sans],
             },
             colors: {
-                backgroundFrom: "#030B10",
-                backgroundTo: "#071A25",
+                backgroundFrom: "#020B10",
+                backgroundTo: "#032030",
                 orange: "#F8590A",
                 card: "#0F1A25",
                 cardText: "#7398BD",

From a95c5032ddbe440b743ee5d5e87bf7e0ed011079 Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Tue, 1 Nov 2022 16:18:59 +1000
Subject: [PATCH 22/36] Add user authentication checks plus some design clean
 up

---
 app/Http/Controllers/ShowCourseLessonsController.php | 12 +++++++-----
 resources/js/Components/CourseCard.vue               |  2 +-
 resources/js/Components/LessonGrid.vue               |  4 ++--
 resources/js/Pages/Courses.vue                       |  6 +-----
 resources/js/Pages/Dashboard.vue                     |  3 +--
 resources/js/Pages/Lessons.vue                       |  4 +++-
 resources/js/Pages/MyCourses.vue                     |  4 ++--
 routes/web.php                                       |  2 +-
 8 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/app/Http/Controllers/ShowCourseLessonsController.php b/app/Http/Controllers/ShowCourseLessonsController.php
index e1dbdad..0d5f1dd 100644
--- a/app/Http/Controllers/ShowCourseLessonsController.php
+++ b/app/Http/Controllers/ShowCourseLessonsController.php
@@ -2,17 +2,19 @@
 
 namespace App\Http\Controllers;
 
+use App\Models\Course;
 use App\Models\Lesson;
-
+use Illuminate\Support\Facades\Auth;
 class ShowCourseLessonsController extends Controller
 {
-    public function __invoke($course_id)
+    public function __invoke(Course $course)
     {
-        $lessons = Lesson::where('course_id', $course_id)->get();
+        $lessons = Lesson::where('course_id', $course->id)->get();
         return Inertia('Lessons', [
             // TODO: name as slug (not id)
-            'name' => $course_id,
-            'lessons' => $lessons
+            'name' => $course->name,
+            'lessons' => $lessons,
+            'user' => Auth::check()
         ]);
     }
 }
diff --git a/resources/js/Components/CourseCard.vue b/resources/js/Components/CourseCard.vue
index 51e8ea5..0c04d2c 100644
--- a/resources/js/Components/CourseCard.vue
+++ b/resources/js/Components/CourseCard.vue
@@ -13,7 +13,7 @@
                 </div>
             </div>
             <div class="pt-8">
-                <h1 class="text-white text-lg"> {{ name }} </h1>
+                <h1 class="text-white text-lg">{{ name }} </h1>
                 <h1 class="text-gray-300 pt-2 text-md"> {{ lessonCount }} Lessons </h1>
                 <h1 class="text-gray-300 pt-3 text-xs"> Beginner | {{ userCount }} students | Certificate included </h1>
                 <div class="mt-3 w-4/5 bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
diff --git a/resources/js/Components/LessonGrid.vue b/resources/js/Components/LessonGrid.vue
index b99a859..9ebaa78 100644
--- a/resources/js/Components/LessonGrid.vue
+++ b/resources/js/Components/LessonGrid.vue
@@ -1,7 +1,7 @@
 <script setup>
     import {ref} from "vue";
     import LessonCard from "./LessonCard.vue";
-    const props = defineProps(['name','lessons']);
+    const props = defineProps(['name','lessons','user']);
     var placeholderName = ref('Default name');
     var placeholderDesc = ref('Default desc');
     const changePlaceholder = (i) => {
@@ -44,7 +44,7 @@
                                 <p class="text-gray-300 text-sm"> Beginner </p>
                             </div>
                         </div>
-                        <div class="p-4 w-32">
+                        <div v-if="user==true" class="p-4 w-32">
                             <div class="grid grid-rows-2 text-left">
                                 <p class="text-cardText text-md"> Progress </p>
                                 <div class="mt-3 w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
diff --git a/resources/js/Pages/Courses.vue b/resources/js/Pages/Courses.vue
index 98725bd..02ab029 100644
--- a/resources/js/Pages/Courses.vue
+++ b/resources/js/Pages/Courses.vue
@@ -4,10 +4,6 @@
     import { Link } from '@inertiajs/inertia-vue3';
     import {ref} from 'vue';
     let props = defineProps(['courses']);
-    var challenge = ref(false);
-    const change = () => {
-        challenge.value = !challenge.value;
-    }
 </script>
 
 <template>
@@ -15,7 +11,7 @@
         <h1 class="text-white text-4xl font-bold mx-12 py-6"> All courses</h1>
         <div class="display flex justify-center md:justify-start flex-wrap mx-12">
             <div v-for="course in courses">
-                <Link :href="'/course/' + course.id + '/lessons'" >
+                <Link :href="'/courses/all/' + course.id + '/lessons'" >
                     <CourseCard :name="course.name" :lessonCount="course.lessons_count"
                                 :userCount="course.user_count" :id="course.id"/>
                 </Link>
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index ed73c22..7c4a9e5 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -40,10 +40,9 @@
             </ul>
             <div class="mt-3">
                 <Profile v-if="page=='profile'"></Profile>
-                <MyCourses v-if="page=='courses'" :courses="courses" :lessons="lessons"></MyCourses>
+                <MyCourses v-if="page=='courses'" :courses="courses" :lessons="lessons" :user="user"></MyCourses>
                 <Achievements v-if="page=='achievements'"></Achievements>
             </div>
         </div>
-
     </Header>
 </template>
diff --git a/resources/js/Pages/Lessons.vue b/resources/js/Pages/Lessons.vue
index 6498337..6cbcba2 100644
--- a/resources/js/Pages/Lessons.vue
+++ b/resources/js/Pages/Lessons.vue
@@ -6,6 +6,8 @@
 
 <template>
     <Header>
-        <LessonGrid :name="name" :lessons="lessons"/>
+        <div class="ml-12 mr-12">
+            <LessonGrid :name="name" :lessons="lessons"/>
+        </div>
     </Header>
 </template>
diff --git a/resources/js/Pages/MyCourses.vue b/resources/js/Pages/MyCourses.vue
index 608fe9e..2a541c5 100644
--- a/resources/js/Pages/MyCourses.vue
+++ b/resources/js/Pages/MyCourses.vue
@@ -3,7 +3,7 @@
     import LessonGrid from '../Components/LessonGrid.vue';
     import { ref } from "vue"
 
-    const props = defineProps(['courses', 'lessons']);
+    const props = defineProps(['courses', 'lessons', 'user']);
     var show = ref(false), index = ref(0);
     const hide = () => {
         show.value = !show.value;
@@ -24,7 +24,7 @@
         <div v-else class="w-full mr-12">
             <div class="text-orange text-xl font-extrabold border-2 rounded-full border-orange
                         px-1.5 w-8" @click="hide()"> &lt </div>
-            <LessonGrid :name="courses[index].name" :lessons="lessons[index]"></LessonGrid>
+            <LessonGrid :name="courses[index].name" :lessons="lessons[index]" :user="user"></LessonGrid>
         </div>
     </div>
 </template>
diff --git a/routes/web.php b/routes/web.php
index 59ed48b..38758cd 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -48,7 +48,7 @@
 Route::prefix('/courses')->name('courses.')->group(function () {
     Route::middleware(['auth'])->group(function () {
         Route::get('/all', ShowCoursesController::class)->name('course.show');
-        Route::get('/all/{id}/lessons', ShowCourseLessonsController::class)->name('course.lessons');
+        Route::get('/all/{course}/lessons', ShowCourseLessonsController::class)->name('course.lessons');
     });
     Route::middleware('auth')->prefix('/{course}/lessons')->name('.lessons')->group(function () {
         Route::get('{lesson}', \App\Http\Controllers\Lessons\ShowLessonController::class)->name('.show');

From 5592b2e7e372a724d3cd99589d58fad809851ded Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Tue, 1 Nov 2022 16:43:20 +1000
Subject: [PATCH 23/36] Homepage placeholder

---
 resources/js/Pages/Welcome.vue | 113 +--------------------------------
 routes/web.php                 |   9 +--
 2 files changed, 4 insertions(+), 118 deletions(-)

diff --git a/resources/js/Pages/Welcome.vue b/resources/js/Pages/Welcome.vue
index 161e287..c6ee43b 100644
--- a/resources/js/Pages/Welcome.vue
+++ b/resources/js/Pages/Welcome.vue
@@ -1,118 +1,9 @@
 <script setup>
-import { Head, Link } from '@inertiajs/inertia-vue3';
 
-defineProps({
-    canLogin: Boolean,
-    canRegister: Boolean,
-    laravelVersion: String,
-    phpVersion: String,
-})
 </script>
 
 <template>
-    <Head title="Welcome" />
-
-    <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
-        <div v-if="canLogin" class="hidden fixed top-0 right-0 px-6 py-4 sm:block">
-            <Link v-if="$page.props.auth.user" :href="route('dashboard')" class="text-sm text-gray-700 dark:text-gray-500 underline">Dashboard</Link>
-
-            <template v-else>
-                <Link :href="route('login')" class="text-sm text-gray-700 dark:text-gray-500 underline">Log in</Link>
-
-                <Link v-if="canRegister" :href="route('register')" class="ml-4 text-sm text-gray-700 dark:text-gray-500 underline">Register</Link>
-            </template>
-        </div>
-
-        <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
-            <div class="flex justify-center pt-8 sm:justify-start sm:pt-0">
-                <svg viewBox="0 0 651 192" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-16 w-auto text-gray-700 sm:h-20">
-                    <g clip-path="url(#clip0)" fill="#EF3B2D">
-                        <path d="M248.032 44.676h-16.466v100.23h47.394v-14.748h-30.928V44.676zM337.091 87.202c-2.101-3.341-5.083-5.965-8.949-7.875-3.865-1.909-7.756-2.864-11.669-2.864-5.062 0-9.69.931-13.89 2.792-4.201 1.861-7.804 4.417-10.811 7.661-3.007 3.246-5.347 6.993-7.016 11.239-1.672 4.249-2.506 8.713-2.506 13.389 0 4.774.834 9.26 2.506 13.459 1.669 4.202 4.009 7.925 7.016 11.169 3.007 3.246 6.609 5.799 10.811 7.66 4.199 1.861 8.828 2.792 13.89 2.792 3.913 0 7.804-.955 11.669-2.863 3.866-1.908 6.849-4.533 8.949-7.875v9.021h15.607V78.182h-15.607v9.02zm-1.431 32.503c-.955 2.578-2.291 4.821-4.009 6.73-1.719 1.91-3.795 3.437-6.229 4.582-2.435 1.146-5.133 1.718-8.091 1.718-2.96 0-5.633-.572-8.019-1.718-2.387-1.146-4.438-2.672-6.156-4.582-1.719-1.909-3.032-4.152-3.938-6.73-.909-2.577-1.36-5.298-1.36-8.161 0-2.864.451-5.585 1.36-8.162.905-2.577 2.219-4.819 3.938-6.729 1.718-1.908 3.77-3.437 6.156-4.582 2.386-1.146 5.059-1.718 8.019-1.718 2.958 0 5.656.572 8.091 1.718 2.434 1.146 4.51 2.674 6.229 4.582 1.718 1.91 3.054 4.152 4.009 6.729.953 2.577 1.432 5.298 1.432 8.162-.001 2.863-.479 5.584-1.432 8.161zM463.954 87.202c-2.101-3.341-5.083-5.965-8.949-7.875-3.865-1.909-7.756-2.864-11.669-2.864-5.062 0-9.69.931-13.89 2.792-4.201 1.861-7.804 4.417-10.811 7.661-3.007 3.246-5.347 6.993-7.016 11.239-1.672 4.249-2.506 8.713-2.506 13.389 0 4.774.834 9.26 2.506 13.459 1.669 4.202 4.009 7.925 7.016 11.169 3.007 3.246 6.609 5.799 10.811 7.66 4.199 1.861 8.828 2.792 13.89 2.792 3.913 0 7.804-.955 11.669-2.863 3.866-1.908 6.849-4.533 8.949-7.875v9.021h15.607V78.182h-15.607v9.02zm-1.432 32.503c-.955 2.578-2.291 4.821-4.009 6.73-1.719 1.91-3.795 3.437-6.229 4.582-2.435 1.146-5.133 1.718-8.091 1.718-2.96 0-5.633-.572-8.019-1.718-2.387-1.146-4.438-2.672-6.156-4.582-1.719-1.909-3.032-4.152-3.938-6.73-.909-2.577-1.36-5.298-1.36-8.161 0-2.864.451-5.585 1.36-8.162.905-2.577 2.219-4.819 3.938-6.729 1.718-1.908 3.77-3.437 6.156-4.582 2.386-1.146 5.059-1.718 8.019-1.718 2.958 0 5.656.572 8.091 1.718 2.434 1.146 4.51 2.674 6.229 4.582 1.718 1.91 3.054 4.152 4.009 6.729.953 2.577 1.432 5.298 1.432 8.162 0 2.863-.479 5.584-1.432 8.161zM650.772 44.676h-15.606v100.23h15.606V44.676zM365.013 144.906h15.607V93.538h26.776V78.182h-42.383v66.724zM542.133 78.182l-19.616 51.096-19.616-51.096h-15.808l25.617 66.724h19.614l25.617-66.724h-15.808zM591.98 76.466c-19.112 0-34.239 15.706-34.239 35.079 0 21.416 14.641 35.079 36.239 35.079 12.088 0 19.806-4.622 29.234-14.688l-10.544-8.158c-.006.008-7.958 10.449-19.832 10.449-13.802 0-19.612-11.127-19.612-16.884h51.777c2.72-22.043-11.772-40.877-33.023-40.877zm-18.713 29.28c.12-1.284 1.917-16.884 18.589-16.884 16.671 0 18.697 15.598 18.813 16.884h-37.402zM184.068 43.892c-.024-.088-.073-.165-.104-.25-.058-.157-.108-.316-.191-.46-.056-.097-.137-.176-.203-.265-.087-.117-.161-.242-.265-.345-.085-.086-.194-.148-.29-.223-.109-.085-.206-.182-.327-.252l-.002-.001-.002-.002-35.648-20.524a2.971 2.971 0 00-2.964 0l-35.647 20.522-.002.002-.002.001c-.121.07-.219.167-.327.252-.096.075-.205.138-.29.223-.103.103-.178.228-.265.345-.066.089-.147.169-.203.265-.083.144-.133.304-.191.46-.031.085-.08.162-.104.25-.067.249-.103.51-.103.776v38.979l-29.706 17.103V24.493a3 3 0 00-.103-.776c-.024-.088-.073-.165-.104-.25-.058-.157-.108-.316-.191-.46-.056-.097-.137-.176-.203-.265-.087-.117-.161-.242-.265-.345-.085-.086-.194-.148-.29-.223-.109-.085-.206-.182-.327-.252l-.002-.001-.002-.002L40.098 1.396a2.971 2.971 0 00-2.964 0L1.487 21.919l-.002.002-.002.001c-.121.07-.219.167-.327.252-.096.075-.205.138-.29.223-.103.103-.178.228-.265.345-.066.089-.147.169-.203.265-.083.144-.133.304-.191.46-.031.085-.08.162-.104.25-.067.249-.103.51-.103.776v122.09c0 1.063.568 2.044 1.489 2.575l71.293 41.045c.156.089.324.143.49.202.078.028.15.074.23.095a2.98 2.98 0 001.524 0c.069-.018.132-.059.2-.083.176-.061.354-.119.519-.214l71.293-41.045a2.971 2.971 0 001.489-2.575v-38.979l34.158-19.666a2.971 2.971 0 001.489-2.575V44.666a3.075 3.075 0 00-.106-.774zM74.255 143.167l-29.648-16.779 31.136-17.926.001-.001 34.164-19.669 29.674 17.084-21.772 12.428-43.555 24.863zm68.329-76.259v33.841l-12.475-7.182-17.231-9.92V49.806l12.475 7.182 17.231 9.92zm2.97-39.335l29.693 17.095-29.693 17.095-29.693-17.095 29.693-17.095zM54.06 114.089l-12.475 7.182V46.733l17.231-9.92 12.475-7.182v74.537l-17.231 9.921zM38.614 7.398l29.693 17.095-29.693 17.095L8.921 24.493 38.614 7.398zM5.938 29.632l12.475 7.182 17.231 9.92v79.676l.001.005-.001.006c0 .114.032.221.045.333.017.146.021.294.059.434l.002.007c.032.117.094.222.14.334.051.124.088.255.156.371a.036.036 0 00.004.009c.061.105.149.191.222.288.081.105.149.22.244.314l.008.01c.084.083.19.142.284.215.106.083.202.178.32.247l.013.005.011.008 34.139 19.321v34.175L5.939 144.867V29.632h-.001zm136.646 115.235l-65.352 37.625V148.31l48.399-27.628 16.953-9.677v33.862zm35.646-61.22l-29.706 17.102V66.908l17.231-9.92 12.475-7.182v33.841z"/>
-                    </g>
-                </svg>
-            </div>
-
-            <div class="mt-8 bg-white dark:bg-gray-800 overflow-hidden shadow sm:rounded-lg">
-                <div class="grid grid-cols-1 md:grid-cols-2">
-                    <div class="p-6">
-                        <div class="flex items-center">
-                            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500"><path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
-                            <div class="ml-4 text-lg leading-7 font-semibold"><a href="https://laravel.com/docs" class="underline text-gray-900 dark:text-white">Documentation</a></div>
-                        </div>
-
-                        <div class="ml-12">
-                            <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
-                                Laravel has wonderful, thorough documentation covering every aspect of the framework. Whether you are new to the framework or have previous experience with Laravel, we recommend reading all of the documentation from beginning to end.
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="p-6 border-t border-gray-200 dark:border-gray-700 md:border-t-0 md:border-l">
-                        <div class="flex items-center">
-                            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500"><path d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path><path d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
-                            <div class="ml-4 text-lg leading-7 font-semibold"><a href="https://laracasts.com" class="underline text-gray-900 dark:text-white">Laracasts</a></div>
-                        </div>
-
-                        <div class="ml-12">
-                            <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
-                                Laracasts offers thousands of video tutorials on Laravel, PHP, and JavaScript development. Check them out, see for yourself, and massively level up your development skills in the process.
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="p-6 border-t border-gray-200 dark:border-gray-700">
-                        <div class="flex items-center">
-                            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500"><path d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
-                            <div class="ml-4 text-lg leading-7 font-semibold"><a href="https://laravel-news.com/" class="underline text-gray-900 dark:text-white">Laravel News</a></div>
-                        </div>
-
-                        <div class="ml-12">
-                            <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
-                                Laravel News is a community driven portal and newsletter aggregating all of the latest and most important news in the Laravel ecosystem, including new package releases and tutorials.
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="p-6 border-t border-gray-200 dark:border-gray-700 md:border-l">
-                        <div class="flex items-center">
-                            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500"><path d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
-                            <div class="ml-4 text-lg leading-7 font-semibold text-gray-900 dark:text-white">Vibrant Ecosystem</div>
-                        </div>
-
-                        <div class="ml-12">
-                            <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
-                                Laravel's robust library of first-party tools and libraries, such as <a href="https://forge.laravel.com" class="underline">Forge</a>, <a href="https://vapor.laravel.com" class="underline">Vapor</a>, <a href="https://nova.laravel.com" class="underline">Nova</a>, and <a href="https://envoyer.io" class="underline">Envoyer</a> help you take your projects to the next level. Pair them with powerful open source libraries like <a href="https://laravel.com/docs/billing" class="underline">Cashier</a>, <a href="https://laravel.com/docs/dusk" class="underline">Dusk</a>, <a href="https://laravel.com/docs/broadcasting" class="underline">Echo</a>, <a href="https://laravel.com/docs/horizon" class="underline">Horizon</a>, <a href="https://laravel.com/docs/sanctum" class="underline">Sanctum</a>, <a href="https://laravel.com/docs/telescope" class="underline">Telescope</a>, and more.
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="flex justify-center mt-4 sm:items-center sm:justify-between">
-                <div class="text-center text-sm text-gray-500 sm:text-left">
-                    <div class="flex items-center">
-                        <svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor" class="-mt-px w-5 h-5 text-gray-400">
-                            <path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
-                        </svg>
-
-                        <a href="https://laravel.bigcartel.com" class="ml-1 underline">
-                            Shop
-                        </a>
-
-                        <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="ml-4 -mt-px w-5 h-5 text-gray-400">
-                            <path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
-                        </svg>
-
-                        <a href="https://github.com/sponsors/taylorotwell" class="ml-1 underline">
-                            Sponsor
-                        </a>
-                    </div>
-                </div>
-
-                <div class="ml-4 text-center text-sm text-gray-500 sm:text-right sm:ml-0">
-                    Laravel v{{ laravelVersion }} (PHP v{{ phpVersion }})
-                </div>
-            </div>
-        </div>
+    <div>
+        Homepage
     </div>
 </template>
diff --git a/routes/web.php b/routes/web.php
index 38758cd..172d271 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -25,17 +25,12 @@
 */
 
 Route::get('/', function () {
-    return Inertia::render('Welcome', [
-        'canLogin' => Route::has('login'),
-        'canRegister' => Route::has('register'),
-        'laravelVersion' => Application::VERSION,
-        'phpVersion' => PHP_VERSION,
-    ]);
+    return Inertia::render('Welcome');
 });
 
 Route::prefix('/dashboard')->name('dashboard')->group(function () {
     Route::middleware(['auth'])->group(function () {
-        Route::get('/', ShowDashboardController::class)->name('.dashboard');
+        Route::get('/s', ShowDashboardController::class)->name('.dashboard');
         Route::get('/profile', ShowProfileController::class)->name('.profile');
         Route::get('/mycourses', ShowMyCoursesController::class)->name('.courses');
         Route::get('/mycourses/{course}', ShowMyCourseLessonsController::class)->name('.lessons');

From 09cc805d88529c22e2b1eaa7b43dd0ef24f2b2c8 Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Tue, 1 Nov 2022 16:47:48 +1000
Subject: [PATCH 24/36] Lil typo left in

---
 routes/web.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/routes/web.php b/routes/web.php
index 172d271..bcb554a 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -30,7 +30,7 @@
 
 Route::prefix('/dashboard')->name('dashboard')->group(function () {
     Route::middleware(['auth'])->group(function () {
-        Route::get('/s', ShowDashboardController::class)->name('.dashboard');
+        Route::get('/', ShowDashboardController::class)->name('.dashboard');
         Route::get('/profile', ShowProfileController::class)->name('.profile');
         Route::get('/mycourses', ShowMyCoursesController::class)->name('.courses');
         Route::get('/mycourses/{course}', ShowMyCourseLessonsController::class)->name('.lessons');

From 46b4fd5bb4880f5576a3e26176546bc4c534fc80 Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Wed, 2 Nov 2022 10:15:59 +1000
Subject: [PATCH 25/36] Responsive

---
 public/images/placeholder.png                | Bin 0 -> 6146 bytes
 resources/js/Components/LessonGrid.vue       |  26 +++++++++++--------
 resources/js/Components/ProfileCard.vue      |   7 ++---
 resources/js/Layouts/AuthenticatedLayout.vue |   2 +-
 resources/js/Layouts/Header.vue              |   1 +
 resources/js/Pages/Dashboard.vue             |   2 +-
 6 files changed, 22 insertions(+), 16 deletions(-)
 create mode 100644 public/images/placeholder.png

diff --git a/public/images/placeholder.png b/public/images/placeholder.png
new file mode 100644
index 0000000000000000000000000000000000000000..bf1d31046f6bb3ca7699ba3bc40b953380d1b754
GIT binary patch
literal 6146
zcmd5=cTiJbw}p^kNa!UrDWM3MNC#;G2^|Cl6ap%QDhLWvl_m*QBS;ZYnj(rI0Rjku
zNC}8EmEN0F=|Otu#ou3VzBg~?&G*my?##XCoW0jtXYGCO+_`ffUo|seg786TXlR&>
z40SDNXn-Ud8aiPx9W?^f^pK?v%2zL6)BCfz-PqC7{Ih>;eRGAfvA9YZ7@O+o86KXT
z`O!DhGdwXpzw~=)ZE|*@wQF!}YQA$|Y<6+wW_F|v4GnjUkuK`mgOQa!S|%DA#-`Vk
z^^1#c0FkOQv8=EJI8s;#qa95OXLO+DZ3M_if}Fw7*8l$mmTH%QT7LNJ(~?oP1@Og4
zkS7>A#0n$9kysr}1JyB;11*0eK>0r+@zqQqf$Ek9d~o_%02iO|pXBX-c1-VIn(OeN
z*U<lNy7_0;xj_hkmQx?7+u(kh5t<TcS#T5^=)JZRLQnyjB535muzx+*Gge1ArxP|6
zQ>JSJf9}iA74thXIyoUSW3aR=l}2*hx9xnyS>Q@s@dhNC(P#&sc}vZf(h_emd{nRp
z`u7ir|04RvlrRwb$)!c5-<89~@Ox#vHp%<S-7VJ}(r2V&gGDh_LK$ke1E$o>Y->a?
zRWHxM$`M+!y(3KI#;mRG47$FT5d)fF*uAD`$9PK-j-pjI<XD7hvTFK!n;TSeL|)+!
zsSsz;FcTp3;GLt{EZrvY2P;zYcCNzhj2C3DNGz&CIm0AhJwTvRoAes9F|QUf`=Wx6
zjJHi|?|<}=NP>{@7E?ae(=RFn$#~<bBcsF2c)gf8FpTrFcX8eGYYx14kbh5w?{@Qj
zg`3e>)XPd9h9z8Q08AKj^<91I1XmL=l)9ng8PWEy%8M~z*j8*sV)XvuZ7}Skn@shC
z?IZ~sAz@4xIY9q>(zYfZ#D)JdD%@rpjz!`0zn!ORvyH=|G~B%+9wEN))ZwtG&pQW%
zRm#huj-ba_l(Ileq1VgRU2ZT;m*aDXtj90@ruSf&Sg+rgp!|L00o7bJpG!;OnU;tt
z4Lqpyjro%^O*TL%dV4ys<VD@1cq}T<eCy7k$J4SCU6OE8ox6H2F_0AretV$SDzeA{
zgl>q<4WcT`T-lJZxu<HawcgBRylidzT%ipIC90kc*(!f$zi<DRKXE+*i+YY-YbiH4
zpw8H<Pf@OWbqx6JXSFrmMm*5~SzG!iPxdxXWIPnVI_Hjq6Sm@mf9ixRejZKTHmnSF
z**wm~mhzR@<ni8NhS}5u2^FnXp)QF^a12qmXB9ypvXLFRqA867A|@nE#Fx=kr%9L%
zUhl!7XYU)B4HI53<XPBmN*0m80Gkp&y`)lcIO2Q`^EGwBCmJfCAX5e;bTLO2+?wu<
z!s}tb@h)xHO$lSZD!r|O?(<P>C~fS>M!u)^yxu%)$ms*wFc(VbWfIuK>!^L=FcQml
zeQDHrrFM`3hN|T{E1k)XbnHR+Qn>JXhCy@XBz;n>VMz$giUCHey0+rwkcDM?X19;@
zWJNZ1BVI*a!0Ran`NxfiB}ZV{p4i=5e3*>KvOTuDwOZAtO#<td+*DOCAjN(?>Nl-q
z_%;C|$ZoZVG-;4Um}@s6LjbbK(~`#3Y{3vw6H@F{g*VG+i)OwkCh}LECWlQ2kiat*
z<0-NX!0Ul0GO7x9TgHR9kq7)+OKG`LCO`ts7p(`=!;K)k9?e9crku`aZPEhe>Ymeb
z=wod6c<Fj)QCK;UFrf(*&6^kn5{hq1D!43##$&sa={m3HP22zy;?D{bH_Ayyqy={`
z?8k4NjWF^Xe!4Z&FqkqJcFahxKYD~DvLS=yWYs#`8X@F29CR3yFJ|}6NDFiCNDU8~
zSb}%)<L4M7%^%1DTAF2c>W8y6uXxU2M1`~M$Go6-z4+V}$3!s?p!6gk*$MAw*rHz{
zt1>gCCPftm>hbSSY<qKliwwyg97~&Wfd}5~9CwZ61{~#65_MJS`6e9P?r4)zeJ@q)
z+*I%L-B9J=CzX||?9-ENzn_Q>BNi>Xk9|~?+rJoDqe{U8BFqtUy!&1-e!fhe)`Mr*
z3)8Z;bu;tH%@WzQLl-x>$+is-Wnbl<bXKeWyveF2hdy8-r&Ds3KAC`G7+m&rf7U#H
zWEO+{;k!W8wKzpt-&5qoE*x{?l`QM`+nj{#Sm}jtA@NF0_l6FxJ>}qzgiD^1#4zt%
zDIJ$LE-Kp*b(zt7FPX{b1Kd7^In8_pIq-b$^aEQJc+~9k^9xCX=@Ku%$mh2rHm^un
zJ=K5nc`*x{QZ3Il^R>MWqbm~%w!(=Is^0y5mXH!!>INfVQ&c4E0{2N}GJ<V$Ou&x2
zQ%y5(_XfWa=yqc{33?<5W98e@VF2?OopDe{4MVEEmn)-Su<VrJbGuS-YA;`m+_sRD
z9CbNntc9N&81_2rG&h~Wfva$A7Qxun9+PFFsxeX=FEM}7#T8tw0^%wpi*w3FlMsf~
z-nNtJJXsd?vE1YXEf{%Yc=Q7OggsVIC&ZY_){H2c8M;Pz+`S%|eS;O5Rv!Azt;r-r
z@jBj&D%R1aIm5ZkbxvQem6L#dxZ-&U{Ts|2905#mWJ5liSS!7K2-SE96R|+z=emc3
zEG*&K8p~Z(2r&$Ea7~MI6ZeqZ2fa5KV8@iBhniBwR9iVLipq>}_PCSLzCLRc*MJbf
zr%*hf@iYfTOLXF=xe3_0<yAIy{_I~gCKh{fVL-%WTb``CS`;19yqnsp4e{Ww@BuMq
zk~2sKMsBYxXJD+k;s`LYUh!IFC3>C-e$uHuIn9t$)<rFDI4GmB;7~LG>rOZ_b;GBu
zI`;Ai)V44q@8hUaWlTH38%Os_zuvMNgL+W2Zk_8V`wFR5)>t<@m8=%5P0CwQY3Sju
zzyJ|9$||mJ#E_FS`GA+M7R^q!9)PU`vuFE6=JnguPU1qKH|)ncUf$GbD`>g0vj$Z6
z=ZS74WwL>1PA(n>jcnTHv5y)hB2OooN9fX86P=T9DFdy<00??f)oezxAOK;DxMI$3
z=OEU?6_Lv=SSRX5=CuOq`(&1;VVLVgDLoy&M2|hWp6*|S>UT+0Dxbk`xulu+>W+Fa
z(eUZ~cSo@nxCgf-E2dj{BlFO%*6`_Um9uA#5RU8dw!FfEn|J#_5E6i3haS0hb^l5!
za8aO&Sc!EGGlZ0V^o(wJ(k#wdLUQg?(1|GoS|N+~gQ5hOiide4&yl8AXQh6Q>AY?p
zS5<gr3P8ZD`|IT)H_PS0rdaWXIY9%=E4TZ*l(UzGN$i=kxXxr#r&C@Ytg~TEgRyKo
z(<?29Ma+mbh+jtyX!XQSP<H<^Ay`}u%Ji1HMBUpD@y%Qj&c{W;1po*=(Lgs}mXB3~
zP1^5;aVfK6yI&^hF2>+V=MH3|!9+2GYJCnX@W(1^y;|J!24mlZ)3HmQw{x0n<#oDr
zvG4fiAeWdt@0a{kl@uW*3C!|KV1#z?AM%wG*fDMCRwv;_N*}wc((2Hwa`|vl57S25
zpt-A{Yj)w=p?E#4%TUM2!PWDw*&ZKRY{5k5$wDP}ckFz%mE~15c5bNc3<T|(z3dNB
z0~3*F*m6JwJjqe#Dhli39^|F4&MOHn3}EI16E#|X4yWe$aYp+0?vJr!UVf`QpbMlD
z^DKB-G1Zm*_B)qR7}dA{>fIQvUMV*beWV3Zj`}1@+PFKK{;EV0oYOU?jlCcn;PNa{
zy1~jhpA!rmU~jQYU3e0zWrzZ2&C>%s66b~YrJHx`%~{a})wl**w|p-_2_OV5sdSMQ
zV-i<8y8zX!n@&ILcK4nzDV2YuUGT54e<Cxk0`HonnC7@k2zv><y1y+>vXV2Cx_{kI
ziH8apG&RH)iNMS9dS=cm-b|(|dWZpdD7Bc%_<lAe7g^g=A$uPZ8f<%a`r0U;bxH$S
zPF@Q~&KIHq9xg2oOS9(cOw8FuXliWftRimvO!}&Ky7Xb4M@`-2mG=%eyssQyfS~j1
z&Wn)}!tv`u!GX`0B^iO{ANlyvhKvrU8CmA88-KC^D%jVe<K?kQ9aa39hXn}@XwB@W
z(^~~-0JK^%QsvkZj*Gg?iOxLzn-YY;&tB$Y$F%CeBO^d>fv~cx;3)@MDO}W9PBao)
zyGo#9DxWqs*FzYP&c8l!tjp!<U>$g)Sj}Ahz(`~+Yh&9}W?YmWC;Gw5Za9e)i3VR(
zPy@nJuY&(P?hc@0*`ioq@p{Vq6Pj9>&T44XfWS2aN<&#O7;SjudqN-p>MI%P?f=IN
z>%bhvS}Z-mfc*X$vhMpgV0In4zWJAwi3-oXt^kCcGY3!I?PtVA@p7W~Y?Y`RK%!XJ
z0={ryUih*7@@P@VMKMq_H4h|6vhTQlt^DPxbE2z`sz0oNk1IT){rH!8bihgI*wVUZ
z?rs?^@8nf<;kvZe2;<7alWs<*KKz6FiXXWbRnYLrre>zH+H1Ge=|kU|{YaTfWucaN
zb4++tXYy@6gKB|`%IK}|dMc*pgLMDM2QvYKB1>xBvwrs@i1{CCKwLgvs_p{u=-5Y@
zbwVjAmj1czkWbNtd!pvxKhvAX`NZcQkP)5BEKP99$RUF=3unD+cl*KsFa2pC@UV@&
zuxnP@TEJs{*H9S<Jp1g)o=N4f_~Iq`WpyRM$=`IPd5T|Vf^>A&HX!?KJgTG8JtF@4
zMUAfW)Gc?%R)tdTcIyeqh)vv1(Sv^l20C?>ZGXtvxc~itIh1vMdX3Md(w5s#B;F?K
zDp;<wpXVbo`PEFn$vAK28&*eLi3id~(7vVcROE*@KLqZhau65q3DP=!1feUB7LNmj
zZ7R}VxRJB#*G=vvR#2a;k#Xgu&^5NX_EzW~mt^Flp_<XzJ_jC1)9*+x@P(B}<$-Eh
z>Xwp5D_dvEwl!~r-xt|8L{-a<9?i;^8tgCDTjvVv78u?|R`;-O+W$zr9)o9X7O5zm
zRTFa1I{BC@i_}NO^5I4>J}Ek+o&JbK(Lz9?`EzLRx1{$VQ~UeQ$7~?@2R(PEw)%>r
zSM#kO8dA-_G`X(d*@$d#?|vBQW8*6c{u7XEolK|=eL(6<!DXoyIbZK8$sJ4*+VZwD
z$`CaeFyV}hotjUXy=~fDlIOXrA4PKD+H&8%hpcYxx=Dz@3@AX*U+?d#`8>{PmRL93
zJ*K|aB7L^bZ+trWiTF%mkp#1Kw0X4JA83@gxg7Te-2`RX41P;mz1N8_5-pre%LINQ
zHzQit_P@N5{%DGdP1q@x7+qTqTOW@8oPcL#6S!$Q{>nNjpf8GQ<o3m?)Fb;r6UhRo
z1Y_bZC@0W*(BjFa@km+X*1N*+UDcYTv9_aMZ=gcJ!_{-YLYKJDA+Bhp&Z~pqZ-%Sm
z<xOA65qtmeD~@a}p5J&|e&DNka1zy>p5Y;B6C4pq_o@vg=`X6b5ouX+I)8<ox%L)q
zu6v+$g1!1yklml8{w@i<gvN=v=YI|sda(?!MwO};7GXLrE&gzYPH?WHu7S~J=VA%;
zuze`!u63Hl6B?L|&36savT~@DmxjcqiPhvKW5xFmbPXO0)j3TpqD9tXUHo|WhYhl0
zDCd?TF=CW1x7KdGzES;IwY29_7S#OjS$1PPq^Cljp*l;^Ya<s?HRA`U7nk(XDHrvj
z#nQs*{KG*Mcj@b0FUr%TI)LzuV?#yZ${)Y<+DE;wj09g9c&n?kW+%227c!jJR$HD+
zdw;c7SJA0nTng$7J9cX(L!Z}7WfvpA+ivADsmri-PFzkz22dpme@lfnUFucwdlh`p
zot$y|aYwGuT4-97&Q6-!*H5euxYG<Cwl{wH)Zo_A?5lgA`s1#{(haPl6NOjgICHKt
zfgYAFTl4*jA}I-ZWj-fT|7rHQJ5gf6$0wzMGF6Z1P^{YHC>+gH;AzL&y(H6cECWc&
zCv8$)*JiC?QLf<)A&pOo2m8Zm?&&l3P~x5Mzw8}gh}(=LH|L|AMsj_lDZxqnkNKMv
zoj9H&#P^(?ds6bXXO}C<G#>QF^wwZ^SK_+no;A;QrhIGqz96&O$bc!`p9o}0P<K~e
z9S25%$9cF3W$+0?0eH|y5XWhlvX=O9DO#;%F%fyG{-)Swma<Gh@4$y*FmWqRfiHJ!
z+twO5a4Voc^_yf|ZJ#*K|J7h|ZXjKt?TvmAF6FrE15Um6(jW-ORV&)jkhR9_Z-x~Q
zG*lW}^tyE$XyqMqttpF!`_pTX)%wEtn=tm3B|<~HK<%ineza34JEk-@5a9y8zhfy$
zvM``9gCCa`odT`gmd9z~DCKSHH$nV_0Be%-pKBDL)%?P^j-l@GfI5z=+WT7uN91rH
z)q0h;ehyAiNGl3}SSNMG-QMtA7Q$^?j;5b~)|2dJ^N4|1)zp}Rrh7aQ1_4=(I803#
zJIiN%FvecOmKL{}H;4?BQRmJ+7oo3+-Vy_j_5j2Z>8f4g$~Ef5H3zTWoeEesf6pKQ
z8yPaFY_`MBX}C~~WO}lIR+np0c8Q%z@y~0zq%{=i?sUTgbLP0Z-c1OXgiCMJKLq(z
zL+?&7`xRVlMZ7klf@yCpF&(UGCkI6w{%l|oSQ6Z^r?n&%+E<j>bGli0VQTVejvOe=
zz8ujGvf%^n+&x_uRi`eyUg_A&jQSbI6af+AmCm1L(@gyjL0?>XW;9RV0ZbP?#^66`
z6eU`oedP_O|MAB)cSo3%e4Vl*4N!N7o$HOz9$a;V9SDyz`;AMdM`cGeq*ZcDNVwDg
zx)3jQV$&}GtaGp0S_=Z*bPq6VSrPUwZ0oC8=AsU0tMkRy4Tqs;IY)8ht$)(H-zt#O
z7dbomxk|#7w#Bpk>ilSy`R-`sr1JwSWs&dqk}b{eoKaTj=VUP+zQH<VrKRQL`c92-
zi}u2ccAk0_ZYlcL@MD)YrzeQTOzs%2uD1?qKYgWC(_CIYOSTsN`@i#lJ=WU<&w~HS
z?$;~hKm7X#>C73xUmfj}lDOCZzRdX*GVUKc38x;S`TxF-aj>`WUmfAr$)E(pKZ^gS
bOZa=5ECsvRPtgOVfAL0oX1c{_EdIX$Go=nF

literal 0
HcmV?d00001

diff --git a/resources/js/Components/LessonGrid.vue b/resources/js/Components/LessonGrid.vue
index 9ebaa78..677fa75 100644
--- a/resources/js/Components/LessonGrid.vue
+++ b/resources/js/Components/LessonGrid.vue
@@ -26,12 +26,16 @@
 <template>
     <div class="w-full">
         <h1 class="text-white text-4xl font-bold py-6"> {{ name }} </h1>
-        <div class="bg-card rounded-3xl display flex flex-wrap justify-center p-4">
-            <div class="bg-black rounded-3xl h-32 w-1/5"> </div>
-            <div class="w-4/5">
+        <div class="bg-card rounded-3xl display flex flex-wrap justify-center sm:justify-start p-4">
+            <!-- Course image (Not lesson image) -->
+            <div class="p-8">
+                <img class="w-44 h-32 object-cover my-auto" src="../../../public/images/placeholder.png"/>
+            </div>
+            <!-- Lesson count, level and progress section -->
+            <div class="my-auto">
                 <div class="w-full h-full">
                     <div class="float-left my-6
-                                grid grid-cols-3 mx-auto text-center divide-x">
+                                grid grid-cols-2 sm:grid-cols-3 mx-auto text-center sm:divide-x">
                         <div class="p-4">
                             <div class="grid grid-rows-2 text-left">
                                 <p class="text-cardText text-md"> Lessons </p>
@@ -53,24 +57,24 @@
                             </div>
                         </div>
                     </div>
-                    <div class="float-right">
+                    <!-- <div class="sm:float-right">
                         <button class=" bg-orange text-white
                                         px-4 py-2 rounded-xl my-10 mr-8
                                         hover:text-backgroundFrom focus:outline-none transition ease-in-out duration-150"> Play Demo
                         </button>
-                    </div>
+                    </div> -->
                 </div>
-
             </div>
         </div>
+        <!-- Displays all lessons and description -->
         <div class="display flex flex-wrap pt-8">
-            <div class="flex flex-wrap w-3/5 sm:justify-start justify-center">
+            <div class="flex flex-wrap sm:w-3/5 justify-center sm:justify-start">
                 <LessonCard v-for="(lesson, index) in lessons" @click="changePlaceholder(index)"/>
             </div>
-            <div class="w-2/5 pt-3">
+            <div class="sm:w-2/5 pt-3 w-full">
                 <transition name="fade" mode="out-in">
-                    <div :key="placeholderDesc">
-                        <h1 class="text-cardText text-lg"> {{ placeholderName }} </h1>
+                    <div :key="placeholderDesc" class="pl-6 sm:pl-2">
+                        <h1 class="text-cardText text-3xl"> {{ placeholderName }} </h1>
                         <p class="text-gray-300 text-md"> {{ placeholderDesc }} </p>
                     </div>
                 </transition>
diff --git a/resources/js/Components/ProfileCard.vue b/resources/js/Components/ProfileCard.vue
index a388928..c4372c2 100644
--- a/resources/js/Components/ProfileCard.vue
+++ b/resources/js/Components/ProfileCard.vue
@@ -3,11 +3,12 @@
 </script>
 
 <template>
-    <div class="display flex flex-wrap">
-        <div class="font-bold text-gray-700 rounded-full bg-white flex items-center justify-center font-mono
+    <div class="display flex flex-wrap pl-6 pt-6 sm:pl-12 sm:pt-12">
+        <div class="font-bold text-gray-700 rounded-full bg-white font-mono
+                    flex items-center justify-center
                     w-32 h-32">
         </div>
-        <div class="py-8 pl-8">
+        <div class="py-8 pl-4 sm:pl-8">
             <p class="text-white pb-2 text-4xl"> {{ name }} </p>
             <p class="text-sm text-white"> {{ email }} </p>
         </div>
diff --git a/resources/js/Layouts/AuthenticatedLayout.vue b/resources/js/Layouts/AuthenticatedLayout.vue
index 358c2b3..864f5bf 100644
--- a/resources/js/Layouts/AuthenticatedLayout.vue
+++ b/resources/js/Layouts/AuthenticatedLayout.vue
@@ -6,7 +6,7 @@
 </script>
 
 <template>
-    <div class="pl-12 pt-12">
+    <div class="">
         <ProfileCard name="Seth Sharp" email="sesharp@outlook.com"/>
     </div>
 </template>
diff --git a/resources/js/Layouts/Header.vue b/resources/js/Layouts/Header.vue
index e2cedd7..ed52719 100644
--- a/resources/js/Layouts/Header.vue
+++ b/resources/js/Layouts/Header.vue
@@ -42,6 +42,7 @@
                     </div>
                 </div>
             </nav>
+            
             <!-- Page Heading -->
             <header class="bg-white shadow" v-if="$slots.header">
                 <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index 7c4a9e5..fb192c3 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -18,7 +18,7 @@
 <template>
     <Header :user="user">
         <AuthenticatedLayout/>
-        <div class="pl-12 pt-6">
+        <div class="pl-6 pr-6 sm:pl-12 pt-6">
             <ul class="flex flex-wrap
                     text-sm font-medium text-center
                     text-gray-500 border-b border-gray-200 dark:text-gray-400">

From f58d9c1c60c14b56e65dc35808a07bd67af16086 Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Wed, 2 Nov 2022 10:26:59 +1000
Subject: [PATCH 26/36] Course name used in route

---
 app/Http/Controllers/ShowCourseLessonsController.php | 3 ++-
 resources/js/Pages/Courses.vue                       | 2 +-
 routes/web.php                                       | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/Http/Controllers/ShowCourseLessonsController.php b/app/Http/Controllers/ShowCourseLessonsController.php
index 0d5f1dd..250ab13 100644
--- a/app/Http/Controllers/ShowCourseLessonsController.php
+++ b/app/Http/Controllers/ShowCourseLessonsController.php
@@ -7,8 +7,9 @@
 use Illuminate\Support\Facades\Auth;
 class ShowCourseLessonsController extends Controller
 {
-    public function __invoke(Course $course)
+    public function __invoke($course_name)
     {
+        $course = Course::firstwhere('name', $course_name);
         $lessons = Lesson::where('course_id', $course->id)->get();
         return Inertia('Lessons', [
             // TODO: name as slug (not id)
diff --git a/resources/js/Pages/Courses.vue b/resources/js/Pages/Courses.vue
index 02ab029..b137f0c 100644
--- a/resources/js/Pages/Courses.vue
+++ b/resources/js/Pages/Courses.vue
@@ -11,7 +11,7 @@
         <h1 class="text-white text-4xl font-bold mx-12 py-6"> All courses</h1>
         <div class="display flex justify-center md:justify-start flex-wrap mx-12">
             <div v-for="course in courses">
-                <Link :href="'/courses/all/' + course.id + '/lessons'" >
+                <Link :href="'/courses/all/' + course.name + '/lessons'" >
                     <CourseCard :name="course.name" :lessonCount="course.lessons_count"
                                 :userCount="course.user_count" :id="course.id"/>
                 </Link>
diff --git a/routes/web.php b/routes/web.php
index bcb554a..5736fb5 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -43,7 +43,7 @@
 Route::prefix('/courses')->name('courses.')->group(function () {
     Route::middleware(['auth'])->group(function () {
         Route::get('/all', ShowCoursesController::class)->name('course.show');
-        Route::get('/all/{course}/lessons', ShowCourseLessonsController::class)->name('course.lessons');
+        Route::get('/all/{course_name}/lessons', ShowCourseLessonsController::class)->name('course.lessons');
     });
     Route::middleware('auth')->prefix('/{course}/lessons')->name('.lessons')->group(function () {
         Route::get('{lesson}', \App\Http\Controllers\Lessons\ShowLessonController::class)->name('.show');

From 8e0bcf7b70ac39a542e5b26f10106fe0531f5a5e Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Wed, 2 Nov 2022 16:27:43 +1000
Subject: [PATCH 27/36] Rough try catch for invalid course names

---
 .../ShowCourseLessonsController.php           | 24 ++++++++++++-------
 resources/js/Pages/ErrorPage.vue              | 12 ++++++++++
 2 files changed, 28 insertions(+), 8 deletions(-)
 create mode 100644 resources/js/Pages/ErrorPage.vue

diff --git a/app/Http/Controllers/ShowCourseLessonsController.php b/app/Http/Controllers/ShowCourseLessonsController.php
index 250ab13..f11ddcd 100644
--- a/app/Http/Controllers/ShowCourseLessonsController.php
+++ b/app/Http/Controllers/ShowCourseLessonsController.php
@@ -4,18 +4,26 @@
 
 use App\Models\Course;
 use App\Models\Lesson;
+use Exception;
 use Illuminate\Support\Facades\Auth;
+use Inertia\Inertia;
+
 class ShowCourseLessonsController extends Controller
 {
     public function __invoke($course_name)
     {
-        $course = Course::firstwhere('name', $course_name);
-        $lessons = Lesson::where('course_id', $course->id)->get();
-        return Inertia('Lessons', [
-            // TODO: name as slug (not id)
-            'name' => $course->name,
-            'lessons' => $lessons,
-            'user' => Auth::check()
-        ]);
+        try {
+            $course = Course::firstwhere('name', $course_name);
+            $lessons = Lesson::where('course_id', $course->id)->get();
+            return Inertia('Lessons', [
+                'name' => $course->name,
+                'lessons' => $lessons,
+                'user' => Auth::check()
+            ]);
+        } catch (Exception $e) {
+            return Inertia('ErrorPage', [
+                'error' => "Course could not be found or does not exist"
+            ]);
+        }
     }
 }
diff --git a/resources/js/Pages/ErrorPage.vue b/resources/js/Pages/ErrorPage.vue
new file mode 100644
index 0000000..387056f
--- /dev/null
+++ b/resources/js/Pages/ErrorPage.vue
@@ -0,0 +1,12 @@
+<script setup>
+    import Header from '@/Layouts/Header.vue';
+    const props = defineProps(['error']);
+</script>
+
+<template>
+    <Header>
+        <div class="text-white">
+            {{ error }}
+        </div>
+    </Header>
+</template>

From b78d3d2b499bffc32973384fd52b31a211e7d14b Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Tue, 8 Nov 2022 10:57:20 +1000
Subject: [PATCH 28/36] Achievement components, rough implementation of
 achievements

---
 resources/js/Components/AchievementIcon.vue   |  9 +++++++++
 resources/js/Components/LessonAchievement.vue | 18 ++++++++++++++++++
 resources/js/Pages/Achievements.vue           | 18 +++++++++++++++++-
 resources/js/Pages/Dashboard.vue              |  2 +-
 4 files changed, 45 insertions(+), 2 deletions(-)
 create mode 100644 resources/js/Components/AchievementIcon.vue
 create mode 100644 resources/js/Components/LessonAchievement.vue

diff --git a/resources/js/Components/AchievementIcon.vue b/resources/js/Components/AchievementIcon.vue
new file mode 100644
index 0000000..2a8b443
--- /dev/null
+++ b/resources/js/Components/AchievementIcon.vue
@@ -0,0 +1,9 @@
+<script>
+
+</script>
+
+<template>
+    <div class="m-5">
+        <div class="border-4 border-cyan-300 rounded-xl rotate-45 w-12 h-12"></div>
+    </div>
+</template>
diff --git a/resources/js/Components/LessonAchievement.vue b/resources/js/Components/LessonAchievement.vue
new file mode 100644
index 0000000..7b46ee5
--- /dev/null
+++ b/resources/js/Components/LessonAchievement.vue
@@ -0,0 +1,18 @@
+<script setup>
+    const props = defineProps(['name']);
+</script>
+
+<template>
+    <button class="bg-black text-white font-extrabold rounded-l-2xl text-center py-12 sm:py-8 mb-4 mr-4
+                ease-in-out w-full z-10">
+                <!-- hover:scale-x-125 hover:-translate-x-6 hover:delay-75 duration-150 -->
+        <!-- <div class=" align-middle">
+            {{ name }}
+        </div> -->
+        <div class="relative">
+            <div class="w-11 overflow-hidden float-right">
+                <div class="h-16 bg-teal-200 -rotate-45 transform origin-top-right"></div>
+            </div>
+        </div>
+    </button>
+</template>
diff --git a/resources/js/Pages/Achievements.vue b/resources/js/Pages/Achievements.vue
index d95fc30..53f737a 100644
--- a/resources/js/Pages/Achievements.vue
+++ b/resources/js/Pages/Achievements.vue
@@ -1,8 +1,24 @@
 <script setup>
     import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
     import Header from '@/Layouts/Header.vue';
+    import AchievementIcon from '@/Components/AchievementIcon.vue';
+    import LessonAchievement from '@/Components/LessonAchievement.vue';
+
+    //var achievements = ['1','2','3','4','5','6','7','8','9','10'];
+    let achievements = new Array(30).fill('hello');
 </script>
 
 <template>
-    <p class="text-white"> This is achievements </p>
+    <div class="display flex flex-wrap mt-8">
+        <div class="border-r-8 border-teal-200 w-full sm:w-1/5 pl-4 z-20">
+            <LessonAchievement name="Larascape"/>
+            <LessonAchievement name="Coming Soon..." />
+            <LessonAchievement name="Coming Soon..." />
+        </div>
+        <div class="w-full sm:w-4/5">
+            <div class="w-full h-full flex flex-wrap justify-center">
+                <AchievementIcon v-for="achievement in achievements"/>
+            </div>
+        </div>
+    </div>
 </template>
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index fb192c3..57ed513 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -41,7 +41,7 @@
             <div class="mt-3">
                 <Profile v-if="page=='profile'"></Profile>
                 <MyCourses v-if="page=='courses'" :courses="courses" :lessons="lessons" :user="user"></MyCourses>
-                <Achievements v-if="page=='achievements'"></Achievements>
+                <Achievements v-if="page=='achievements'"/>
             </div>
         </div>
     </Header>

From f49a08b08a10bb0db0885f5f72acf772f548068b Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Tue, 8 Nov 2022 12:54:58 +1000
Subject: [PATCH 29/36] Rough design

---
 resources/js/Pages/Achievements.vue | 63 ++++++++++++++++++++++++-----
 tailwind.config.js                  |  1 +
 2 files changed, 55 insertions(+), 9 deletions(-)

diff --git a/resources/js/Pages/Achievements.vue b/resources/js/Pages/Achievements.vue
index 53f737a..8486be8 100644
--- a/resources/js/Pages/Achievements.vue
+++ b/resources/js/Pages/Achievements.vue
@@ -9,16 +9,61 @@
 </script>
 
 <template>
-    <div class="display flex flex-wrap mt-8">
-        <div class="border-r-8 border-teal-200 w-full sm:w-1/5 pl-4 z-20">
-            <LessonAchievement name="Larascape"/>
-            <LessonAchievement name="Coming Soon..." />
-            <LessonAchievement name="Coming Soon..." />
-        </div>
-        <div class="w-full sm:w-4/5">
-            <div class="w-full h-full flex flex-wrap justify-center">
-                <AchievementIcon v-for="achievement in achievements"/>
+    <div>
+        <div class="display flex flex-wrap">
+            <div class="border-r-8 border-teal-200 w-full sm:w-1/5 pl-4 z-20">
+                <LessonAchievement name="Larascape"/>
+                <LessonAchievement name="Coming Soon..." />
+                <LessonAchievement name="Coming Soon..." />
+            </div>
+            <div class="w-full sm:w-4/5">
+                <div class="w-full h-full flex flex-wrap justify-center">
+                    <AchievementIcon v-for="achievement in achievements"/>
+                </div>
             </div>
         </div>
+        <div class="mt-8 ml-4 pb-10">
+            <p class="text-white text-4xl pb-5"> Activity </p>
+            <ol class="relative border-l-4 border-defaultCyan ml-4">
+                <li class="mb-10 ml-4">
+                    <div class="absolute w-4 h-4 rounded-full mt-1.5 -left-2.5 bg-defaultCyan"> </div>
+                    <div class="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500
+                                flex pl-4">
+                        <div class="bg-defaultCyan p-2 font-black text-card w-fit"> Larascape </div>
+                        <div class="p-2 w-fit text-white font-black"> NOV 7 </div>
+                    </div>
+
+                    <!-- Will be a small icon -->
+                    <div class="mt-3">
+                        <div class="absolute w-5 h-5 border-2 mt-1 border-defaultCyan bg-card rounded-full -left-3 "> </div>
+                        <h3 class="text-lg font-bold text-gray-900 dark:text-white pl-4">
+                            Let there be light: You turned on the lights
+                        </h3>
+                    </div>
+                    <div class="mt-3">
+                        <div class="absolute w-5 h-5 border-2 mt-1 border-defaultCyan bg-card rounded-full -left-3 "> </div>
+                        <h3 class="text-lg font-bold text-gray-900 dark:text-white pl-4">
+                            Open sesame: Successfully opened the door
+                        </h3>
+                    </div>
+
+                    <div class="absolute w-4 h-4 rounded-full mt-5 -left-2.5 bg-defaultCyan"> </div>
+                    <div class="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500
+                                flex mt-3.5 pl-4">
+                        <div class="bg-defaultCyan p-2 font-black text-card w-fit"> Vue Raider </div>
+                        <div class="p-2 w-fit text-white font-black">  </div>
+                    </div>
+
+                    <div class="mt-3">
+                        <div class="absolute w-5 h-5 border-2 mt-1 border-defaultCyan bg-card rounded-full -left-3 "> </div>
+                        <h3 class="text-lg font-bold text-gray-900 dark:text-white pl-4">
+                            Successfully entered the tomb
+                        </h3>
+                    </div>
+
+
+                </li>
+            </ol>
+        </div>
     </div>
 </template>
diff --git a/tailwind.config.js b/tailwind.config.js
index 30033ba..dcc12c9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -20,6 +20,7 @@ module.exports = {
                 orange: "#F8590A",
                 card: "#0F1A25",
                 cardText: "#7398BD",
+                defaultCyan: "#67e8f9",
             },
         },
     },

From a76dc5e33b0ec8cb9f5d6548181c18acf93c0c78 Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Tue, 8 Nov 2022 13:04:20 +1000
Subject: [PATCH 30/36] Changes

---
 resources/js/Pages/Achievements.vue | 18 +-----------------
 1 file changed, 1 insertion(+), 17 deletions(-)

diff --git a/resources/js/Pages/Achievements.vue b/resources/js/Pages/Achievements.vue
index 8486be8..611676f 100644
--- a/resources/js/Pages/Achievements.vue
+++ b/resources/js/Pages/Achievements.vue
@@ -40,28 +40,12 @@
                             Let there be light: You turned on the lights
                         </h3>
                     </div>
-                    <div class="mt-3">
+                    <div class="pt-4">
                         <div class="absolute w-5 h-5 border-2 mt-1 border-defaultCyan bg-card rounded-full -left-3 "> </div>
                         <h3 class="text-lg font-bold text-gray-900 dark:text-white pl-4">
                             Open sesame: Successfully opened the door
                         </h3>
                     </div>
-
-                    <div class="absolute w-4 h-4 rounded-full mt-5 -left-2.5 bg-defaultCyan"> </div>
-                    <div class="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500
-                                flex mt-3.5 pl-4">
-                        <div class="bg-defaultCyan p-2 font-black text-card w-fit"> Vue Raider </div>
-                        <div class="p-2 w-fit text-white font-black">  </div>
-                    </div>
-
-                    <div class="mt-3">
-                        <div class="absolute w-5 h-5 border-2 mt-1 border-defaultCyan bg-card rounded-full -left-3 "> </div>
-                        <h3 class="text-lg font-bold text-gray-900 dark:text-white pl-4">
-                            Successfully entered the tomb
-                        </h3>
-                    </div>
-
-
                 </li>
             </ol>
         </div>

From dac93e33c7be54e5b7e49a923062f06295d64284 Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Tue, 8 Nov 2022 14:46:17 +1000
Subject: [PATCH 31/36] PR changes

---
 app/Console/Commands/Bootstrap.php            | 15 --------
 .../ShowCourseLessonsController.php           | 24 ++++--------
 .../Controllers/ShowCoursesController.php     |  3 +-
 .../Controllers/ShowDashboardController.php   | 28 ++------------
 .../ShowMyCourseLessonsController.php         |  4 +-
 .../Controllers/ShowMyCoursesController.php   |  1 -
 .../Controllers/ShowProfileController.php     |  7 +---
 app/Models/Lesson.php                         |  1 -
 resources/js/Components/CourseCard.vue        |  1 -
 resources/js/Components/LessonGrid.vue        | 37 ++++++-------------
 resources/js/Layouts/AuthenticatedLayout.vue  |  3 --
 resources/js/Layouts/Header.vue               |  4 +-
 resources/js/Pages/Courses.vue                |  2 +-
 resources/js/Pages/Dashboard.vue              |  7 ++--
 resources/js/Pages/MyCourseLessons.vue        |  1 +
 resources/js/Pages/MyCourses.vue              |  2 +-
 resources/js/Pages/Profile.vue                |  3 --
 routes/web.php                                |  4 +-
 tailwind.config.js                            |  2 -
 19 files changed, 36 insertions(+), 113 deletions(-)

diff --git a/app/Console/Commands/Bootstrap.php b/app/Console/Commands/Bootstrap.php
index 6b670b7..e9e423e 100644
--- a/app/Console/Commands/Bootstrap.php
+++ b/app/Console/Commands/Bootstrap.php
@@ -31,26 +31,11 @@ public function handle(): int
             ],
         ];
         $courses = [
-            [
-                'name' => 'Bootcamp',
-                'description' => 'Bootcamp',
-                'lessons' => $lessons
-            ],
             [
                 'name' => 'Larascape',
                 'description' => 'Interactive game to learn Laravel',
                 'lessons' => $lessons
             ],
-            [
-                'name' => 'Vue Raider',
-                'description' => 'Interactive game to learn Vue Raider',
-                'lessons' => $lessons
-            ],
-            [
-                'name' => 'Inertia',
-                'description' => 'Interactive game to learn Inertia',
-                'lessons' => $lessons
-            ]
         ];
 
         foreach ($courses as $data) {
diff --git a/app/Http/Controllers/ShowCourseLessonsController.php b/app/Http/Controllers/ShowCourseLessonsController.php
index f11ddcd..a7ed727 100644
--- a/app/Http/Controllers/ShowCourseLessonsController.php
+++ b/app/Http/Controllers/ShowCourseLessonsController.php
@@ -4,26 +4,16 @@
 
 use App\Models\Course;
 use App\Models\Lesson;
-use Exception;
-use Illuminate\Support\Facades\Auth;
-use Inertia\Inertia;
+
 
 class ShowCourseLessonsController extends Controller
 {
-    public function __invoke($course_name)
+    public function __invoke(Course $course)
     {
-        try {
-            $course = Course::firstwhere('name', $course_name);
-            $lessons = Lesson::where('course_id', $course->id)->get();
-            return Inertia('Lessons', [
-                'name' => $course->name,
-                'lessons' => $lessons,
-                'user' => Auth::check()
-            ]);
-        } catch (Exception $e) {
-            return Inertia('ErrorPage', [
-                'error' => "Course could not be found or does not exist"
-            ]);
-        }
+        $lessons = Lesson::where('course_id', $course->id)->get();
+        return Inertia('Lessons', [
+            'name' => $course->name,
+            'lessons' => $lessons,
+        ]);
     }
 }
diff --git a/app/Http/Controllers/ShowCoursesController.php b/app/Http/Controllers/ShowCoursesController.php
index ed9f86b..9f5c191 100644
--- a/app/Http/Controllers/ShowCoursesController.php
+++ b/app/Http/Controllers/ShowCoursesController.php
@@ -9,9 +9,8 @@ class ShowCoursesController extends Controller
 {
     public function __invoke(): Response
     {
-        $courses = Course::withCount('lessons')->get();
         return Inertia('Courses', [
-            'courses' => $courses
+            'courses' => Course::withCount('lessons')->get()
         ]);
     }
 }
diff --git a/app/Http/Controllers/ShowDashboardController.php b/app/Http/Controllers/ShowDashboardController.php
index f311503..50396e4 100644
--- a/app/Http/Controllers/ShowDashboardController.php
+++ b/app/Http/Controllers/ShowDashboardController.php
@@ -6,35 +6,13 @@
 use App\Models\Course;
 use App\Models\Lesson;
 use Illuminate\Http\Request;
-use Illuminate\Support\Facades\Auth;
 
 class ShowDashboardController extends Controller
 {
     public function __invoke(): Response
     {
-        if (Auth::user()) {
-            $courses = Course::withCount('lessons')->get();
-            $l = Lesson::all();
-            $lessons = array();
-            $prev = 1;
-            $temp = array();
-            foreach ($l as $lesson) {
-                if ($lesson->course_id == $prev) {
-                    array_push($temp, $lesson);
-                } else {
-                    array_push($lessons, $temp);
-                    $temp = array();
-                    array_push($temp, $lesson);
-                    $prev = $lesson->course_id;
-                }
-            }
-            array_push($lessons, $temp);
-            return Inertia('Dashboard', [
-                'courses' => $courses,
-                'lessons' => $lessons,
-                'user' => Auth::check()
-            ]);
-        }
-        return Inertia('Welcome');
+        return Inertia('Dashboard', [
+            'courses' => Course::with('lessons')->get(),
+        ]);
     }
 }
diff --git a/app/Http/Controllers/ShowMyCourseLessonsController.php b/app/Http/Controllers/ShowMyCourseLessonsController.php
index 23b6cb5..61625ea 100644
--- a/app/Http/Controllers/ShowMyCourseLessonsController.php
+++ b/app/Http/Controllers/ShowMyCourseLessonsController.php
@@ -4,14 +4,14 @@
 
 use App\Models\Lesson;
 use App\Models\Course;
+
 class ShowMyCourseLessonsController extends Controller
 {
     public function __invoke(Course $course)
     {
-        $lessons = Lesson::where('course_id', $course->id)->get();
         return Inertia('MyCourseLessons', [
             'name' => $course->name,
-            'lessons' => $lessons
+            'lessons' => $course->load('lessons')->lessons
         ]);
     }
 }
diff --git a/app/Http/Controllers/ShowMyCoursesController.php b/app/Http/Controllers/ShowMyCoursesController.php
index 6f5efd3..297ff2b 100644
--- a/app/Http/Controllers/ShowMyCoursesController.php
+++ b/app/Http/Controllers/ShowMyCoursesController.php
@@ -12,7 +12,6 @@ class ShowMyCoursesController extends Controller
     public function __invoke(): Response
     {
         $courses = Course::withCount('lessons')->get();
-        // dd($courses);
         return Inertia('MyCourses', [
             'courses' => $courses
         ]);
diff --git a/app/Http/Controllers/ShowProfileController.php b/app/Http/Controllers/ShowProfileController.php
index f1f5ca9..5a1b497 100644
--- a/app/Http/Controllers/ShowProfileController.php
+++ b/app/Http/Controllers/ShowProfileController.php
@@ -3,16 +3,11 @@
 namespace App\Http\Controllers;
 
 use Inertia\Response;
-use Illuminate\Http\Request;
-use Illuminate\Support\Facades\Auth;
 
 class ShowProfileController extends Controller
 {
     public function __invoke(): Response
     {
-        if (Auth::user()) {
-            return Inertia('Profile');
-        }
-        return Inertia('Welcome');
+        return Inertia('Profile');
     }
 }
diff --git a/app/Models/Lesson.php b/app/Models/Lesson.php
index 68301c1..730be7b 100644
--- a/app/Models/Lesson.php
+++ b/app/Models/Lesson.php
@@ -13,7 +13,6 @@ class Lesson extends Model
     use SoftDeletes;
 
     protected $guarded = [];
-    protected $fillable = ['name', 'description'];
 
     public function course()
     {
diff --git a/resources/js/Components/CourseCard.vue b/resources/js/Components/CourseCard.vue
index 0c04d2c..499d9d2 100644
--- a/resources/js/Components/CourseCard.vue
+++ b/resources/js/Components/CourseCard.vue
@@ -1,5 +1,4 @@
 <script setup>
-    import { Link } from '@inertiajs/inertia-vue3';
     let props = defineProps(['name', 'lessonCount', 'userCount', 'id']);
 </script>
 
diff --git a/resources/js/Components/LessonGrid.vue b/resources/js/Components/LessonGrid.vue
index 677fa75..8e9307a 100644
--- a/resources/js/Components/LessonGrid.vue
+++ b/resources/js/Components/LessonGrid.vue
@@ -11,18 +11,6 @@
     changePlaceholder(0);
 </script>
 
-<style>
-.fade-enter-active,
-.fade-leave-active {
-    transition: opacity 0.5s ease-out;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-    opacity: 0;
-}
-</style>
-
 <template>
     <div class="w-full">
         <h1 class="text-white text-4xl font-bold py-6"> {{ name }} </h1>
@@ -57,12 +45,6 @@
                             </div>
                         </div>
                     </div>
-                    <!-- <div class="sm:float-right">
-                        <button class=" bg-orange text-white
-                                        px-4 py-2 rounded-xl my-10 mr-8
-                                        hover:text-backgroundFrom focus:outline-none transition ease-in-out duration-150"> Play Demo
-                        </button>
-                    </div> -->
                 </div>
             </div>
         </div>
@@ -72,13 +54,18 @@
                 <LessonCard v-for="(lesson, index) in lessons" @click="changePlaceholder(index)"/>
             </div>
             <div class="sm:w-2/5 pt-3 w-full">
-                <transition name="fade" mode="out-in">
-                    <div :key="placeholderDesc" class="pl-6 sm:pl-2">
-                        <h1 class="text-cardText text-3xl"> {{ placeholderName }} </h1>
-                        <p class="text-gray-300 text-md"> {{ placeholderDesc }} </p>
-                    </div>
-                </transition>
-
+                <Transition
+                    enter-active-class="transition: opacity duration-300 ease-out"
+                    enter-from-class="opacity-0"
+                    leave-active-class="transition: opacity duration-300 ease-out"
+                    leave-to-class="opacity-0"
+                    mode="out-in"
+                    >
+                        <div :key="placeholderDesc" class="pl-6 sm:pl-2">
+                            <h1 class="text-cardText text-3xl"> {{ placeholderName }} </h1>
+                            <p class="text-gray-300 text-md"> {{ placeholderDesc }} </p>
+                        </div>
+                </Transition>
             </div>
         </div>
     </div>
diff --git a/resources/js/Layouts/AuthenticatedLayout.vue b/resources/js/Layouts/AuthenticatedLayout.vue
index 864f5bf..53cdc4e 100644
--- a/resources/js/Layouts/AuthenticatedLayout.vue
+++ b/resources/js/Layouts/AuthenticatedLayout.vue
@@ -1,8 +1,5 @@
 <script setup>
-    import { Link } from '@inertiajs/inertia-vue3';
-    import NavLink from '@/Components/NavLink.vue';
     import ProfileCard from '@/Components/ProfileCard.vue';
-    const props = defineProps(['lessons']);
 </script>
 
 <template>
diff --git a/resources/js/Layouts/Header.vue b/resources/js/Layouts/Header.vue
index ed52719..b8f1129 100644
--- a/resources/js/Layouts/Header.vue
+++ b/resources/js/Layouts/Header.vue
@@ -6,7 +6,7 @@
 
 <template>
     <!--  -->
-    <div class="bg-gradient-to-br from-backgroundFrom to-backgroundTo">
+    <div class="bg-gradient-to-br from-[#020B10] to-[#032030]">
         <div class="min-h-screen">
             <nav class="">
                 <!-- Primary Navigation Menu -->
@@ -42,7 +42,7 @@
                     </div>
                 </div>
             </nav>
-            
+
             <!-- Page Heading -->
             <header class="bg-white shadow" v-if="$slots.header">
                 <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
diff --git a/resources/js/Pages/Courses.vue b/resources/js/Pages/Courses.vue
index b137f0c..02ab029 100644
--- a/resources/js/Pages/Courses.vue
+++ b/resources/js/Pages/Courses.vue
@@ -11,7 +11,7 @@
         <h1 class="text-white text-4xl font-bold mx-12 py-6"> All courses</h1>
         <div class="display flex justify-center md:justify-start flex-wrap mx-12">
             <div v-for="course in courses">
-                <Link :href="'/courses/all/' + course.name + '/lessons'" >
+                <Link :href="'/courses/all/' + course.id + '/lessons'" >
                     <CourseCard :name="course.name" :lessonCount="course.lessons_count"
                                 :userCount="course.user_count" :id="course.id"/>
                 </Link>
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index 57ed513..1c23fcd 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -6,17 +6,16 @@
     import MyCourses from './MyCourses.vue';
     import Achievements from './Achievements.vue';
     import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
-    const props = defineProps(['courses', 'lessons', 'user']);
 
+    const props = defineProps(['courses', 'lessons']);
     var page = ref('profile');
-
     const changePlaceholder = (str) => {
         page.value = str;
     };
 </script>
 
 <template>
-    <Header :user="user">
+    <Header :user="true">
         <AuthenticatedLayout/>
         <div class="pl-6 pr-6 sm:pl-12 pt-6">
             <ul class="flex flex-wrap
@@ -40,7 +39,7 @@
             </ul>
             <div class="mt-3">
                 <Profile v-if="page=='profile'"></Profile>
-                <MyCourses v-if="page=='courses'" :courses="courses" :lessons="lessons" :user="user"></MyCourses>
+                <MyCourses v-if="page=='courses'" :courses="courses" :lessons="lessons"></MyCourses>
                 <Achievements v-if="page=='achievements'"/>
             </div>
         </div>
diff --git a/resources/js/Pages/MyCourseLessons.vue b/resources/js/Pages/MyCourseLessons.vue
index 7947604..7b71d0f 100644
--- a/resources/js/Pages/MyCourseLessons.vue
+++ b/resources/js/Pages/MyCourseLessons.vue
@@ -4,6 +4,7 @@
     import LessonGrid from '@/Components/LessonGrid.vue';
     import { Link } from '@inertiajs/inertia-vue3';
     const props = defineProps(['name', 'lessons']);
+    console.log(props.lessons);
 </script>
 
 <template>
diff --git a/resources/js/Pages/MyCourses.vue b/resources/js/Pages/MyCourses.vue
index 2a541c5..26384ec 100644
--- a/resources/js/Pages/MyCourses.vue
+++ b/resources/js/Pages/MyCourses.vue
@@ -24,7 +24,7 @@
         <div v-else class="w-full mr-12">
             <div class="text-orange text-xl font-extrabold border-2 rounded-full border-orange
                         px-1.5 w-8" @click="hide()"> &lt </div>
-            <LessonGrid :name="courses[index].name" :lessons="lessons[index]" :user="user"></LessonGrid>
+            <LessonGrid :name="courses.name" :lessons="courses[index].lessons" :user="user"></LessonGrid>
         </div>
     </div>
 </template>
diff --git a/resources/js/Pages/Profile.vue b/resources/js/Pages/Profile.vue
index 89c6471..70bf774 100644
--- a/resources/js/Pages/Profile.vue
+++ b/resources/js/Pages/Profile.vue
@@ -1,7 +1,4 @@
 <script setup>
-    import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
-    import Header from '@/Layouts/Header.vue';
-    const props = defineProps(['lessons']);
 </script>
 
 <template>
diff --git a/routes/web.php b/routes/web.php
index 5736fb5..76d711b 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -43,11 +43,11 @@
 Route::prefix('/courses')->name('courses.')->group(function () {
     Route::middleware(['auth'])->group(function () {
         Route::get('/all', ShowCoursesController::class)->name('course.show');
-        Route::get('/all/{course_name}/lessons', ShowCourseLessonsController::class)->name('course.lessons');
+        Route::get('/all/{course}/lessons', ShowCourseLessonsController::class)->name('course.lessons');
     });
     Route::middleware('auth')->prefix('/{course}/lessons')->name('.lessons')->group(function () {
         Route::get('{lesson}', \App\Http\Controllers\Lessons\ShowLessonController::class)->name('.show');
-        Route::post('{lesson}/save', \App\Http\Controllers\Lessons\SaveLessonController::class)->name('s.ave');
+        Route::post('{lesson}/save', \App\Http\Controllers\Lessons\SaveLessonController::class)->name('.save');
         Route::get('{lesson}/load', \App\Http\Controllers\Lessons\LoadLessonController::class)->name('.load');
     });
 });
diff --git a/tailwind.config.js b/tailwind.config.js
index dcc12c9..b9140f9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -15,8 +15,6 @@ module.exports = {
                 sans: ["Nunito", ...defaultTheme.fontFamily.sans],
             },
             colors: {
-                backgroundFrom: "#020B10",
-                backgroundTo: "#032030",
                 orange: "#F8590A",
                 card: "#0F1A25",
                 cardText: "#7398BD",

From 6af385d08fe376e1bd836d22eb4faaff6445d08b Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Tue, 8 Nov 2022 15:04:28 +1000
Subject: [PATCH 32/36] Clean up vue files

---
 .../Controllers/ShowDashboardController.php   |  2 -
 .../Controllers/ShowMyCoursesController.php   |  2 -
 resources/js/Components/ApplicationLogo.vue   |  5 ++-
 resources/js/Components/Checkbox.vue          | 40 +++++++++----------
 resources/js/Components/LessonGrid.vue        |  1 +
 resources/js/Components/NavLink.vue           |  5 ++-
 resources/js/Components/PrimaryButton.vue     | 12 +++---
 resources/js/Components/ResponsiveNavLink.vue | 15 ++++---
 resources/js/Pages/Achievements.vue           |  1 -
 resources/js/Pages/Courses.vue                |  3 +-
 resources/js/Pages/ErrorPage.vue              | 12 ------
 resources/js/Pages/Lessons.vue                |  1 +
 resources/js/Pages/MyCourseLessons.vue        |  2 +-
 resources/js/Pages/Profile.vue                |  3 --
 resources/js/Pages/Welcome.vue                |  4 --
 15 files changed, 42 insertions(+), 66 deletions(-)
 delete mode 100644 resources/js/Pages/ErrorPage.vue

diff --git a/app/Http/Controllers/ShowDashboardController.php b/app/Http/Controllers/ShowDashboardController.php
index 50396e4..82c6050 100644
--- a/app/Http/Controllers/ShowDashboardController.php
+++ b/app/Http/Controllers/ShowDashboardController.php
@@ -4,8 +4,6 @@
 
 use Inertia\Response;
 use App\Models\Course;
-use App\Models\Lesson;
-use Illuminate\Http\Request;
 
 class ShowDashboardController extends Controller
 {
diff --git a/app/Http/Controllers/ShowMyCoursesController.php b/app/Http/Controllers/ShowMyCoursesController.php
index 297ff2b..dbca0da 100644
--- a/app/Http/Controllers/ShowMyCoursesController.php
+++ b/app/Http/Controllers/ShowMyCoursesController.php
@@ -2,10 +2,8 @@
 
 namespace App\Http\Controllers;
 
-use Inertia\Inertia;
 use Inertia\Response;
 use App\Models\Course;
-use Illuminate\Http\Request;
 
 class ShowMyCoursesController extends Controller
 {
diff --git a/resources/js/Components/ApplicationLogo.vue b/resources/js/Components/ApplicationLogo.vue
index 4943255..0938249 100644
--- a/resources/js/Components/ApplicationLogo.vue
+++ b/resources/js/Components/ApplicationLogo.vue
@@ -1,9 +1,10 @@
 <script setup>
     import { computed } from 'vue';
+
     const props = defineProps(['dark']);
     const newImg = computed(() => props.dark ?
-    'https://d2wks4gidu9630.cloudfront.net/f9e7e5eb-767a-4239-a8b4-63b76580c003/svg/codinglabs-logo.svg' :
-    'https://d2wks4gidu9630.cloudfront.net/9bfe4af0-d7a0-4399-930f-d93ec6019812/svg/codinglabs-logo-stacked.svg'
+        'https://d2wks4gidu9630.cloudfront.net/f9e7e5eb-767a-4239-a8b4-63b76580c003/svg/codinglabs-logo.svg' :
+        'https://d2wks4gidu9630.cloudfront.net/9bfe4af0-d7a0-4399-930f-d93ec6019812/svg/codinglabs-logo-stacked.svg'
 );
 
 </script>
diff --git a/resources/js/Components/Checkbox.vue b/resources/js/Components/Checkbox.vue
index 0d82f3c..ad48bba 100644
--- a/resources/js/Components/Checkbox.vue
+++ b/resources/js/Components/Checkbox.vue
@@ -1,27 +1,25 @@
 <script setup>
-import { computed } from 'vue';
+    import { computed } from 'vue';
 
-const emit = defineEmits(['update:checked']);
+    const emit = defineEmits(['update:checked']);
+    const props = defineProps({
+        checked: {
+            type: [Array, Boolean],
+            default: false,
+        },
+        value: {
+            default: null,
+        },
+    });
+    const proxyChecked = computed({
+        get() {
+            return props.checked;
+        },
 
-const props = defineProps({
-    checked: {
-        type: [Array, Boolean],
-        default: false,
-    },
-    value: {
-        default: null,
-    },
-});
-
-const proxyChecked = computed({
-    get() {
-        return props.checked;
-    },
-
-    set(val) {
-        emit("update:checked", val);
-    },
-});
+        set(val) {
+            emit("update:checked", val);
+        },
+    });
 </script>
 
 <template>
diff --git a/resources/js/Components/LessonGrid.vue b/resources/js/Components/LessonGrid.vue
index 8e9307a..bc245d5 100644
--- a/resources/js/Components/LessonGrid.vue
+++ b/resources/js/Components/LessonGrid.vue
@@ -1,6 +1,7 @@
 <script setup>
     import {ref} from "vue";
     import LessonCard from "./LessonCard.vue";
+
     const props = defineProps(['name','lessons','user']);
     var placeholderName = ref('Default name');
     var placeholderDesc = ref('Default desc');
diff --git a/resources/js/Components/NavLink.vue b/resources/js/Components/NavLink.vue
index 6b106e4..6b946e2 100644
--- a/resources/js/Components/NavLink.vue
+++ b/resources/js/Components/NavLink.vue
@@ -1,9 +1,10 @@
 <script setup>
     import { computed } from 'vue';
+
     const props = defineProps(['href', 'active']);
     const classes = computed(() => props.active ?
-    'inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300 border-b-2 text-teal-400 border-teal-400' :
-    'inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300 border-b-2 border-transparent'
+        'inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300 border-b-2 text-teal-400 border-teal-400' :
+        'inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300 border-b-2 border-transparent'
 );
 
 </script>
diff --git a/resources/js/Components/PrimaryButton.vue b/resources/js/Components/PrimaryButton.vue
index 6d4697e..6c3d6cd 100644
--- a/resources/js/Components/PrimaryButton.vue
+++ b/resources/js/Components/PrimaryButton.vue
@@ -1,10 +1,10 @@
 <script setup>
-defineProps({
-    type: {
-        type: String,
-        default: 'submit',
-    },
-});
+    defineProps({
+        type: {
+            type: String,
+            default: 'submit',
+        },
+    });
 </script>
 
 <template>
diff --git a/resources/js/Components/ResponsiveNavLink.vue b/resources/js/Components/ResponsiveNavLink.vue
index 21ff81a..8eb3cd7 100644
--- a/resources/js/Components/ResponsiveNavLink.vue
+++ b/resources/js/Components/ResponsiveNavLink.vue
@@ -1,13 +1,12 @@
 <script setup>
-import { computed } from 'vue';
-import { Link } from '@inertiajs/inertia-vue3';
+    import { computed } from 'vue';
+    import { Link } from '@inertiajs/inertia-vue3';
 
-const props = defineProps(['href', 'active']);
-
-const classes = computed(() => props.active
-    ? 'block pl-3 pr-4 py-2 border-l-4 border-indigo-400 text-base font-medium text-indigo-700 bg-indigo-50 focus:outline-none focus:text-indigo-800 focus:bg-indigo-100 focus:border-indigo-700 transition duration-150 ease-in-out'
-    : 'block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out'
-);
+    const props = defineProps(['href', 'active']);
+    const classes = computed(() => props.active
+        ? 'block pl-3 pr-4 py-2 border-l-4 border-indigo-400 text-base font-medium text-indigo-700 bg-indigo-50 focus:outline-none focus:text-indigo-800 focus:bg-indigo-100 focus:border-indigo-700 transition duration-150 ease-in-out'
+        : 'block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:text-gray-800 focus:bg-gray-50 focus:border-gray-300 transition duration-150 ease-in-out'
+    );
 </script>
 
 <template>
diff --git a/resources/js/Pages/Achievements.vue b/resources/js/Pages/Achievements.vue
index 611676f..0cb5e88 100644
--- a/resources/js/Pages/Achievements.vue
+++ b/resources/js/Pages/Achievements.vue
@@ -4,7 +4,6 @@
     import AchievementIcon from '@/Components/AchievementIcon.vue';
     import LessonAchievement from '@/Components/LessonAchievement.vue';
 
-    //var achievements = ['1','2','3','4','5','6','7','8','9','10'];
     let achievements = new Array(30).fill('hello');
 </script>
 
diff --git a/resources/js/Pages/Courses.vue b/resources/js/Pages/Courses.vue
index 02ab029..c739f76 100644
--- a/resources/js/Pages/Courses.vue
+++ b/resources/js/Pages/Courses.vue
@@ -2,7 +2,7 @@
     import Header from '@/Layouts/Header.vue';
     import CourseCard from '@/Components/CourseCard.vue';
     import { Link } from '@inertiajs/inertia-vue3';
-    import {ref} from 'vue';
+
     let props = defineProps(['courses']);
 </script>
 
@@ -16,7 +16,6 @@
                                 :userCount="course.user_count" :id="course.id"/>
                 </Link>
             </div>
-
         </div>
     </Header>
 </template>
diff --git a/resources/js/Pages/ErrorPage.vue b/resources/js/Pages/ErrorPage.vue
deleted file mode 100644
index 387056f..0000000
--- a/resources/js/Pages/ErrorPage.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup>
-    import Header from '@/Layouts/Header.vue';
-    const props = defineProps(['error']);
-</script>
-
-<template>
-    <Header>
-        <div class="text-white">
-            {{ error }}
-        </div>
-    </Header>
-</template>
diff --git a/resources/js/Pages/Lessons.vue b/resources/js/Pages/Lessons.vue
index 6cbcba2..4a76be9 100644
--- a/resources/js/Pages/Lessons.vue
+++ b/resources/js/Pages/Lessons.vue
@@ -1,6 +1,7 @@
 <script setup>
     import Header from '@/Layouts/Header.vue';
     import LessonGrid from '@/Components/LessonGrid.vue';
+
     const props = defineProps(['name', 'lessons']);
 </script>
 
diff --git a/resources/js/Pages/MyCourseLessons.vue b/resources/js/Pages/MyCourseLessons.vue
index 7b71d0f..ea65e89 100644
--- a/resources/js/Pages/MyCourseLessons.vue
+++ b/resources/js/Pages/MyCourseLessons.vue
@@ -3,8 +3,8 @@
     import Header from '@/Layouts/Header.vue';
     import LessonGrid from '@/Components/LessonGrid.vue';
     import { Link } from '@inertiajs/inertia-vue3';
+
     const props = defineProps(['name', 'lessons']);
-    console.log(props.lessons);
 </script>
 
 <template>
diff --git a/resources/js/Pages/Profile.vue b/resources/js/Pages/Profile.vue
index 70bf774..5648d5b 100644
--- a/resources/js/Pages/Profile.vue
+++ b/resources/js/Pages/Profile.vue
@@ -1,6 +1,3 @@
-<script setup>
-</script>
-
 <template>
     <p class="text-white"> This is the profile </p>
 </template>
diff --git a/resources/js/Pages/Welcome.vue b/resources/js/Pages/Welcome.vue
index c6ee43b..3367e9e 100644
--- a/resources/js/Pages/Welcome.vue
+++ b/resources/js/Pages/Welcome.vue
@@ -1,7 +1,3 @@
-<script setup>
-
-</script>
-
 <template>
     <div>
         Homepage

From 38b53561b23717d653d033820d28e555d84ade5e Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Tue, 8 Nov 2022 15:33:01 +1000
Subject: [PATCH 33/36] Final PR changes

---
 app/Console/Commands/Bootstrap.php | 33 ++++++++++++++----------------
 resources/js/Pages/MyCourses.vue   |  2 +-
 routes/web.php                     |  2 +-
 3 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/app/Console/Commands/Bootstrap.php b/app/Console/Commands/Bootstrap.php
index e9e423e..96dab75 100644
--- a/app/Console/Commands/Bootstrap.php
+++ b/app/Console/Commands/Bootstrap.php
@@ -30,28 +30,25 @@ public function handle(): int
                 'description' => 'Lesson 3',
             ],
         ];
-        $courses = [
-            [
-                'name' => 'Larascape',
-                'description' => 'Interactive game to learn Laravel',
-                'lessons' => $lessons
-            ],
+        $course = [
+            'name' => 'Larascape',
+            'description' => 'Interactive game to learn Laravel',
+            'lessons' => $lessons
         ];
 
-        foreach ($courses as $data) {
-            $course = Course::firstOrCreate([
-               'name' => $data['name'],
-               'description' => $data['description'],
-            ]);
+        $course = Course::firstOrCreate([
+            'name' => $course['name'],
+            'description' => $course['description'],
+        ]);
 
-            foreach ($data['lessons'] as $index => $lesson) {
-                $course->lessons()->firstOrCreate([
-                    'name' => $lesson['name'],
-                    'description' => $lesson['description'],
-                    'index' => $index + 1,
-                ]);
-            }
+        foreach ($lessons as $index => $lesson) {
+            $course->lessons()->firstOrCreate([
+                'name' => $lesson['name'],
+                'description' => $lesson['description'],
+                'index' => $index + 1,
+            ]);
         }
+
         return 0;
     }
 }
diff --git a/resources/js/Pages/MyCourses.vue b/resources/js/Pages/MyCourses.vue
index 26384ec..df0b2fa 100644
--- a/resources/js/Pages/MyCourses.vue
+++ b/resources/js/Pages/MyCourses.vue
@@ -24,7 +24,7 @@
         <div v-else class="w-full mr-12">
             <div class="text-orange text-xl font-extrabold border-2 rounded-full border-orange
                         px-1.5 w-8" @click="hide()"> &lt </div>
-            <LessonGrid :name="courses.name" :lessons="courses[index].lessons" :user="user"></LessonGrid>
+            <LessonGrid :name="courses[index].name" :lessons="courses[index].lessons" :user="user"></LessonGrid>
         </div>
     </div>
 </template>
diff --git a/routes/web.php b/routes/web.php
index 76d711b..bcb554a 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -47,7 +47,7 @@
     });
     Route::middleware('auth')->prefix('/{course}/lessons')->name('.lessons')->group(function () {
         Route::get('{lesson}', \App\Http\Controllers\Lessons\ShowLessonController::class)->name('.show');
-        Route::post('{lesson}/save', \App\Http\Controllers\Lessons\SaveLessonController::class)->name('.save');
+        Route::post('{lesson}/save', \App\Http\Controllers\Lessons\SaveLessonController::class)->name('s.ave');
         Route::get('{lesson}/load', \App\Http\Controllers\Lessons\LoadLessonController::class)->name('.load');
     });
 });

From 080db9edaa83b3072f832ccf3339265cd814a16e Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Wed, 9 Nov 2022 09:59:19 +1000
Subject: [PATCH 34/36] File organisation, cleanup, naming and route
 adjustments

---
 .../{ => Members}/ShowDashboardController.php |  5 +++--
 .../IndexCourseController.php}                |  8 ++++----
 .../{ => Public}/ShowCoursesController.php    |  5 +++--
 .../ShowAchievementsController.php            | 15 ---------------
 .../ShowCourseLessonsController.php           | 19 -------------------
 .../Controllers/ShowMyCoursesController.php   | 17 -----------------
 .../Controllers/ShowProfileController.php     | 13 -------------
 .../{ => Buttons}/PrimaryButton.vue           |  0
 .../Components/{ => DropDowns}/Dropdown.vue   |  0
 .../{ => DropDowns}/DropdownLink.vue          |  0
 .../js/Components/{ => Inputs}/Checkbox.vue   |  0
 .../js/Components/{ => Inputs}/InputError.vue |  0
 .../js/Components/{ => Inputs}/InputLabel.vue |  0
 .../js/Components/{ => Inputs}/TextInput.vue  |  0
 .../js/Components/{ => Links}/NavLink.vue     |  2 +-
 .../{ => Links}/ResponsiveNavLink.vue         |  0
 .../Achievements}/AchievementIcon.vue         |  0
 .../Achievements}/LessonAchievement.vue       |  0
 .../{ => Members/Profile}/ProfileCard.vue     |  0
 .../{ => Public/Courses}/CourseCard.vue       |  0
 .../{ => Public/Lessons}/LessonCard.vue       |  0
 .../{ => Public/Lessons}/LessonGrid.vue       |  3 ++-
 resources/js/Layouts/AuthenticatedLayout.vue  |  2 +-
 .../js/Pages/{ => Members}/Achievements.vue   |  6 ++----
 .../Courses/Index.vue}                        |  6 +++---
 .../js/Pages/{ => Members}/Dashboard.vue      | 18 +++++++++---------
 resources/js/Pages/{ => Members}/Profile.vue  |  0
 resources/js/Pages/MyCourseLessons.vue        | 14 --------------
 .../{Courses.vue => Public/Courses/Index.vue} |  2 +-
 .../{Lessons.vue => Public/Courses/Show.vue}  |  6 +++---
 routes/web.php                                | 18 ++++--------------
 31 files changed, 36 insertions(+), 123 deletions(-)
 rename app/Http/Controllers/{ => Members}/ShowDashboardController.php (65%)
 rename app/Http/Controllers/{ShowMyCourseLessonsController.php => Public/IndexCourseController.php} (54%)
 rename app/Http/Controllers/{ => Public}/ShowCoursesController.php (64%)
 delete mode 100644 app/Http/Controllers/ShowAchievementsController.php
 delete mode 100644 app/Http/Controllers/ShowCourseLessonsController.php
 delete mode 100644 app/Http/Controllers/ShowMyCoursesController.php
 delete mode 100644 app/Http/Controllers/ShowProfileController.php
 rename resources/js/Components/{ => Buttons}/PrimaryButton.vue (100%)
 rename resources/js/Components/{ => DropDowns}/Dropdown.vue (100%)
 rename resources/js/Components/{ => DropDowns}/DropdownLink.vue (100%)
 rename resources/js/Components/{ => Inputs}/Checkbox.vue (100%)
 rename resources/js/Components/{ => Inputs}/InputError.vue (100%)
 rename resources/js/Components/{ => Inputs}/InputLabel.vue (100%)
 rename resources/js/Components/{ => Inputs}/TextInput.vue (100%)
 rename resources/js/Components/{ => Links}/NavLink.vue (91%)
 rename resources/js/Components/{ => Links}/ResponsiveNavLink.vue (100%)
 rename resources/js/Components/{ => Members/Achievements}/AchievementIcon.vue (100%)
 rename resources/js/Components/{ => Members/Achievements}/LessonAchievement.vue (100%)
 rename resources/js/Components/{ => Members/Profile}/ProfileCard.vue (100%)
 rename resources/js/Components/{ => Public/Courses}/CourseCard.vue (100%)
 rename resources/js/Components/{ => Public/Lessons}/LessonCard.vue (100%)
 rename resources/js/Components/{ => Public/Lessons}/LessonGrid.vue (97%)
 rename resources/js/Pages/{ => Members}/Achievements.vue (89%)
 rename resources/js/Pages/{MyCourses.vue => Members/Courses/Index.vue} (82%)
 rename resources/js/Pages/{ => Members}/Dashboard.vue (71%)
 rename resources/js/Pages/{ => Members}/Profile.vue (100%)
 delete mode 100644 resources/js/Pages/MyCourseLessons.vue
 rename resources/js/Pages/{Courses.vue => Public/Courses/Index.vue} (90%)
 rename resources/js/Pages/{Lessons.vue => Public/Courses/Show.vue} (50%)

diff --git a/app/Http/Controllers/ShowDashboardController.php b/app/Http/Controllers/Members/ShowDashboardController.php
similarity index 65%
rename from app/Http/Controllers/ShowDashboardController.php
rename to app/Http/Controllers/Members/ShowDashboardController.php
index 82c6050..21638d7 100644
--- a/app/Http/Controllers/ShowDashboardController.php
+++ b/app/Http/Controllers/Members/ShowDashboardController.php
@@ -1,15 +1,16 @@
 <?php
 
-namespace App\Http\Controllers;
+namespace App\Http\Controllers\Members;
 
 use Inertia\Response;
 use App\Models\Course;
+use App\Http\Controllers\Controller;
 
 class ShowDashboardController extends Controller
 {
     public function __invoke(): Response
     {
-        return Inertia('Dashboard', [
+        return Inertia('Members/Dashboard', [
             'courses' => Course::with('lessons')->get(),
         ]);
     }
diff --git a/app/Http/Controllers/ShowMyCourseLessonsController.php b/app/Http/Controllers/Public/IndexCourseController.php
similarity index 54%
rename from app/Http/Controllers/ShowMyCourseLessonsController.php
rename to app/Http/Controllers/Public/IndexCourseController.php
index 61625ea..f66e03a 100644
--- a/app/Http/Controllers/ShowMyCourseLessonsController.php
+++ b/app/Http/Controllers/Public/IndexCourseController.php
@@ -1,15 +1,15 @@
 <?php
 
-namespace App\Http\Controllers;
+namespace App\Http\Controllers\Public;
 
-use App\Models\Lesson;
 use App\Models\Course;
+use App\Http\Controllers\Controller;
 
-class ShowMyCourseLessonsController extends Controller
+class IndexCourseController extends Controller
 {
     public function __invoke(Course $course)
     {
-        return Inertia('MyCourseLessons', [
+        return Inertia('Public/Courses/Show', [
             'name' => $course->name,
             'lessons' => $course->load('lessons')->lessons
         ]);
diff --git a/app/Http/Controllers/ShowCoursesController.php b/app/Http/Controllers/Public/ShowCoursesController.php
similarity index 64%
rename from app/Http/Controllers/ShowCoursesController.php
rename to app/Http/Controllers/Public/ShowCoursesController.php
index 9f5c191..a3087b4 100644
--- a/app/Http/Controllers/ShowCoursesController.php
+++ b/app/Http/Controllers/Public/ShowCoursesController.php
@@ -1,15 +1,16 @@
 <?php
 
-namespace App\Http\Controllers;
+namespace App\Http\Controllers\Public;
 
 use Inertia\Response;
 use App\Models\Course;
+use App\Http\Controllers\Controller;
 
 class ShowCoursesController extends Controller
 {
     public function __invoke(): Response
     {
-        return Inertia('Courses', [
+        return Inertia('Public/Courses/Index', [
             'courses' => Course::withCount('lessons')->get()
         ]);
     }
diff --git a/app/Http/Controllers/ShowAchievementsController.php b/app/Http/Controllers/ShowAchievementsController.php
deleted file mode 100644
index 9f13162..0000000
--- a/app/Http/Controllers/ShowAchievementsController.php
+++ /dev/null
@@ -1,15 +0,0 @@
-<?php
-
-namespace App\Http\Controllers;
-
-use Inertia\Inertia;
-use Inertia\Response;
-use Illuminate\Http\Request;
-
-class ShowAchievementsController extends Controller
-{
-    public function __invoke(): Response
-    {
-        return Inertia('Achievements');
-    }
-}
diff --git a/app/Http/Controllers/ShowCourseLessonsController.php b/app/Http/Controllers/ShowCourseLessonsController.php
deleted file mode 100644
index a7ed727..0000000
--- a/app/Http/Controllers/ShowCourseLessonsController.php
+++ /dev/null
@@ -1,19 +0,0 @@
-<?php
-
-namespace App\Http\Controllers;
-
-use App\Models\Course;
-use App\Models\Lesson;
-
-
-class ShowCourseLessonsController extends Controller
-{
-    public function __invoke(Course $course)
-    {
-        $lessons = Lesson::where('course_id', $course->id)->get();
-        return Inertia('Lessons', [
-            'name' => $course->name,
-            'lessons' => $lessons,
-        ]);
-    }
-}
diff --git a/app/Http/Controllers/ShowMyCoursesController.php b/app/Http/Controllers/ShowMyCoursesController.php
deleted file mode 100644
index dbca0da..0000000
--- a/app/Http/Controllers/ShowMyCoursesController.php
+++ /dev/null
@@ -1,17 +0,0 @@
-<?php
-
-namespace App\Http\Controllers;
-
-use Inertia\Response;
-use App\Models\Course;
-
-class ShowMyCoursesController extends Controller
-{
-    public function __invoke(): Response
-    {
-        $courses = Course::withCount('lessons')->get();
-        return Inertia('MyCourses', [
-            'courses' => $courses
-        ]);
-    }
-}
diff --git a/app/Http/Controllers/ShowProfileController.php b/app/Http/Controllers/ShowProfileController.php
deleted file mode 100644
index 5a1b497..0000000
--- a/app/Http/Controllers/ShowProfileController.php
+++ /dev/null
@@ -1,13 +0,0 @@
-<?php
-
-namespace App\Http\Controllers;
-
-use Inertia\Response;
-
-class ShowProfileController extends Controller
-{
-    public function __invoke(): Response
-    {
-        return Inertia('Profile');
-    }
-}
diff --git a/resources/js/Components/PrimaryButton.vue b/resources/js/Components/Buttons/PrimaryButton.vue
similarity index 100%
rename from resources/js/Components/PrimaryButton.vue
rename to resources/js/Components/Buttons/PrimaryButton.vue
diff --git a/resources/js/Components/Dropdown.vue b/resources/js/Components/DropDowns/Dropdown.vue
similarity index 100%
rename from resources/js/Components/Dropdown.vue
rename to resources/js/Components/DropDowns/Dropdown.vue
diff --git a/resources/js/Components/DropdownLink.vue b/resources/js/Components/DropDowns/DropdownLink.vue
similarity index 100%
rename from resources/js/Components/DropdownLink.vue
rename to resources/js/Components/DropDowns/DropdownLink.vue
diff --git a/resources/js/Components/Checkbox.vue b/resources/js/Components/Inputs/Checkbox.vue
similarity index 100%
rename from resources/js/Components/Checkbox.vue
rename to resources/js/Components/Inputs/Checkbox.vue
diff --git a/resources/js/Components/InputError.vue b/resources/js/Components/Inputs/InputError.vue
similarity index 100%
rename from resources/js/Components/InputError.vue
rename to resources/js/Components/Inputs/InputError.vue
diff --git a/resources/js/Components/InputLabel.vue b/resources/js/Components/Inputs/InputLabel.vue
similarity index 100%
rename from resources/js/Components/InputLabel.vue
rename to resources/js/Components/Inputs/InputLabel.vue
diff --git a/resources/js/Components/TextInput.vue b/resources/js/Components/Inputs/TextInput.vue
similarity index 100%
rename from resources/js/Components/TextInput.vue
rename to resources/js/Components/Inputs/TextInput.vue
diff --git a/resources/js/Components/NavLink.vue b/resources/js/Components/Links/NavLink.vue
similarity index 91%
rename from resources/js/Components/NavLink.vue
rename to resources/js/Components/Links/NavLink.vue
index 6b946e2..8fc1fc8 100644
--- a/resources/js/Components/NavLink.vue
+++ b/resources/js/Components/Links/NavLink.vue
@@ -1,7 +1,7 @@
 <script setup>
     import { computed } from 'vue';
 
-    const props = defineProps(['href', 'active']);
+    const props = defineProps(['active']);
     const classes = computed(() => props.active ?
         'inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300 border-b-2 text-teal-400 border-teal-400' :
         'inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300 border-b-2 border-transparent'
diff --git a/resources/js/Components/ResponsiveNavLink.vue b/resources/js/Components/Links/ResponsiveNavLink.vue
similarity index 100%
rename from resources/js/Components/ResponsiveNavLink.vue
rename to resources/js/Components/Links/ResponsiveNavLink.vue
diff --git a/resources/js/Components/AchievementIcon.vue b/resources/js/Components/Members/Achievements/AchievementIcon.vue
similarity index 100%
rename from resources/js/Components/AchievementIcon.vue
rename to resources/js/Components/Members/Achievements/AchievementIcon.vue
diff --git a/resources/js/Components/LessonAchievement.vue b/resources/js/Components/Members/Achievements/LessonAchievement.vue
similarity index 100%
rename from resources/js/Components/LessonAchievement.vue
rename to resources/js/Components/Members/Achievements/LessonAchievement.vue
diff --git a/resources/js/Components/ProfileCard.vue b/resources/js/Components/Members/Profile/ProfileCard.vue
similarity index 100%
rename from resources/js/Components/ProfileCard.vue
rename to resources/js/Components/Members/Profile/ProfileCard.vue
diff --git a/resources/js/Components/CourseCard.vue b/resources/js/Components/Public/Courses/CourseCard.vue
similarity index 100%
rename from resources/js/Components/CourseCard.vue
rename to resources/js/Components/Public/Courses/CourseCard.vue
diff --git a/resources/js/Components/LessonCard.vue b/resources/js/Components/Public/Lessons/LessonCard.vue
similarity index 100%
rename from resources/js/Components/LessonCard.vue
rename to resources/js/Components/Public/Lessons/LessonCard.vue
diff --git a/resources/js/Components/LessonGrid.vue b/resources/js/Components/Public/Lessons/LessonGrid.vue
similarity index 97%
rename from resources/js/Components/LessonGrid.vue
rename to resources/js/Components/Public/Lessons/LessonGrid.vue
index bc245d5..37345dd 100644
--- a/resources/js/Components/LessonGrid.vue
+++ b/resources/js/Components/Public/Lessons/LessonGrid.vue
@@ -18,7 +18,7 @@
         <div class="bg-card rounded-3xl display flex flex-wrap justify-center sm:justify-start p-4">
             <!-- Course image (Not lesson image) -->
             <div class="p-8">
-                <img class="w-44 h-32 object-cover my-auto" src="../../../public/images/placeholder.png"/>
+                <img class="w-44 h-32 object-cover my-auto" src="../../../../../public/images/placeholder.png"/>
             </div>
             <!-- Lesson count, level and progress section -->
             <div class="my-auto">
@@ -67,6 +67,7 @@
                             <p class="text-gray-300 text-md"> {{ placeholderDesc }} </p>
                         </div>
                 </Transition>
+                <div v-if="!user"> Play </div>
             </div>
         </div>
     </div>
diff --git a/resources/js/Layouts/AuthenticatedLayout.vue b/resources/js/Layouts/AuthenticatedLayout.vue
index 53cdc4e..3ba85ad 100644
--- a/resources/js/Layouts/AuthenticatedLayout.vue
+++ b/resources/js/Layouts/AuthenticatedLayout.vue
@@ -1,5 +1,5 @@
 <script setup>
-    import ProfileCard from '@/Components/ProfileCard.vue';
+    import ProfileCard from '@/Components/Members/Profile/ProfileCard.vue';
 </script>
 
 <template>
diff --git a/resources/js/Pages/Achievements.vue b/resources/js/Pages/Members/Achievements.vue
similarity index 89%
rename from resources/js/Pages/Achievements.vue
rename to resources/js/Pages/Members/Achievements.vue
index 0cb5e88..cf359d3 100644
--- a/resources/js/Pages/Achievements.vue
+++ b/resources/js/Pages/Members/Achievements.vue
@@ -1,8 +1,6 @@
 <script setup>
-    import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
-    import Header from '@/Layouts/Header.vue';
-    import AchievementIcon from '@/Components/AchievementIcon.vue';
-    import LessonAchievement from '@/Components/LessonAchievement.vue';
+    import AchievementIcon from '@/Components/Members/Achievements/AchievementIcon.vue';
+    import LessonAchievement from '@/Components/Members/Achievements/LessonAchievement.vue';
 
     let achievements = new Array(30).fill('hello');
 </script>
diff --git a/resources/js/Pages/MyCourses.vue b/resources/js/Pages/Members/Courses/Index.vue
similarity index 82%
rename from resources/js/Pages/MyCourses.vue
rename to resources/js/Pages/Members/Courses/Index.vue
index df0b2fa..2661542 100644
--- a/resources/js/Pages/MyCourses.vue
+++ b/resources/js/Pages/Members/Courses/Index.vue
@@ -1,9 +1,9 @@
 <script setup>
-    import CourseCard from '@/Components/CourseCard.vue';
-    import LessonGrid from '../Components/LessonGrid.vue';
+    import CourseCard from '@/Components/Public/Courses/CourseCard.vue';
+    import LessonGrid from '@/Components/Public/Lessons/LessonGrid.vue';
     import { ref } from "vue"
 
-    const props = defineProps(['courses', 'lessons', 'user']);
+    const props = defineProps(['courses', 'user']);
     var show = ref(false), index = ref(0);
     const hide = () => {
         show.value = !show.value;
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Members/Dashboard.vue
similarity index 71%
rename from resources/js/Pages/Dashboard.vue
rename to resources/js/Pages/Members/Dashboard.vue
index 1c23fcd..5b89fe7 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Members/Dashboard.vue
@@ -1,13 +1,13 @@
 <script setup>
+    import { ref } from "vue";
     import Header from '@/Layouts/Header.vue';
-    import NavLink from '@/Components/NavLink.vue';
+    import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
+    import NavLink from '@/Components/Links/NavLink.vue';
     import Profile from './Profile.vue';
-    import { ref } from "vue";
-    import MyCourses from './MyCourses.vue';
+    import Index from './Courses/Index.vue';
     import Achievements from './Achievements.vue';
-    import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
 
-    const props = defineProps(['courses', 'lessons']);
+    const props = defineProps(['courses']);
     var page = ref('profile');
     const changePlaceholder = (str) => {
         page.value = str;
@@ -22,24 +22,24 @@
                     text-sm font-medium text-center
                     text-gray-500 border-b border-gray-200 dark:text-gray-400">
                 <li class="mr-2" @click="changePlaceholder('profile')">
-                    <NavLink :href="route('dashboard.profile')" :active="page=='profile'">
+                    <NavLink :active="page=='profile'">
                         Profile
                     </NavLink>
                 </li>
                 <li class="mr-2" @click="changePlaceholder('courses')">
-                    <NavLink :href="route('dashboard.courses')" :active="page=='courses'">
+                    <NavLink :active="page=='courses'">
                         My Courses
                     </NavLink>
                 </li>
                 <li class="mr-2" @click="changePlaceholder('achievements')">
-                    <NavLink :href="route('dashboard.achievements')" :active="page=='achievements'">
+                    <NavLink :active="page=='achievements'">
                         Achievements
                     </NavLink>
                 </li>
             </ul>
             <div class="mt-3">
                 <Profile v-if="page=='profile'"></Profile>
-                <MyCourses v-if="page=='courses'" :courses="courses" :lessons="lessons"></MyCourses>
+                <Index v-if="page=='courses'" :courses="courses"></Index>
                 <Achievements v-if="page=='achievements'"/>
             </div>
         </div>
diff --git a/resources/js/Pages/Profile.vue b/resources/js/Pages/Members/Profile.vue
similarity index 100%
rename from resources/js/Pages/Profile.vue
rename to resources/js/Pages/Members/Profile.vue
diff --git a/resources/js/Pages/MyCourseLessons.vue b/resources/js/Pages/MyCourseLessons.vue
deleted file mode 100644
index ea65e89..0000000
--- a/resources/js/Pages/MyCourseLessons.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup>
-    import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
-    import Header from '@/Layouts/Header.vue';
-    import LessonGrid from '@/Components/LessonGrid.vue';
-    import { Link } from '@inertiajs/inertia-vue3';
-
-    const props = defineProps(['name', 'lessons']);
-</script>
-
-<template>
-    <Header>
-        <LessonGrid :name="name" :lessons="lessons" />
-    </Header>
-</template>
diff --git a/resources/js/Pages/Courses.vue b/resources/js/Pages/Public/Courses/Index.vue
similarity index 90%
rename from resources/js/Pages/Courses.vue
rename to resources/js/Pages/Public/Courses/Index.vue
index c739f76..4e78866 100644
--- a/resources/js/Pages/Courses.vue
+++ b/resources/js/Pages/Public/Courses/Index.vue
@@ -1,6 +1,6 @@
 <script setup>
     import Header from '@/Layouts/Header.vue';
-    import CourseCard from '@/Components/CourseCard.vue';
+    import CourseCard from '@/Components/Public/Courses/CourseCard.vue';
     import { Link } from '@inertiajs/inertia-vue3';
 
     let props = defineProps(['courses']);
diff --git a/resources/js/Pages/Lessons.vue b/resources/js/Pages/Public/Courses/Show.vue
similarity index 50%
rename from resources/js/Pages/Lessons.vue
rename to resources/js/Pages/Public/Courses/Show.vue
index 4a76be9..227771d 100644
--- a/resources/js/Pages/Lessons.vue
+++ b/resources/js/Pages/Public/Courses/Show.vue
@@ -1,14 +1,14 @@
 <script setup>
     import Header from '@/Layouts/Header.vue';
-    import LessonGrid from '@/Components/LessonGrid.vue';
+    import LessonGrid from '@/Components/Public/Lessons/LessonGrid.vue';
 
     const props = defineProps(['name', 'lessons']);
 </script>
 
 <template>
     <Header>
-        <div class="ml-12 mr-12">
-            <LessonGrid :name="name" :lessons="lessons"/>
+        <div class="pl-6 pr-6 sm:pl-12 pt-6">
+            <LessonGrid :name="name" :lessons="lessons" :user="true" />
         </div>
     </Header>
 </template>
diff --git a/routes/web.php b/routes/web.php
index bcb554a..c1d02d2 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -2,16 +2,10 @@
 
 use Inertia\Inertia;
 use Illuminate\Support\Facades\Route;
-use Illuminate\Foundation\Application;
 use App\Http\Controllers\LogoutController;
-use App\Http\Controllers\ShowCoursesController;
-use App\Http\Controllers\ShowProfileController;
-use App\Http\Controllers\ShowDashboardController;
-use App\Http\Controllers\ShowMyCoursesController;
-use App\Http\Controllers\ShowAchievementsController;
-use App\Http\Controllers\ShowCourseLessonsController;
-use App\Http\Controllers\ShowMyCourseLessonsController;
-
+use App\Http\Controllers\Public\IndexCourseController;
+use App\Http\Controllers\Public\ShowCoursesController;
+use App\Http\Controllers\Members\ShowDashboardController;
 
 /*
 |--------------------------------------------------------------------------
@@ -31,10 +25,6 @@
 Route::prefix('/dashboard')->name('dashboard')->group(function () {
     Route::middleware(['auth'])->group(function () {
         Route::get('/', ShowDashboardController::class)->name('.dashboard');
-        Route::get('/profile', ShowProfileController::class)->name('.profile');
-        Route::get('/mycourses', ShowMyCoursesController::class)->name('.courses');
-        Route::get('/mycourses/{course}', ShowMyCourseLessonsController::class)->name('.lessons');
-        Route::get('/achievements', ShowAchievementsController::class)->name('.achievements');
     });
 });
 
@@ -43,7 +33,7 @@
 Route::prefix('/courses')->name('courses.')->group(function () {
     Route::middleware(['auth'])->group(function () {
         Route::get('/all', ShowCoursesController::class)->name('course.show');
-        Route::get('/all/{course}/lessons', ShowCourseLessonsController::class)->name('course.lessons');
+        Route::get('/all/{course}/lessons', IndexCourseController::class)->name('course.lessons');
     });
     Route::middleware('auth')->prefix('/{course}/lessons')->name('.lessons')->group(function () {
         Route::get('{lesson}', \App\Http\Controllers\Lessons\ShowLessonController::class)->name('.show');

From 1e05c900b3c67c3b778ff6d382d3b7165829d9c3 Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Wed, 9 Nov 2022 13:47:37 +1000
Subject: [PATCH 35/36] Popover package and implementation, some general
 touchups to the achievement section

---
 package-lock.json                             | 123 ++++++++++--------
 package.json                                  |   3 +
 resources/js/Components/Links/NavLink.vue     |   2 +-
 .../Members/Achievements/AchievementIcon.vue  |  43 +++++-
 .../Achievements/LessonAchievement.vue        |  20 ++-
 resources/js/Pages/Members/Achievements.vue   |  20 +--
 tailwind.config.js                            |   8 +-
 7 files changed, 137 insertions(+), 82 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 440b1cc..42aedd3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,9 +1,12 @@
 {
-    "name": "codinglabs-learn",
+    "name": "learn",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
+            "dependencies": {
+                "vue3-popper": "^1.5.0"
+            },
             "devDependencies": {
                 "@headlessui/vue": "^1.7.3",
                 "@inertiajs/inertia": "^0.11.0",
@@ -25,7 +28,6 @@
             "version": "7.19.0",
             "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.19.0.tgz",
             "integrity": "sha512-74bEXKX2h+8rrfQUfsBfuZZHzsEs6Eql4pqy/T4Nn6Y9wNPggQOqD6z6pn5Bl8ZfysKouFZT/UXEH94ummEeQw==",
-            "dev": true,
             "bin": {
                 "parser": "bin/babel-parser.js"
             },
@@ -142,6 +144,15 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/@popperjs/core": {
+            "version": "2.11.6",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+            "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/popperjs"
+            }
+        },
         "node_modules/@tailwindcss/forms": {
             "version": "0.5.3",
             "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.3.tgz",
@@ -171,7 +182,6 @@
             "version": "3.2.39",
             "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.39.tgz",
             "integrity": "sha512-mf/36OWXqWn0wsC40nwRRGheR/qoID+lZXbIuLnr4/AngM0ov8Xvv8GHunC0rKRIkh60bTqydlqTeBo49rlbqw==",
-            "dev": true,
             "dependencies": {
                 "@babel/parser": "^7.16.4",
                 "@vue/shared": "3.2.39",
@@ -183,7 +193,6 @@
             "version": "3.2.39",
             "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.39.tgz",
             "integrity": "sha512-HMFI25Be1C8vLEEv1hgEO1dWwG9QQ8LTTPmCkblVJY/O3OvWx6r1+zsox5mKPMGvqYEZa6l8j+xgOfUspgo7hw==",
-            "dev": true,
             "dependencies": {
                 "@vue/compiler-core": "3.2.39",
                 "@vue/shared": "3.2.39"
@@ -193,7 +202,6 @@
             "version": "3.2.39",
             "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.39.tgz",
             "integrity": "sha512-fqAQgFs1/BxTUZkd0Vakn3teKUt//J3c420BgnYgEOoVdTwYpBTSXCMJ88GOBCylmUBbtquGPli9tVs7LzsWIA==",
-            "dev": true,
             "dependencies": {
                 "@babel/parser": "^7.16.4",
                 "@vue/compiler-core": "3.2.39",
@@ -211,7 +219,6 @@
             "version": "3.2.39",
             "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.39.tgz",
             "integrity": "sha512-EoGCJ6lincKOZGW+0Ky4WOKsSmqL7hp1ZYgen8M7u/mlvvEQUaO9tKKOy7K43M9U2aA3tPv0TuYYQFrEbK2eFQ==",
-            "dev": true,
             "dependencies": {
                 "@vue/compiler-dom": "3.2.39",
                 "@vue/shared": "3.2.39"
@@ -221,7 +228,6 @@
             "version": "3.2.39",
             "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.39.tgz",
             "integrity": "sha512-vlaYX2a3qMhIZfrw3Mtfd+BuU+TZmvDrPMa+6lpfzS9k/LnGxkSuf0fhkP0rMGfiOHPtyKoU9OJJJFGm92beVQ==",
-            "dev": true,
             "dependencies": {
                 "@vue/shared": "3.2.39"
             }
@@ -230,7 +236,6 @@
             "version": "3.2.39",
             "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.39.tgz",
             "integrity": "sha512-HGuWu864zStiWs9wBC6JYOP1E00UjMdDWIG5W+FpUx28hV3uz9ODOKVNm/vdOy/Pvzg8+OcANxAVC85WFBbl3A==",
-            "dev": true,
             "dependencies": {
                 "@babel/parser": "^7.16.4",
                 "@vue/compiler-core": "3.2.39",
@@ -243,7 +248,6 @@
             "version": "3.2.39",
             "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.39.tgz",
             "integrity": "sha512-xKH5XP57JW5JW+8ZG1khBbuLakINTgPuINKL01hStWLTTGFOrM49UfCFXBcFvWmSbci3gmJyLl2EAzCaZWsx8g==",
-            "dev": true,
             "dependencies": {
                 "@vue/reactivity": "3.2.39",
                 "@vue/shared": "3.2.39"
@@ -253,7 +257,6 @@
             "version": "3.2.39",
             "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.39.tgz",
             "integrity": "sha512-4G9AEJP+sLhsqf5wXcyKVWQKUhI+iWfy0hWQgea+CpaTD7BR0KdQzvoQdZhwCY6B3oleSyNLkLAQwm0ya/wNoA==",
-            "dev": true,
             "dependencies": {
                 "@vue/runtime-core": "3.2.39",
                 "@vue/shared": "3.2.39",
@@ -264,7 +267,6 @@
             "version": "3.2.39",
             "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.39.tgz",
             "integrity": "sha512-1yn9u2YBQWIgytFMjz4f/t0j43awKytTGVptfd3FtBk76t1pd8mxbek0G/DrnjJhd2V7mSTb5qgnxMYt8Z5iSQ==",
-            "dev": true,
             "dependencies": {
                 "@vue/compiler-ssr": "3.2.39",
                 "@vue/shared": "3.2.39"
@@ -276,8 +278,7 @@
         "node_modules/@vue/shared": {
             "version": "3.2.39",
             "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.39.tgz",
-            "integrity": "sha512-D3dl2ZB9qE6mTuWPk9RlhDeP1dgNRUKC3NJxji74A4yL8M2MwlhLKUC/49WHjrNzSPug58fWx/yFbaTzGAQSBw==",
-            "dev": true
+            "integrity": "sha512-D3dl2ZB9qE6mTuWPk9RlhDeP1dgNRUKC3NJxji74A4yL8M2MwlhLKUC/49WHjrNzSPug58fWx/yFbaTzGAQSBw=="
         },
         "node_modules/acorn": {
             "version": "7.4.1",
@@ -538,8 +539,12 @@
         "node_modules/csstype": {
             "version": "2.6.20",
             "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
-            "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==",
-            "dev": true
+            "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
+        },
+        "node_modules/debounce": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
+            "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
         },
         "node_modules/deepmerge": {
             "version": "4.2.2",
@@ -968,8 +973,7 @@
         "node_modules/estree-walker": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-            "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-            "dev": true
+            "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
         },
         "node_modules/fast-glob": {
             "version": "3.2.12",
@@ -1237,7 +1241,6 @@
             "version": "0.25.9",
             "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
             "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
-            "dev": true,
             "dependencies": {
                 "sourcemap-codec": "^1.4.8"
             }
@@ -1304,7 +1307,6 @@
             "version": "3.3.4",
             "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
             "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
-            "dev": true,
             "bin": {
                 "nanoid": "bin/nanoid.cjs"
             },
@@ -1369,8 +1371,7 @@
         "node_modules/picocolors": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-            "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-            "dev": true
+            "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
         },
         "node_modules/picomatch": {
             "version": "2.3.1",
@@ -1397,7 +1398,6 @@
             "version": "8.4.16",
             "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
             "integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==",
-            "dev": true,
             "funding": [
                 {
                     "type": "opencollective",
@@ -1671,7 +1671,6 @@
             "version": "0.6.1",
             "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
             "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-            "dev": true,
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -1680,7 +1679,6 @@
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
             "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-            "dev": true,
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -1688,8 +1686,7 @@
         "node_modules/sourcemap-codec": {
             "version": "1.4.8",
             "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
-            "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
-            "dev": true
+            "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
         },
         "node_modules/supports-preserve-symlinks-flag": {
             "version": "1.0.0",
@@ -1845,7 +1842,6 @@
             "version": "3.2.39",
             "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.39.tgz",
             "integrity": "sha512-tRkguhRTw9NmIPXhzk21YFBqXHT2t+6C6wPOgQ50fcFVWnPdetmRqbmySRHznrYjX2E47u0cGlKGcxKZJ38R/g==",
-            "dev": true,
             "dependencies": {
                 "@vue/compiler-dom": "3.2.39",
                 "@vue/compiler-sfc": "3.2.39",
@@ -1854,6 +1850,21 @@
                 "@vue/shared": "3.2.39"
             }
         },
+        "node_modules/vue3-popper": {
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/vue3-popper/-/vue3-popper-1.5.0.tgz",
+            "integrity": "sha512-xaEnx90YBnlSg5G2yWqm2DHWHg+DB99UVRp4VsyTF0QLXyHrqSuE1Xo5+sG0AQq/lBcrGMlk5NU5xE2MDLKViw==",
+            "dependencies": {
+                "@popperjs/core": "^2.9.2",
+                "debounce": "^1.2.1"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "peerDependencies": {
+                "vue": "^3.2.20"
+            }
+        },
         "node_modules/xtend": {
             "version": "4.0.2",
             "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
@@ -1877,8 +1888,7 @@
         "@babel/parser": {
             "version": "7.19.0",
             "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.19.0.tgz",
-            "integrity": "sha512-74bEXKX2h+8rrfQUfsBfuZZHzsEs6Eql4pqy/T4Nn6Y9wNPggQOqD6z6pn5Bl8ZfysKouFZT/UXEH94ummEeQw==",
-            "dev": true
+            "integrity": "sha512-74bEXKX2h+8rrfQUfsBfuZZHzsEs6Eql4pqy/T4Nn6Y9wNPggQOqD6z6pn5Bl8ZfysKouFZT/UXEH94ummEeQw=="
         },
         "@esbuild/linux-loong64": {
             "version": "0.15.7",
@@ -1961,6 +1971,11 @@
                 "fastq": "^1.6.0"
             }
         },
+        "@popperjs/core": {
+            "version": "2.11.6",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+            "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
+        },
         "@tailwindcss/forms": {
             "version": "0.5.3",
             "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.3.tgz",
@@ -1981,7 +1996,6 @@
             "version": "3.2.39",
             "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.39.tgz",
             "integrity": "sha512-mf/36OWXqWn0wsC40nwRRGheR/qoID+lZXbIuLnr4/AngM0ov8Xvv8GHunC0rKRIkh60bTqydlqTeBo49rlbqw==",
-            "dev": true,
             "requires": {
                 "@babel/parser": "^7.16.4",
                 "@vue/shared": "3.2.39",
@@ -1993,7 +2007,6 @@
             "version": "3.2.39",
             "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.39.tgz",
             "integrity": "sha512-HMFI25Be1C8vLEEv1hgEO1dWwG9QQ8LTTPmCkblVJY/O3OvWx6r1+zsox5mKPMGvqYEZa6l8j+xgOfUspgo7hw==",
-            "dev": true,
             "requires": {
                 "@vue/compiler-core": "3.2.39",
                 "@vue/shared": "3.2.39"
@@ -2003,7 +2016,6 @@
             "version": "3.2.39",
             "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.39.tgz",
             "integrity": "sha512-fqAQgFs1/BxTUZkd0Vakn3teKUt//J3c420BgnYgEOoVdTwYpBTSXCMJ88GOBCylmUBbtquGPli9tVs7LzsWIA==",
-            "dev": true,
             "requires": {
                 "@babel/parser": "^7.16.4",
                 "@vue/compiler-core": "3.2.39",
@@ -2021,7 +2033,6 @@
             "version": "3.2.39",
             "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.39.tgz",
             "integrity": "sha512-EoGCJ6lincKOZGW+0Ky4WOKsSmqL7hp1ZYgen8M7u/mlvvEQUaO9tKKOy7K43M9U2aA3tPv0TuYYQFrEbK2eFQ==",
-            "dev": true,
             "requires": {
                 "@vue/compiler-dom": "3.2.39",
                 "@vue/shared": "3.2.39"
@@ -2031,7 +2042,6 @@
             "version": "3.2.39",
             "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.39.tgz",
             "integrity": "sha512-vlaYX2a3qMhIZfrw3Mtfd+BuU+TZmvDrPMa+6lpfzS9k/LnGxkSuf0fhkP0rMGfiOHPtyKoU9OJJJFGm92beVQ==",
-            "dev": true,
             "requires": {
                 "@vue/shared": "3.2.39"
             }
@@ -2040,7 +2050,6 @@
             "version": "3.2.39",
             "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.39.tgz",
             "integrity": "sha512-HGuWu864zStiWs9wBC6JYOP1E00UjMdDWIG5W+FpUx28hV3uz9ODOKVNm/vdOy/Pvzg8+OcANxAVC85WFBbl3A==",
-            "dev": true,
             "requires": {
                 "@babel/parser": "^7.16.4",
                 "@vue/compiler-core": "3.2.39",
@@ -2053,7 +2062,6 @@
             "version": "3.2.39",
             "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.39.tgz",
             "integrity": "sha512-xKH5XP57JW5JW+8ZG1khBbuLakINTgPuINKL01hStWLTTGFOrM49UfCFXBcFvWmSbci3gmJyLl2EAzCaZWsx8g==",
-            "dev": true,
             "requires": {
                 "@vue/reactivity": "3.2.39",
                 "@vue/shared": "3.2.39"
@@ -2063,7 +2071,6 @@
             "version": "3.2.39",
             "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.39.tgz",
             "integrity": "sha512-4G9AEJP+sLhsqf5wXcyKVWQKUhI+iWfy0hWQgea+CpaTD7BR0KdQzvoQdZhwCY6B3oleSyNLkLAQwm0ya/wNoA==",
-            "dev": true,
             "requires": {
                 "@vue/runtime-core": "3.2.39",
                 "@vue/shared": "3.2.39",
@@ -2074,7 +2081,6 @@
             "version": "3.2.39",
             "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.39.tgz",
             "integrity": "sha512-1yn9u2YBQWIgytFMjz4f/t0j43awKytTGVptfd3FtBk76t1pd8mxbek0G/DrnjJhd2V7mSTb5qgnxMYt8Z5iSQ==",
-            "dev": true,
             "requires": {
                 "@vue/compiler-ssr": "3.2.39",
                 "@vue/shared": "3.2.39"
@@ -2083,8 +2089,7 @@
         "@vue/shared": {
             "version": "3.2.39",
             "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.39.tgz",
-            "integrity": "sha512-D3dl2ZB9qE6mTuWPk9RlhDeP1dgNRUKC3NJxji74A4yL8M2MwlhLKUC/49WHjrNzSPug58fWx/yFbaTzGAQSBw==",
-            "dev": true
+            "integrity": "sha512-D3dl2ZB9qE6mTuWPk9RlhDeP1dgNRUKC3NJxji74A4yL8M2MwlhLKUC/49WHjrNzSPug58fWx/yFbaTzGAQSBw=="
         },
         "acorn": {
             "version": "7.4.1",
@@ -2255,8 +2260,12 @@
         "csstype": {
             "version": "2.6.20",
             "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
-            "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==",
-            "dev": true
+            "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
+        },
+        "debounce": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
+            "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
         },
         "deepmerge": {
             "version": "4.2.2",
@@ -2483,8 +2492,7 @@
         "estree-walker": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-            "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-            "dev": true
+            "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
         },
         "fast-glob": {
             "version": "3.2.12",
@@ -2675,7 +2683,6 @@
             "version": "0.25.9",
             "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
             "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
-            "dev": true,
             "requires": {
                 "sourcemap-codec": "^1.4.8"
             }
@@ -2726,8 +2733,7 @@
         "nanoid": {
             "version": "3.3.4",
             "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-            "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
-            "dev": true
+            "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
         },
         "node-releases": {
             "version": "2.0.6",
@@ -2774,8 +2780,7 @@
         "picocolors": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-            "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-            "dev": true
+            "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
         },
         "picomatch": {
             "version": "2.3.1",
@@ -2793,7 +2798,6 @@
             "version": "8.4.16",
             "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
             "integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==",
-            "dev": true,
             "requires": {
                 "nanoid": "^3.3.4",
                 "picocolors": "^1.0.0",
@@ -2943,20 +2947,17 @@
         "source-map": {
             "version": "0.6.1",
             "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-            "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-            "dev": true
+            "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         },
         "source-map-js": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-            "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-            "dev": true
+            "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
         },
         "sourcemap-codec": {
             "version": "1.4.8",
             "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
-            "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
-            "dev": true
+            "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
         },
         "supports-preserve-symlinks-flag": {
             "version": "1.0.0",
@@ -3046,7 +3047,6 @@
             "version": "3.2.39",
             "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.39.tgz",
             "integrity": "sha512-tRkguhRTw9NmIPXhzk21YFBqXHT2t+6C6wPOgQ50fcFVWnPdetmRqbmySRHznrYjX2E47u0cGlKGcxKZJ38R/g==",
-            "dev": true,
             "requires": {
                 "@vue/compiler-dom": "3.2.39",
                 "@vue/compiler-sfc": "3.2.39",
@@ -3055,6 +3055,15 @@
                 "@vue/shared": "3.2.39"
             }
         },
+        "vue3-popper": {
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/vue3-popper/-/vue3-popper-1.5.0.tgz",
+            "integrity": "sha512-xaEnx90YBnlSg5G2yWqm2DHWHg+DB99UVRp4VsyTF0QLXyHrqSuE1Xo5+sG0AQq/lBcrGMlk5NU5xE2MDLKViw==",
+            "requires": {
+                "@popperjs/core": "^2.9.2",
+                "debounce": "^1.2.1"
+            }
+        },
         "xtend": {
             "version": "4.0.2",
             "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
diff --git a/package.json b/package.json
index 9a5a38e..749ecb0 100644
--- a/package.json
+++ b/package.json
@@ -19,5 +19,8 @@
         "tailwindcss": "^3.1.0",
         "vite": "^3.0.0",
         "vue": "^3.2.31"
+    },
+    "dependencies": {
+        "vue3-popper": "^1.5.0"
     }
 }
diff --git a/resources/js/Components/Links/NavLink.vue b/resources/js/Components/Links/NavLink.vue
index 8fc1fc8..0f4f260 100644
--- a/resources/js/Components/Links/NavLink.vue
+++ b/resources/js/Components/Links/NavLink.vue
@@ -3,7 +3,7 @@
 
     const props = defineProps(['active']);
     const classes = computed(() => props.active ?
-        'inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300 border-b-2 text-teal-400 border-teal-400' :
+        'inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300 border-b-2 text-defaultTeal border-defaultTeal' :
         'inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300 border-b-2 border-transparent'
 );
 
diff --git a/resources/js/Components/Members/Achievements/AchievementIcon.vue b/resources/js/Components/Members/Achievements/AchievementIcon.vue
index 2a8b443..6e9c9c7 100644
--- a/resources/js/Components/Members/Achievements/AchievementIcon.vue
+++ b/resources/js/Components/Members/Achievements/AchievementIcon.vue
@@ -1,9 +1,42 @@
-<script>
-
-</script>
-
 <template>
     <div class="m-5">
-        <div class="border-4 border-cyan-300 rounded-xl rotate-45 w-12 h-12"></div>
+        <Popper
+            placement="top"
+            hover="true"
+            arrow="true"
+            :content="description"
+            >
+            <div class="border-4 border-defaultTeal rotate-45 rounded-xl w-12 h-12"> </div>
+        </Popper>
     </div>
+
 </template>
+
+<style>
+:root {
+    --popper-theme-background-color: #333333;
+    --popper-theme-background-color-hover: #333333;
+    --popper-theme-text-color: #2dd4bf;
+    --popper-theme-border-width: 0px;
+    --popper-theme-border-style: solid;
+    --popper-theme-border-radius: 6px;
+    --popper-theme-padding: 20px;
+    --popper-theme-box-shadow: 0 6px 30px -6px rgba(0, 0, 0, 0.25);
+}
+</style>
+
+
+<script>
+    import { defineComponent } from "vue";
+    import Popper from "vue3-popper";
+
+    export default defineComponent({
+        props: ['description'],
+        components: {
+            Popper,
+        },
+    });
+</script>
+
+
+
diff --git a/resources/js/Components/Members/Achievements/LessonAchievement.vue b/resources/js/Components/Members/Achievements/LessonAchievement.vue
index 7b46ee5..9b65a88 100644
--- a/resources/js/Components/Members/Achievements/LessonAchievement.vue
+++ b/resources/js/Components/Members/Achievements/LessonAchievement.vue
@@ -1,16 +1,22 @@
 <script setup>
+    import { ref } from 'vue';
+
     const props = defineProps(['name']);
+    let hover = ref('invisible');
 </script>
 
 <template>
-    <button class="bg-black text-white font-extrabold rounded-l-2xl text-center py-12 sm:py-8 mb-4 mr-4
-                ease-in-out w-full z-10">
-                <!-- hover:scale-x-125 hover:-translate-x-6 hover:delay-75 duration-150 -->
-        <!-- <div class=" align-middle">
+    <button class="bg-card text-white font-extrabold rounded-l-2xl text-center py-12 sm:py-8 mb-4 mr-4
+                    ease-in-out w-full z-10"
+            @mouseover="hover = 'visible'"
+            @mouseleave="hover = 'invisible'">
+                <!--  -->
+        <div class="absolute align-middle mt-5 ml-5">
             {{ name }}
-        </div> -->
-        <div class="relative">
-            <div class="w-11 overflow-hidden float-right">
+        </div>
+        <!-- Triangle -> Selection -->
+        <div class="float-right" :class="hover">
+            <div class="w-11 overflow-hidden">
                 <div class="h-16 bg-teal-200 -rotate-45 transform origin-top-right"></div>
             </div>
         </div>
diff --git a/resources/js/Pages/Members/Achievements.vue b/resources/js/Pages/Members/Achievements.vue
index cf359d3..015ffdc 100644
--- a/resources/js/Pages/Members/Achievements.vue
+++ b/resources/js/Pages/Members/Achievements.vue
@@ -6,39 +6,39 @@
 </script>
 
 <template>
-    <div>
+    <div class="mt-12">
         <div class="display flex flex-wrap">
             <div class="border-r-8 border-teal-200 w-full sm:w-1/5 pl-4 z-20">
-                <LessonAchievement name="Larascape"/>
-                <LessonAchievement name="Coming Soon..." />
-                <LessonAchievement name="Coming Soon..." />
+                <LessonAchievement name="Larascape" class="align-bottom"/>
             </div>
             <div class="w-full sm:w-4/5">
                 <div class="w-full h-full flex flex-wrap justify-center">
-                    <AchievementIcon v-for="achievement in achievements"/>
+                    <div v-for="achievement in achievements">
+                        <AchievementIcon :description="achievement" />
+                    </div>
                 </div>
             </div>
         </div>
         <div class="mt-8 ml-4 pb-10">
             <p class="text-white text-4xl pb-5"> Activity </p>
-            <ol class="relative border-l-4 border-defaultCyan ml-4">
+            <ol class="relative border-l-4 border-defaultTeal ml-4">
                 <li class="mb-10 ml-4">
-                    <div class="absolute w-4 h-4 rounded-full mt-1.5 -left-2.5 bg-defaultCyan"> </div>
+                    <div class="absolute w-4 h-4 rounded-full mt-1.5 -left-2.5 bg-defaultTeal"> </div>
                     <div class="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500
                                 flex pl-4">
-                        <div class="bg-defaultCyan p-2 font-black text-card w-fit"> Larascape </div>
+                        <div class="bg-defaultTeal p-2 font-black text-card w-fit"> Larascape </div>
                         <div class="p-2 w-fit text-white font-black"> NOV 7 </div>
                     </div>
 
                     <!-- Will be a small icon -->
                     <div class="mt-3">
-                        <div class="absolute w-5 h-5 border-2 mt-1 border-defaultCyan bg-card rounded-full -left-3 "> </div>
+                        <div class="absolute w-5 h-5 border-2 mt-1 border-defaultTeal bg-card rounded-full -left-3 "> </div>
                         <h3 class="text-lg font-bold text-gray-900 dark:text-white pl-4">
                             Let there be light: You turned on the lights
                         </h3>
                     </div>
                     <div class="pt-4">
-                        <div class="absolute w-5 h-5 border-2 mt-1 border-defaultCyan bg-card rounded-full -left-3 "> </div>
+                        <div class="absolute w-5 h-5 border-2 mt-1 border-defaultTeal bg-card rounded-full -left-3 "> </div>
                         <h3 class="text-lg font-bold text-gray-900 dark:text-white pl-4">
                             Open sesame: Successfully opened the door
                         </h3>
diff --git a/tailwind.config.js b/tailwind.config.js
index b9140f9..0446c7c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -18,10 +18,14 @@ module.exports = {
                 orange: "#F8590A",
                 card: "#0F1A25",
                 cardText: "#7398BD",
-                defaultCyan: "#67e8f9",
+                defaultTeal: "#2dd4bf",
             },
         },
     },
-
+    variants: {
+        extend: {
+            visibility: ["group-hover"],
+        },
+    },
     plugins: [require("@tailwindcss/forms")],
 };

From 57859cdf12b031ad09c632ae9525c44ae702e96e Mon Sep 17 00:00:00 2001
From: Seth Sharp <sesharp@outlook.com>
Date: Wed, 9 Nov 2022 14:10:33 +1000
Subject: [PATCH 36/36] Components for timeline

---
 .../Members/Achievements/Continuation.vue     | 12 +++++++
 .../Members/Achievements/NewDate.vue          | 11 +++++++
 .../Members/Achievements/Timeline.vue         | 31 +++++++++++++++++++
 resources/js/Pages/Members/Achievements.vue   | 31 +++----------------
 4 files changed, 58 insertions(+), 27 deletions(-)
 create mode 100644 resources/js/Components/Members/Achievements/Continuation.vue
 create mode 100644 resources/js/Components/Members/Achievements/NewDate.vue
 create mode 100644 resources/js/Components/Members/Achievements/Timeline.vue

diff --git a/resources/js/Components/Members/Achievements/Continuation.vue b/resources/js/Components/Members/Achievements/Continuation.vue
new file mode 100644
index 0000000..dade0c7
--- /dev/null
+++ b/resources/js/Components/Members/Achievements/Continuation.vue
@@ -0,0 +1,12 @@
+<script setup>
+    const props = defineProps(['description']);
+</script>
+
+<template>
+    <div class="mt-8 bg-teal-900 rounded-lg w-fit px-4">
+        <div class="absolute w-5 h-5 border-2 mt-2.5 border-defaultTeal bg-card rounded-full -left-3 "> </div>
+        <h3 class="text-lg font-bold text-gray-900 dark:text-white p-2">
+            {{ description }}
+        </h3>
+    </div>
+</template>
diff --git a/resources/js/Components/Members/Achievements/NewDate.vue b/resources/js/Components/Members/Achievements/NewDate.vue
new file mode 100644
index 0000000..cf14195
--- /dev/null
+++ b/resources/js/Components/Members/Achievements/NewDate.vue
@@ -0,0 +1,11 @@
+<script setup>
+    const props = defineProps(['date']);
+</script>
+<template>
+    <div class="absolute w-4 h-4 rounded-full mt-4 -left-2.5 bg-defaultTeal"> </div>
+    <div class="text-md font-extrabold leading-none text-gray-400 dark:text-gray-500
+                flex pl-4">
+        <div class="bg-defaultTeal p-4 font-black text-card w-fit"> Larascape </div>
+        <div class="p-4 w-fit text-white font-black"> {{ date }} </div>
+    </div>
+</template>
diff --git a/resources/js/Components/Members/Achievements/Timeline.vue b/resources/js/Components/Members/Achievements/Timeline.vue
new file mode 100644
index 0000000..6d6a2ea
--- /dev/null
+++ b/resources/js/Components/Members/Achievements/Timeline.vue
@@ -0,0 +1,31 @@
+<script setup>
+    import NewDate from './NewDate.vue';
+    import Continuation from './Continuation.vue';
+
+    const props = defineProps(['achievements']);
+</script>
+
+<template>
+    <p class="text-white text-3xl pb-5"> Activity timeline </p>
+    <ol class="relative border-l-4 border-defaultTeal ml-4">
+        <li class="mb-10 ml-4">
+
+            <NewDate date="NOV 7"/>
+
+            <Continuation description="Let there be light: You turned on the lights"/>
+
+            <Continuation description="Open sesame: Successfully opened the door" />
+
+        </li>
+        <br/>
+        <li class="mb-10 ml-4">
+
+            <NewDate date="NOV 10" />
+
+            <Continuation description="Let there be light: You turned on the lights" />
+
+            <Continuation description="Open sesame: Successfully opened the door" />
+
+        </li>
+    </ol>
+</template>
diff --git a/resources/js/Pages/Members/Achievements.vue b/resources/js/Pages/Members/Achievements.vue
index 015ffdc..6f41f27 100644
--- a/resources/js/Pages/Members/Achievements.vue
+++ b/resources/js/Pages/Members/Achievements.vue
@@ -1,12 +1,13 @@
 <script setup>
     import AchievementIcon from '@/Components/Members/Achievements/AchievementIcon.vue';
     import LessonAchievement from '@/Components/Members/Achievements/LessonAchievement.vue';
+import Timeline from '@/Components/Members/Achievements/Timeline.vue';
 
     let achievements = new Array(30).fill('hello');
 </script>
 
 <template>
-    <div class="mt-12">
+    <div class="mt-16">
         <div class="display flex flex-wrap">
             <div class="border-r-8 border-teal-200 w-full sm:w-1/5 pl-4 z-20">
                 <LessonAchievement name="Larascape" class="align-bottom"/>
@@ -19,32 +20,8 @@
                 </div>
             </div>
         </div>
-        <div class="mt-8 ml-4 pb-10">
-            <p class="text-white text-4xl pb-5"> Activity </p>
-            <ol class="relative border-l-4 border-defaultTeal ml-4">
-                <li class="mb-10 ml-4">
-                    <div class="absolute w-4 h-4 rounded-full mt-1.5 -left-2.5 bg-defaultTeal"> </div>
-                    <div class="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500
-                                flex pl-4">
-                        <div class="bg-defaultTeal p-2 font-black text-card w-fit"> Larascape </div>
-                        <div class="p-2 w-fit text-white font-black"> NOV 7 </div>
-                    </div>
-
-                    <!-- Will be a small icon -->
-                    <div class="mt-3">
-                        <div class="absolute w-5 h-5 border-2 mt-1 border-defaultTeal bg-card rounded-full -left-3 "> </div>
-                        <h3 class="text-lg font-bold text-gray-900 dark:text-white pl-4">
-                            Let there be light: You turned on the lights
-                        </h3>
-                    </div>
-                    <div class="pt-4">
-                        <div class="absolute w-5 h-5 border-2 mt-1 border-defaultTeal bg-card rounded-full -left-3 "> </div>
-                        <h3 class="text-lg font-bold text-gray-900 dark:text-white pl-4">
-                            Open sesame: Successfully opened the door
-                        </h3>
-                    </div>
-                </li>
-            </ol>
+        <div class="mt-16 ml-4 pb-10">
+            <Timeline :achievements="achievements"/>
         </div>
     </div>
 </template>