Build home page and header dropdown

Author: khatabwedaa

src/stubs/resources/js/app.js

@@ -29,4 +29,7 @@ Vue.component('example-component', require('./components/ExampleComponent.vue').
 
 const app = new Vue({
     el: '#app',
+    data: {
+        dropdownOpen: false,
+    },
 });

src/stubs/resources/js/components/ExampleComponent.vue

@@ -1,9 +1,17 @@
 <template>
-    <div>
-        
+    <div class="flex items-center justify-center mt-16 mx-6 w-full">
+        <div class="p-6 bg-white shadow rounded-md max-w-xl w-full">
+            <h3 class="text-gray-700 text-lg">Example Component</h3>
+
+            <p class="text-gray-600 mt-3">I'm an example component.</p>
+        </div>
     </div>
 </template>
 
 <script>
-export default {}
-</script>
+    export default {
+        mounted() {
+            console.log('Component mounted.')
+        }
+    }
+</script>

src/stubs/resources/views/auth/passwords/confirm.blade.php

@@ -1,5 +1,32 @@
 @extends('layouts.app')
 
 @section('content')
-    {{-- WIP --}}
+<div class="flex items-center justify-center mt-16 mx-6">
+    <div class="p-6 max-w-sm w-full bg-white shadow rounded-md">
+        <h3 class="text-gray-700 text-xl text-center">{{ __('Confirm Password') }}</h3>
+
+         <p class="text-gray-600 mt-3">{{ __('Please confirm your password before continuing.') }}</p>
+
+        <form class="mt-4" method="POST" action="{{ route('password.confirm') }}">
+            @csrf
+
+            <label class="block mt-3">
+                <span class="text-gray-700 text-sm">{{ __('Password') }}</span>
+                <input id="password" type="password" class="form-input mt-1 block w-full rounded-md" name="password" required autocomplete="current-password">
+            
+                @error('password')
+                    <span class="text-sm text-red-500" role="alert">
+                        <strong>{{ $message }}</strong>
+                    </span>
+                @enderror
+            </label>
+
+            <div class="mt-6">
+                <button type="submit" class="w-full py-2 px-4 text-center bg-blue-600 rounded-md text-white text-sm hover:bg-blue-500 focus:outline-none">
+                    {{ __('Confirm Password') }}
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
 @endsection

src/stubs/resources/views/home.blade.php

@@ -2,7 +2,7 @@
 
 @section('content')
 <div class="flex items-center justify-center mt-16 mx-6">
-    <div class="p-6 bg-white shadow rounded-md">
+    <div class="p-6 bg-white shadow rounded-md max-w-xl w-full">
         <h3 class="text-gray-700 text-lg">{{ __('Dashboard') }}</h3>
 
 

src/stubs/resources/views/layouts/app.blade.php

@@ -32,11 +32,21 @@
                         <a href="{{ route('login') }}" class="text-gray-700 font-light mx-4 hover:underline">{{ __('Login') }}</a>
                         <a href="{{ route('register') }}" class="text-gray-700 font-light hover:underline">{{ __('Register') }}</a>
                     @else
-                        <a href="{{ route('logout') }}" class="text-gray-700 font-light mx-4 hover:underline" 
-                            onclick="event.preventDefault();
-                                document.getElementById('logout-form').submit();">
-                             {{ Auth::user()->name }}
-                        </a>
+                        <div  class="relative">
+                            <button @click="dropdownOpen = !dropdownOpen" class="relative z-10 block text-gray-700 font-light focus:outline-none">
+                                {{ Auth::user()->name }}
+                            </button>
+
+                            <div v-if="dropdownOpen" @click="dropdownOpen = false" class="fixed inset-0 h-full w-full z-10"></div>
+
+                            <div v-if="dropdownOpen" class="absolute right-0 mt-2 py-2 w-48 bg-white rounded-md shadow-xl z-20">
+                                <a href="{{ route('logout') }}"  class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-600 hover:text-white" 
+                                    onclick="event.preventDefault();
+                                    document.getElementById('logout-form').submit();">
+                                    {{ __('Logout') }}
+                                </a>
+                            </div>
+                        </div>
 
                         <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                             @csrf