how to show menu links in same page in laravel

96 views Asked by At

My blade has two divs, the div right is the navbar, and in the left empty div, I want to display the blade that is selected in the navbar. I don't want to go to a new page, but to display it on the left side of the blade.

<div class="col-1" style="position: fixed;z-index: 3;width: 11%;background: yellowgreen; height:calc(100% - 100px);">
    <nav style="background: white;" class="nav">
        <ul>
            <li class="active {{ @Request::is('dashboard') ? 'active':''}}"><a href="{{ url('dashboard') }}"><i
                            class="fa fa-pie-chart"></i> DASHBOARD</a></li>
            <li class="{{ @Request::is('tasks') ? 'active':''}}"><a href="{{ url('REISTER') }}" class="menu_a"><i
                            class="fa fa-edit"></i> REISTER </a></li>
            <li></li>
        </ul>
    </nav>
</div>
<div clas="col-11" style="background:lightcyan;width: 89%;float:left;height:calc(100% - 100px);">
    <div class="p-4">
        /* Content of selected view in navbar
        for example:
        if selected navbar item is Dashboard display dashboard.blade.php
        else if selected navbar item is Register display register.blade.php
        */
    </div>
</div>
1

There are 1 answers

0
Khayam Khan On

Based on the comment

No,simply,my right navbar have two item ,dashboard and register,i want when dashboard clicked, dshboard blade opened in left side of page and when register clicked ,register blade opened instead of dashboard in left side

I will give you example structure that you can follow.

create a layout directory in Resources/view and inside layouts create a file called app.blade.php.

Inside the app.blade.app write your main HTML like common things for example,

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>@yield('title')</title>
    {{-- your styles --}}
</head>
<body>
{{-- your full page HTML including nav but exclude the page content of dashboard and register blade --}}
 <div>
     <div class="p-4"> 
         @yield('content')
     </div>

 </div>

{{-- your scripts if any --}}
</body>
</html>

the yield content will be responsible for rendering page contents here in this p-4 div. Then you can create your main pages like dashboard and register. For example dashboard you will do something like this

dashboard.blade.php

@extends('layouts.app')
@section('title', 'dashboard')

@section('content')
{{-- your dashboard html --}}
@endsection

I hope this will give you an idea and clear your stuff and if not comments I will make necessary changes