I want to include this Summernote rich text editor in Laravel Jetstream Livewire Alpine.
I tried to extend the possibility to include additional Javascript and CSS by using the #stack() directive, right in the layouts/app.blade.php file:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
#stack('css')
#livewireStyles
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body class="font-sans antialiased">
<x-jet-banner />
<div class="min-h-screen bg-gray-100">
#livewire('navigation-menu')
<!-- Page Heading -->
#if (isset($header))
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
#endif
<!-- Page Content -->
<main>
{{ $slot }}
</main>
</div>
#stack('modals')
#stack('js')
#livewireScripts
</body>
</html>
Inside my blade view I included the summernote js and css CDN links as follows:
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Dashboard') }}
</h2>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
<form action="{{ route('post') }}" method="post">
#csrf
<label class="block text-gray-700 text-sm font-bold mb-2" for="fuente">
Your text
</label>
<div id="summernote">
<textarea name="fuente" id="fuente" class="w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none" rows="4"></textarea>
</div>
<button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 mt-6 border border-blue-700 rounded">
Send
</button>
</form>
</div>
</div>
</div>
</x-app-layout>
#push('css')
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
#endpush
#push('js')
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-lite.min.js"></script>
<script>
$('#summernote').summernote({
placeholder: 'Hello stand alone ui',
tabsize: 2,
height: 120,
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['view', ['fullscreen', 'codeview', 'help']]
]
});
</script>
#endpush
However, the editor is not loading. If I load the source code of the blade view, I don't see the Summernote javascript.
What am I missing? How do I make it work?
My bad.
I've realized I have to include the #stack() directives inside the <x-app-layout> tag. For example, just before the end of the </x-app-layout>.
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Dashboard') }}
</h2>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
<form action="{{ route('post') }}" method="post">
#csrf
<label class="block text-gray-700 text-sm font-bold mb-2" for="fuente">
Your text
</label>
<div id="summernote">
<textarea name="fuente" id="fuente" class="w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none" rows="4"></textarea>
</div>
<button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 mt-6 border border-blue-700 rounded">
Send
</button>
</form>
</div>
</div>
</div>
#push('css')
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
#endpush
#push('js')
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-lite.min.js"></script>
<script>
$('#summernote').summernote({
placeholder: 'Hello stand alone ui',
tabsize: 2,
height: 120,
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['view', ['fullscreen', 'codeview', 'help']]
]
});
</script>
#endpush
</x-app-layout>
And finally, that fixed it.
Related
I am using Laravel 6 and working on a blade.php file. Also, I'm using tailwindCss and tailwindUi in parts of my code. I have a layout file with the main nav bar working, on the other pages when I #section('content') nothing is being outputted and isn't showing in the browser. If I exclude the #section the code is passed through the browser but then pushes my nav bar down which isn't good. Hoping its a silly mistake but if you have had this issue and know of a fix please do share.
LAYOUT File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.0.1/dist/alpine.js" defer></script>
<title>#yield('title')</title>
</head>
<div>
<nav x-data="{ open: false }" #keydown.window.escape="open = false" class="bg-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center h-24">
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-10 w-10" src="/images/startup.svg" alt="icon" />
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline">
Home
Contact
Blog
</div>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<button #click="open = !open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path :class="{'hidden': open, 'inline-flex': !open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
<path :class="{'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div :class="{'block': open, 'hidden': !open}" class="hidden md:hidden">
<div class="px-2 pt-2 pb-3 sm:px-3">
Home
Contact
Blog
</div>
<div class="pt-4 pb-3 border-t border-gray-700">
<div class="flex items-center px-5">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="/images/0.jpeg" alt="My Picture" />
</div>
<div class="ml-3">
<div class="text-base font-medium leading-none text-white">Paolo Trulli</div>
<div class="mt-1 text-sm font-medium leading-none text-gray-400">paolo.g.trulli#gmail.com</div>
</div>
</div>
INDEX File (blog)
#extends('layout')
#section('title', 'Blog')
#section('content')
<div class='blog-form'>
<h1>My Blog</h1>
<h3>A place where I create posts on random things that interest me</h3>
<form action="/blog" method="post">
<input type="text" name="title" autocomplete="off">
#csrf
<button>Add Blog Post</button>
</form>
<p style="color: red">#error('title') {{ $message }} #enderror</p>
<ul>
#forelse ($blogs as $blog)
<li>{{ $blog->title }}</li>
#empty
<li><h3>No Blog Posts Yet</h3></li>
#endforelse
</ul>
</div>
#endsection
HomeController
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class HomeController extends Controller
{
public function index()
{
return view ('/home');
}
public function about()
{
return view ('/about');
}
public function contact()
{
return view ('/contact');
}
}
WEB Route
use App\Mail\WelcomeMail;
Route::get('/email', function() {
return new WelcomeMail();
});
Route::get('/home', 'HomeController#index');
Route::get('/about', 'HomeController#about');
Route::get('/contact', 'HomeController#contact');
Route::get('/blog', 'BlogController#index');
Route::post('/blog', 'BlogController#store');
Route::get('/subscribers', 'SubscriberController#index');
Route::get('/subscribers/create', 'SubscriberController#create');
Route::post('/subscribers', 'SubscriberController#store');
Route::get('/subscribers/{subscriber}', 'SubscriberController#show');
Route::get('/subscribers/{subscriber}/edit', 'SubscriberController#edit');
Route::put('/subscribers/{subscriber}', 'SubscriberController#update');
Route::delete('/subscribers/{subscriber}', 'SubscriberController#destroy');
You need to use #yield('content') in your layout file.
Layout.blade.php
<html>
<body>
<nav>
</nav>
#yield('content')
</body>
</html>
now you can use #section('content') in extened files.
index.blade.php
#extends('layout')
#section('content')
<div class="">
...
...
</div>
#endsection
I am using Laravel 6 and my login doesn't work.
I started with php artisan make:auth and tested the login. It worked. Then I made a custom login page. My problem is that my custom login page doesn't work. When I click login it just reloads the page without doing anything. Can I debug it somehow? Here is my code of login.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'CMS Buddy') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="https://kit.fontawesome.com/fd2bd3b3b6.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="limiter">
<div class="container-login100" style="background-image: url('img/background_login.jpg');">
<div class="wrap-login100 p-t-190 p-b-30">
<form class="login100-form validate-form" method="POST" action="{{ route('login') }}">
#csrf
<div class="login100-form-avatar">
<img src="img/logo.png" alt="Logo">
</div>
<span class="login100-form-title p-t-20 p-b-45">
CMS Buddy
</span>
<div class="wrap-input100 validate-input m-b-10 {{ $errors->has('email') ? ' is-invalid': '' }}"
data-validate="E-Mail address is required">
<input class="input100" type="text" name="email" placeholder="{{ __('E-Mail Address') }}">
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-user"></i>
</span>
#if ($errors->has('email'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('email') }}</strong>
</span>
#endif
</div>
<div class="wrap-input100 validate-input m-b-10" data-validate="Password is required">
<input class="input100" type="password" name="{{ __('Password') }}"
placeholder="{{ __('Password') }}">
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-lock"></i>
</span>
#if ($errors->has('password'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('password') }}</strong>
</span>
#endif
</div>
<div class="container-login100-form-btn p-t-10">
<button type="submit" class="login100-form-btn">
{{ __('Login') }}
</button>
</div>
<div class="text-center w-full p-t-25 p-b-230">
#if (Route::has('password.request'))
<a class="txt1" href="{{ route('password.request') }}">
{{ __('Forgot Your Password?') }}
</a>
#endif
</div>
</form>
</div>
</div>
</div>
<script src="{{ asset('js/login/select2.min.js') }}"></script>
<script src="{{ asset('js/login/main.js') }}"></script>
</body>
</html>
I think your password cause these. The validation will return probably "The password field is required".
Mispelled capital "P" for password name attribute.
Change these:
<input class="input100" type="password" name="{{ __('Password') }}" placeholder="{{ __('Password') }}">
To these:
<input class="input100" type="password" name="{{ __('password') }}" placeholder="{{ __('Password') }}">
The page doesn't reload, it's redirecting back for failed validation....
Why?
Because you're missing the password field in your form
Change
name="{{ __('Password') }}"
to
name="password"
The __() function is useful to localize or translate text for your users, however the name attribute is not rendered* in the browser so it doesn't need to be localized..
Laravel expects the form to post email and password
I'm using the carousel component provided here: https://mdbootstrap.com/docs/jquery/javascript/carousel/
I want my pictures to be centered and in original size but instead, they're being stretched to fit the whole screen:
This is the code (I used the same random image for demonstration):
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.css" rel="stylesheet">
<style>
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
width: 100%;
}
</style>
</head>
<body>
<!-- Start your project here-->
<!--Card-->
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://cdn.pixabay.com/photo/2018/06/14/13/04/nature-3474826_960_720.jpg"
alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://cdn.pixabay.com/photo/2018/06/14/13/04/nature-3474826_960_720.jpg"
alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://cdn.pixabay.com/photo/2018/06/14/13/04/nature-3474826_960_720.jpg"
alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--/.Card-->
<!-- Start your project here-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
</body>
</html>
The actual images which are used in the code are too big... and they've used the w-100 class on <img> which is why
you see the images shrunk (in case of mdBootstrap's default images)
you see the images stretched (in case of your images)
I removed the file to show how a smaller image without being stretched will look... check the snippet below:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block " src="https://cdn.pixabay.com/photo/2018/06/14/13/04/nature-3474826_960_720.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block " src="https://www.akberiqbal.com/JumboMob.jpg" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block " src="https://mdbootstrap.com/img/Photos/Slides/img%20(33).jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block " src="https://mdbootstrap.com/img/Photos/Slides/img%20(31).jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
i recently learning about Laravel using vue...
I'm using Laravel 5.8,
Bulma 0.7.5,
Buefy 0.8.1, and
Vue
My issue is that when I'm logged-out the Buefy CSS works fines but ones I log-in, it stops working...
Here's are a few screenshots so you can see what I'm talking about...
Here's what it looks like when I'm logged-out
https://imgur.com/inOTzgv
and here's what it looks like when I'm log-in
https://imgur.com/Qgq52d4
Here's my app.js
require('./bootstrap');
window.Vue = require('vue');
import Buefy from 'buefy';
Vue.use(Buefy);
var app = new Vue({
el: '#app',
data() {
return {
auto_password: true,
password_options: 'keep'
}
}
});
and here's
My cpanel.blade.php
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'EthicallySpeaking') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">-->
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
#yield('styles')
</head>
<body>
<div id="app">
#include('inc.navbar')
#include('inc.messages')
#include('inc.side_navbar_cpanel')
<div id="app" class="cpanel-dashboard-area flex-container">
#yield('content')
</div>
</div>
#yield('scripts')
</body>
</html>
and here's the edit.php form that I'm having the issue with...
#extends('layouts.cpanel')
#section('content')
<section class="section">
<div class="container">
<div class="columns m-l-10">
<div class="column is-10">
<h1 class="title">Edit User Profile</h1>
</div><!-- end column is-10 -->
</div><!-- end columns -->
<hr/>
<div class="columns">
<div class="column">
<form action="{{route('users.update', $user->id)}}" method="POST">
{{method_field ('PUT')}}
{{csrf_field()}}
<div class="field">
<label for="name" class="label">Name</label>
<p class="control">
<input type="text" class="input" name="name" id="name" value="{{$user->name}}">
</p>
</div>
<div class="field">
<label for="email" class="label">Email</label>
<p class="control">
<input type="text" class="input" name="email" id="email" value="{{$user->email}}">
</p>
</div>
<div class="field">
<label for="password" class="label">Password</label>
<div class="field">
<b-radio v-model="password_options" native-value="keep" name="permission_type">Do Not Change Password</b-radio>
</div>
<div class="field">
<b-radio v-model="password_options" native-value="auto" name="permission_type">Auto-Generate New Password</b-radio>
</div>
<div class="field">
<b-radio v-model="password_options" native-value="manual" name="permission_type">Manually Set New Password</b-radio>
<p class="control">
<input type="text" class="input" name="password" id="password" v-if="password_options == 'manual'" placeholder="Manually give a password to this user">
</p>
</div>
</div>
<button class="button is-success m-t-20">Edit User</button>
</form>
</div><!-- end column is-10 -->
</div><!-- end columns -->
</div><!-- end container -->
</section>
#endsection
I wanted to know if anyone know why this is happing?
m new to vue and after installing it in Laravel, I make a new component but its not showing in browser,and the browser gives warning in developers tools, in developers tools > console it shows:
app.js:37960 [Vue warn]: Failed to mount component:
template or render function not defined.
found in
---> <TaskForm>
<Root>
warn # app.js:37960
app.js:46384 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
is there any problem in code or if any solution to resolve this issue?
component:
<template>
<div class="col-md-8">
<div class="card card-default">
<div class="card-header">Task Form</div>
<div class="card-body">
<form action="./api/task" method="POST">
<div class="form-group">
<input type="text" name="title" placeholder="Task title" class="form-control">
</div>
<div class="form-group">
<input type="submit" value="Add Task" class="btn btn-info">
</div>
</form>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
app.js:
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component',
require('./components/ExampleComponent.vue').default);
Vue.component("task-form", require('./components/TaskForm.vue'));
const app = new Vue({
el: '#app'
});
this is app.blade.php: app.blade.php:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light navbar-laravel">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
#guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
#if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
#endif
#else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
#csrf
</form>
</div>
</li>
#endguest
</ul>
</div>
</div>
</nav>
<main class="py-4">
#yield('content')
</main>
</div>
</body>
</html>