Sidebar causing vue error laravel - php

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>

Related

Why is my Logout dropdown missing and I'm unable to logout or register a new account?

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>

data not passing into view

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] );

Blade is not Rendering Laravel

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">

Hi. i'm trying to use material design floating button. For this I added a CDN link. But when i added that, my navbar is disarranged

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!

Why "Dropdown" not working (with codes)

First Laravel Project.
The "built-in" app.blade.php (what made when we run php artisan make:auth) has this code:
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<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">
<!-- Scripts -->
<script>
window.Laravel = {!! json_encode([
'csrfToken' => csrf_token(),
]) !!};
</script>
</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">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ 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>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#if (Auth::guest())
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a 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_field() }}
</form>
</li>
</ul>
</li>
#endif
</ul>
</div>
</div>
</nav>
#yield('main')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
My master.blade.php has this code (I copied some from the app.blade.php)
<!DOCTYPE HTML>
<html class="html">
<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">
<!-- Scripts -->
<script>
window.Laravel = {!! json_encode([
'csrfToken' => csrf_token(),
]) !!};
</script>
<title>#yield('title')</title>
<link href="{{ asset('/css/style.css') }}" rel="stylesheet">
<link href="{{ asset('/css/bootstrap3/css/bootstrap.css') }}" rel="stylesheet">
<link href="media/favicon.ico" rel="icon" type="image/x-icon" />
<script type="text/javascript" src="{{ URL::asset('assets/js/jquery.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/js/bootstrap.min.js') }}"></script>
</head>
<body>
<?php Debugbar::info('Mesterkész'); ?>
<header>
<h1>#yield('title')</h1>
</header>
<article>
<section class="navbar">
<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">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ 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>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#if (Auth::guest())
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a 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_field() }}
</form>
</li>
</ul>
</li>
#endif
</ul>
</div>
</div>
</nav></section>
<section class="nav">
<table align=center border=1>
<tr>
<td><button class=button>Főoldal</button></td>
<td><button class=button>Leltár</button></td>
<td><button class=button>Eladási mód</button></td>
<td><button class=button>Beszállítók</button></td>
<td><button class=button>Keresés</button></td>
<td><button class=button>Statisztikák</button></td>
<td><button class=button>Beállítások</button></td>
<td><button class=button>Naplózás</button></td>
</tr>
<tr>
#section('submenu')
#show
#yield('content')
</tr>
</table>
</section>
<section class="main">
#section('main')
#show
#yield('content')
</section>
</article>
</body>
<footer id=footer>
//Footer will go there
</footer>
</html>
My question is: Why the Dropdowns are working in the app.blade.php and not in master.blade.php?
Someone answered, but than deleted somewhy his answer.
The problem was, that I forgot to copy this part:
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>

Categories