In Laravel how can I make a side bar when pressed goes to the page content link but still is the cur-CodePudding

I want to have the same mechanism like this https://www.w3schools.com/html/default.asp but in laravel application This is my code on routes/web.php

    Route::get('tutorial', function(){
    $tutorial = Tutorial::get();
        return view('tutorial.index')->with('tutorial', $tutorial);
    })->name('index-tutorial');

// Show one Tutorial by Id

Route::get('tutorial/{id}', function($id){
$tutorial = Tutorial::findOrFail($id);
return view('tutorial.show')->with('tutorial', $tutorial);
})->name('show-tutorial');

for my Blade template tutorial/show.blade.php

 <div >
@foreach($tutorial as $tutorial)
<h1>{{$tutorial->title}}</h1>
<p>{{$tutorial->title_description}}</p>
<p>{{$tutorial->title_lesson}}</p>
<div  role="group">
    <form  action="{{route('delete-tutorial', $tutorial->id)}}" method="POST">
        @csrf
        @method('DELETE')
        <button  name="Delete">Delete</button>
    </form>
    <form action="{{route('edit-tutorial', $tutorial->id)}}" method="GET">
        @csrf
    <button  name="Edit">Edit</button>
</form>
@endforeach
</div>

tutorial/index.blade.php

 <main >
 <div  
 style="width: 280px;">
<a href="/" >
  <svg  width="40" height="32"><use 
  xlink:href="#bootstrap"></use></svg>
  <span >MySql Lessons</span>
</a>
<hr>
<ul >
  @forelse($tutorial as $link)
  <li >
    <a href="{{route('show-tutorial', $link->id)}}" >
      <p >{{$link->title}}</p>
    </a>
  </li>
  @empty
    <p >No available lesson</p>
  @endforelse
</ul>
 </div>

I been researching a lot about having this mechanism

This one is different from other questions because i don't use controllers for this

CodePudding user response：

Have you tried using example tamplates from Bootstrap? Check here https://getbootstrap.com/docs/5.3/examples/ it's quite easy actually, you just need to copy the html code from bootstrap tamplate and tweak here and there. use @include to add your desired components, @yield for your desired content page. and use @extends and @section inside your content pages. roughly like this.

your main blade view

<!doctype html>
<html lang="en">
  <head>
   
  </head>

  <body>
    @include('partials.adminNav')
    <div >
        @include('partials.adminSideBar')
    </div>
    <div >
        @yield('container')
    </div>
  </body>
  @include('partials.footer')
</html>

for your side bar you just need to put links for your desired page

<nav id="sidebarMenu" >
      <div >
        <ul >
          <li >
            <a  aria-current="page" href="#">
              <span data-feather="home" ></span>
              //Home
            </a>
          </li>
          <li >
            <a  href="//your links/route for page content">
              <span data-feather="file" ></span>
              //links name
            </a>
          </li>
          <li >
            <a  href="//your links/route for page content">
              <span data-feather="edit" ></span>
              //Links name
            </a>
          </li>
        </ul>
      </div>
    </nav>

in like this in your content pages

@extends('layouts.adminMain')

@section('container')

<main >
    <div >
      // your content here
    </div>
</main>

@endsection

make use of the @include and @yield build in function. this way you'll have a consistent navbar/sidebar but can changes the content within. Hope this works for you :)

CodePudding user response：

Instead of using route closures, I manage to convert them to a TutorialController

Route::resource('tutorial', TutorialController::class);

for the aside bar routes/web

view()->composer('layout.sidebar', function($view){
$tutorial = Tutorial::all();
$view->with('links', $tutorial);
});

layout/sidebar.blade.php

<main >
<div  
 style="width: 280px;">
  <a href="/" >
    <svg  width="40" height="32"><use 
   xlink:href="#bootstrap"></use></svg>
    <span >MySql Lessons</span>
  </a>
  <hr>
  <ul >
    @forelse($links as $link)
    <li >
      <a href="{{ route('tutorial.show', $link->id)}}" >
        <p >{{$link->title}}</p>
      </a>
    </li>
    @empty
      <p >No available lesson</p>
    @endforelse
  </ul>
</div>
</main>

in my index.blade and show.blade you can add @include('layout.sidebar')

@extends('layout.app')

 @section('title', "Show Tutorials")

 @section('content')


 @include('layout.sidebar')
 <div >
<h1>{{$tutorial->title}}</h1>
<p>{{$tutorial->title_description}}</p>
<p>{{$tutorial->title_lesson}}</p>
<div  
        role="group">
    <form  action="{{route('tutorial.destroy', $tutorial- 
       >id)}}" method="POST">
        @csrf
        @method('DELETE')
        <button  name="Delete">Delete</button>
    </form>
    <form action="{{route('tutorial.edit', $tutorial->id)}}" method="GET">
        @csrf
    <button  name="Edit">Edit</button>
</form>

 </div>

  @endsection