My page was working fine but I worked on different parts then returned to find it with only plain texts.
The extends line is working perfect with all other pages
What I tried so far:
Removed BOM and made sure that file is UTF-8
made sure #extends at the very start of the file
tried adding html tags
checked for any invalid characters
deleted the page and copy-pasted the code in a new one
made sure that other blade files in the same directory are working
the same so no parenting problem or a directory referencing problem
My blade page code (edit.blade.php):
#extends('layouts.app')
<body>
#section('content')
<div class="row col-md-9 col-lg-9 col-sm-9 float-left">
<div class="container">
<form method = "post" action = "{{route('companies.update',[$company->id]) }}">
{{csrf_field()}}
{{-- //work around to post --}}
<input type ="hidden" name= "_method" value = "put">
<div class="form-group">
<label for="comapny-name">Name</label>
<input type="string" class="form-control" name='name' id="comapny-name" aria-describedby="emailHelp" placeholder="Enter company name" required value="{{$company->name}}">
<small id="helpText" class="form-text text-muted">We'll never share your informations with anyone else but Khalood because he is the website devloper :).</small>
</div>
<div class="form-group">
<label for="company-content">Description</label>
<textarea name='description'style = "resize: vertical" class="form-control autosize-target text-left" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter description" rows="5" >
{{$company->description}}</textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3 float-right">
<div class="sidebar-module">
<h4>Actions</h4>
<ol class="list-unstyled">
<li>View Companies</li>
<li>All Companies</li>
<li>Delete</li>
<li>Add new member</li>
</ol>
</div>
</div><!-- /.blog-sidebar -->
#endsection
</body>
Route code from the Controller:
public function edit($id)
{
$company = Company::where('id',$id )->first();
return view('companies.edit',['company'=>$company]);
}
Also the action line that transfer you to controller:
<li>Edit</li>
app.blade.php follows. It should be working fine because I'm extending it in many other pages and works fine.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
{{-- adding the new theme css nad bootstraps we kedh --}}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
{{-- <title>Projects Managment Portal</title> --}}
{{-- <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
Not working favicon
--}}
<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Bootstrap core CSS -->
<link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
{{-- Favicons css for the nav bar icons--}}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light navbar-laravel">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}"><i class="fab fa-product-hunt"></i>rojacker</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>
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
#else
<li class="nav-item">
<a class="nav-link" href="{{ url('/') }}"><i class="fas fa-home"></i> Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('companies.index') }}"><i class="far fa-building"></i> Companies</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('projects.index') }}"><i class="fas fa-project-diagram"></i> Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('tasks.index') }}"><i class="fas fa-tasks"></i> Tasks</a>
</li>
{{-- Admin Panel --}}
#if (Auth::user()->role_id == 1)
<li class="dropdown">
<a id="navbarDropdown" class="nav-link dropdown" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
Admin Panel <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="nav-link" href="{{ route('projects.index') }}"><i class="far fa-building"></i>Projects</a>
<a class="nav-link" href="{{ route('projects.index') }}"><i class="far fa-building"></i>Projects</a>
<a class="nav-link" href="{{ route('projects.index') }}"><i class="far fa-building"></i>Projects</a>
</div>
</li>
#endif
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre><i class="far fa-user-circle"></i>
{{ 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();"><i class="fas fa-door-open"></i>
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
#csrf
</form>
</div>
</li>
#endguest
</ul>
</div>
</div>
</div>
</nav>
<div class="container">
#include('partials.errors')
#include('partials.success')
<main class="py-4">
#yield('content')
</main>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
And web.php part containing companies part:
Route::middleware(['auth'])->group(function(){
// Creating Special Route to allow adding new project assigned to specific company id
Route::get('/projects/create/{company_id?}', 'ProjectsController#create');
Route::post('/projects/adduser/', 'ProjectsController#adduser')->name('projects.adduser');
Route::resource('companies','CompaniesController');
Route::resource('projects','ProjectsController');
Route::resource('roles','RolesController');
Route::resource('tasks','TasksController');
Route::resource('users','UsersController');
Route::resource('comments','CommentsController');
});
and link to image of page :
Page of the problem sceenshot
I FOUND THE SOLUTION !
it was in the app.blade.php when migrating to new design I (without noticing) got rid of the main css file and used only bootstrap file embedded in the new template, it works for the rest of the website ,but the edit page container (I don't know why specifically) needed the original native css file,just added it and it works like a charm!
Long Answer short, I was missing this line in the header of app.blade.php
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
Related
After creating an account and logging into it, I'm no longer seeing the Register or Login button anymore. Previously it was working fine. I think it happened after I tried adding in Auth::routes([
'register' => false,
]); Neither can I logout from my existing account. It's just stuck with 1 account. Please help me out to solve this. Thank you.
<!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">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="/css/main.css" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<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>
#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
#endif
</ul>
</div>
</div>
</nav>
<main class="py-4">
#yield('content')
</main>
</div>
</body>
</html>
I am trying to add forgot password function in laravel, when i click reset password link it shows error "Undefined variable: title (View:". I have defined title in controller but still its showing this error. seems that passed data is not availabe in the view but its availble in forgot view.
my ResetPasswordController.php is
class ResetPasswordController extends Controller
{
public function __construct()
{
}
public function reset(Request $request) {
$data['title'] = "Reset";
return view('auth.passwords.reset',$data);
}
}
Forgot Password Works fine which has same #layout.app which has this 'title' variable, but Reset is not working. Following is code for route
Route::get('/password/forgot', [ 'as' => 'forgot', 'uses' => 'ForgotPasswordController#reset']);
Route::get('/password/reset', [ 'as' => 'reset', 'uses' => 'ResetPasswordController#reset']);
and view is
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ $title }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600" 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::get('constants.APP_TITLE')}}
</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><a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a></li>
<li><a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a></li>
#else
<li><a class="nav-link" href="{{ route('users.index') }}">Manage Users</a></li>
<li><a class="nav-link" href="{{ route('roles.index') }}">Manage Role</a></li>
<li><a class="nav-link" href="{{ route('products.index') }}">Manage Product</a></li>
<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" 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">
<div class="container">
#yield('content')
</div>
</main>
</div>
</body>
</html>
this working in forgot password view but gives error in reset password view
I have also tried
$title = "Reset";
return view('auth.passwords.reset')->with('title', $title);
You have to use like this
return view('auth.passwords.reset',compact('data'));
You can pass the variable into the view like answer by A.A.Noman or else you can do it like this.
return view('auth.passwords.reset',['data' => $data] );
I have an issue with the #extends() function for Laravel. My views don't seem to extend the layout at all. I don't know how to fix this.
Here is the main layout file (it's located in views>layouts>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', 'Pet Me') }}</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">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Pet Me') }}
</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>
#if ($errors->any())
<div>
Errors:
<ul>
#foreach ($errors->all() as $error)
<li>{{$error}}</li>
#endforeach
</ul>
</div>
#endif
#if (session('message'))
<p><b>{{session ('message')}}</b></p>
#endif
<main class="py-4">
#yield('content')
</main>
</div>
</body>
</html>
and this is one of the views I am trying to have that extend app (located in views>home.blade.php):
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Dashboard</div>
<div class="card-body">
#if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
#endif
You are logged in!
</div>
</div>
</div>
</div>
</div>
#endsection
Your code is extending the layout correctly as it shows the content of the <nav> and also the content from your home.blade.php file. It seems to me that your CSS is not loading correctly.
I recommend you check in the console that the app.css file is loading correctly. If not please make sure that the app.css file is present on the following path from your the root directory of your Laravel project-
public > css > app.css
Also, it would be more helpful if you could share the screenshot of your console.
Laravel initialises the project with app.css file, placed in the public/css directory. This file is noting but a minified version of Bootstrap's CSS file (docs). In case your file is deleted for some reason. THere is how you can get it -
OPTION 1
Using the CDN of bootstrap's css file.
To do this replace <link href="{{ asset('/css/app.css') }}" rel="stylesheet">
with
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">. You can get the cdn from here.
OPTION 2
Download Bootstrap from here.
Unzip the downloaded folder.
Go to the css folder.
Copy the bootstrap.min.css and paste in public/css folder in your Laravel project.
Rename the pasted file to app.css.
Your css should load now.
One probable reason your app.css is maybe because you have executed the php artisan preset none command, which removes Laravel's default frontend scaffolding (docs).
Here is the head in master page where i added the link:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- this is the link -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="{{ asset('vendor/adminlte/vendor/bootstrap/dist/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ asset('vendor/adminlte/vendor/font-awesome/css/font-awesome.min.css') }}">
<link rel="stylesheet" href="{{ asset('vendor/adminlte/vendor/Ionicons/css/ionicons.min.css') }}">
#if(config('adminlte.plugins.select2'))
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css">
#endif
<link rel="stylesheet" href="{{ asset('vendor/adminlte/dist/css/AdminLTE.min.css') }}">
#if(config('adminlte.plugins.datatables'))
<link rel="stylesheet" href="//cdn.datatables.net/v/bs/dt-1.10.18/datatables.min.css">
#endif
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
Before After
And here is the header and NavBar in other page , note that i have extended master page. I couldn't bring all the codes properly.
<header class="main-header">
#if(config('adminlte.layout') == 'top-nav')
<nav class="navbar navbar-static-top">
<div class="container">
<div class="navbar-header">
<a href="{{ url(config('adminlte.dashboard_url', 'home')) }}" class="navbar-brand">
{!! config('adminlte.logo', '<b>Admin</b>LTE') !!}
</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<i class="fa fa-bars"></i>
</button>
</div>
<div class="collapse navbar-collapse pull-left" id="navbar-collapse">
<ul class="nav navbar-nav">
#each('adminlte::partials.menu-item-top-nav', $adminlte->menu(), 'item')
</ul>
</div>
#else
<div class="pull-left">
<a href="{{ url(config('adminlte.dashboard_url', 'home')) }}" class="logo" style="font-family: IRANSans;color: white; background-color: #109e7a">
<span class="logo-mini">{!! config('adminlte.logo_mini', '<b>A</b>LT') !!}</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg">{!! config('adminlte.logo', '<b>Admin</b>LTE') !!}</span>
</a>
</div>
<!-- Header Navbar -->
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
<span class="sr-only">{{ trans('adminlte::adminlte.toggle_navigation') }}</span>
</a>
#endif
<!-- Navbar Right Menu -->
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li style="font-family: IRANSans">
#if(config('adminlte.logout_method') == 'GET' || !config('adminlte.logout_method') && version_compare(\Illuminate\Foundation\Application::VERSION, '5.3.0', '<'))
<a href="{{ url(config('adminlte.logout_url', 'auth/logout')) }}">
<i class="fa fa-fw fa-power-off"></i> Exit
</a>
#else
<a href="#"
onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
Exit <i class="fa fa-fw fa-power-off"></i>
</a>
<form id="logout-form" action="{{ url(config('adminlte.logout_url', 'auth/logout')) }}" method="POST" style="display: none;">
#if(config('adminlte.logout_method'))
{{ method_field(config('adminlte.logout_method')) }}
#endif
{{ csrf_field() }}
</form>
#endif
</li>
</ul>
</div>
</nav>
#if(config('adminlte.layout') == 'top-nav')
</div>
#endif
</nav>
</header>
When i added this link, navbar Exit Button disappears and the height of header increases..
I'm new to html and css. Thank you for helping!
I need some help checking if there is anything wrong with my sidebar menu and also maybe the placing of where I put my sidebar inside my app.blade.php. Since every time I try to add it inside the app.blade.php, I will get a vue error which in this case I did not install vue or update laravel at all. In the past, my sidebar menu was working fine so the code should be okay, so I was thinking is it because of the positioning?
app.blade.php
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#include('layouts.sidebar')
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}" style="color: white">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<div id="center-text">
<ul class="nav navbar-nav navbar-center" id="nav-center">
<li>
<h3>#yield('title')</h3>
</li>
</ul>
</div>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#guest
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true" style="background-color:blue" style="color:white">
<b>{{ Auth::user()->name }}</b> <span class="caret"></span>
</a>
<ul class="dropdown-menu" style="background-color: blue">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();" style="background-color: blue" style="color: white">
<b>Logout</b>
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endguest
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
sidebar.blade.php
<html>
<head>
<title>SideBar Menu</title>
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
</head>
<body>
<div id="sidebar">
<ul>
<li>Summary</li>
<li>Deleted Records</li>
<li>Verification</li>
<li>Eval Test</li>
<li class="dropdown">
Edit User Information <span class="caret"></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Personal Information Edit</li>
<li><a href="{{ url('/edit0')}}" style="color: red">Driver License
</ul>
</li>
<li class="dropdown">
Evaluation <span class="caret"></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Evaluation</li>
<li>Shirt Size</li>
</ul>
</li>
</ul>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
</body>
</html>