SilverGround's avatar

Create a sidebar menu with fontawesome icon and menu name

Hi there, I would like to create a dynamic sidebar menu with a fontawesome icon on the left and the menu's name next to it.

So far i've created a table named "sidebar_nav"

public function up()
    {
        Schema::create('sidebar_nav', function (Blueprint $table) {
            $table->id();
            $table->string('navText');
            $table->string('iconLink');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('sidebar_nav');
    }
}

I think I need a controller to manage my menu and return it to a view so then I can choose what Icon and Text I want to add to my menu but I currently have no idea on how to do this.

Can someone help me ?

0 likes
4 replies
MarianoMoreyra's avatar

Hi @silverground

It's not clear to me what is the part you don't know how to do.

  • You don't know how to make a sidebar accesible to all your pages?
  • Don't know how to fetch data from a database within your Controller and render it on a page?
  • Don't know how to dynamically render the menu based on the text and link fetched from database?

In any case, if you don't know any of those questions, or all three of them, you may want to take a look at Laravel from Scratch course:

https://laracasts.com/series/laravel-6-from-scratch

If you know the basics but don't know how to create a layout to render the same sidebar in any page, maybe you can skip to the "Layout Pages" episode:

https://laracasts.com/series/laravel-6-from-scratch/episodes/14

Hope this helps!

1 like
SilverGround's avatar

Hi, I've watched the videos and it turns out that the episode 18 is the one I need but I don't succeed in displaying my menu on my view.

So far I now have MIGRATION :

 public function up()
    {
        Schema::create('menus', function (Blueprint $table) {
            $table->id();
            $table->string('navText'); 
            $table->string('icon'); 
            $table->string('href'); 
            $table->timestamps();
        });
    }

CONTROLLER :

 <?php

namespace App\Http\Controllers;

use DB;
use Illuminate\Http\Request;

class MenuController extends Controller
{
    public function showMenus()
    {
        $menus = DB::table('menus')->get();
        return view("dashboard", ['menus' => $menus]);
    }
}

VIEW :

@inject ('menus', 'App\Http\Controllers\MenuController')
{{$menus['NavText']}}

<div id="sidebar">
    <ul>
        @foreach ($menus as $menu)
        <li>
            <a href="{{$menus -> href }}" <i class="{{ $menu -> icon }}">{{ $menu -> navText }}</i>
            </a>
        </li>
        @endforeach
    </ul>
</div>

In my database I have


ID     navText 		 icon 			 href 
1	Dashboard	fas fa-archway	/dashboard
Tray2's avatar

The structure of this is wrong

<a href="{{$menus -> iconLink }}" <i class="{{ $menu -> icon }}">{{ $menu -> navText }}</i></a>

It should probably be

<a href="{{$menu -> iconLink }}"><i class="{{ $menu -> icon }}"></i>{{ $menu -> navText }}</a>

I don't like the spaces either

<a href="{{$menu->iconLink }}"><i class="{{ $menu->icon }}"></i>{{ $menu->navText }}</a>
SilverGround's avatar

Alright thanks for answering so fast !

Despite these changes, my View "admin-dashboard"

<x-app-layout>
    <x-slot name="header_content">
        <h1>Admin Dashboard</h1>
        <div class="section-header-breadcrumb">
            <div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
            <div class="breadcrumb-item"><a href="#">Layout</a></div>
            <div class="breadcrumb-item">Default Layout</div>

        </div>
    </x-slot>
</x-app-layout>

doesn't display my menu component :

@inject ('menus', 'App\Http\Controllers\MenuController')

<div id="sidebar">
    <ul>
        @foreach ($menus as $menu)
        <li>
            <a href="{{$menu->iconLink }}"><i class="{{ $menu->icon }}"></i>{{ $menu->navText }}</a>
        </li>
        @endforeach
    </ul>
</div>

There are no errors messages displayed either

1 like

Please or to participate in this conversation.