You are currently viewing Como colocar sidebar do Bootstrap 5 no Laravel
sidebar

Como colocar sidebar do Bootstrap 5 no Laravel

Introdução

A sidebar é utilizada para colocar os links de navegação na lateral de um sistema.

Atualmente diversos sistemas web tem a navegação dessa forma, pois facilita para o usuário navegar pelas rotas da aplicação.

Nesse post vou mostrar como colocar a sidebar deste exemplo do bootstrap no blade template do Laravel.

Para isso, já tenho uma instalação padrão do Laravel, configurado com o bootstrap e autenticação.

O sidebar ficará dessa forma:

sidebar

Ajuste no template base

O template do Laravel, vem com um navbar superior e o conteúdo abaixo, e todos os outros layouts extendem desse layout base.

Vou mudar um pouco esse layout para ter uma separação de duas colunas, uma pequena na esquerda, que vai ficar a sidebar, e a parte maior na direita que vai ter o conteúdo.

Para isso, o bootstrap conta com um sistema de colunas, e facilita essa separação.

Vou mexer no arquivo resources/views/layouts/app.blade.php para adicionar essa separação das colunas:

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

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Scripts -->
    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
</head>
<body>
    <div id="app"> <!-- div principal -->
        <div class="row no-gutters"> <!-- div que conterá as colunas -->
            <div class="col-2" style="padding-right: 0"> <!-- primeira coluna -->
                ... aqui será incluído a sidebar
            </div>
            <div class="col-10" style="padding-left: 0; padding-right: 0"> <!-- segunda coluna -->
                <main class="py-4">
                    @yield('content')
                </main>
            </div>
        </div>

    </div>
</body>
</html>

Com esse código acima, é definido dentro da div com a class row, as duas colunas, uma no tamanho de 2, e a outra de 10, isso porque a grid de colunas do bootstrap pode ter no máximo 12.

Dentro da segunda coluna, ficará o conteúdo designado com o @yield(‘content’).

Criando o sidebar

Para criar o sidebar, utilizei o mesmo código do que mostrado no link acima.

E para colocar esse código no sistema, dentro do diretório layouts, criei um diretório chamado sidebar, e dentro o arquivo sidebar.blade.php, o caminho relativo fica resources/views/layouts/sidebar/sidebar.blade.php.

E dentro desse arquivo ficará o seguinte HTML:

<div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark" style="height: 100vh">
    <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
      <svg class="bi pe-none me-2" width="40" height="32"><use xlink:href="#bootstrap"></use></svg>
      <span class="fs-4">Menu</span>
    </a>
    <hr>
    <ul class="nav nav-pills flex-column mb-auto">
      <li class="nav-item">
        <a href="#" class="nav-link active" aria-current="page">
          <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#home"></use></svg>
          Home
        </a>
      </li>
      <li>
        <a href="#" class="nav-link text-white">
          <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"></use></svg>
          Dashboard
        </a>
      </li>
      <li>
        <a href="#" class="nav-link text-white">
          <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"></use></svg>
          Orders
        </a>
      </li>
      <li>
        <a href="#" class="nav-link text-white">
          <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"></use></svg>
          Products
        </a>
      </li>
      <li>
        <a href="#" class="nav-link text-white">
          <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#people-circle"></use></svg>
          Customers
        </a>
      </li>
    </ul>
  </div>

Agora a próxima etapa é incluir esse arquivo dentro do layout já criado no arquivo resources/views/layouts/app.blade.php:

<div class="col-2" style="padding-right: 0">
    @include('layouts.sidebar.sidebar')
</div>

Repare que o include é feito na primeira div, a que tem duas colunas.

Com isso agora o menu já será exibido corretamente, você pode utilizar e personalizar os links da forma que desejar.

Ajuste no template de autenticação

Será necessário realizar um ajuste para as rotas relacionadas a autenticação.

Isso porque para colocar o menu, fiz alterações no layout do app.blade.php, que é o layout padrão e é utilizado nas rotas de autenticação também.

Então se manter o código dessa forma, o sidebar irá aparecer também na tela de login, o que não é o certo.

Para resolver isso, criei um novo arquivo para ter o layout das rotas de autenticação resources/views/layouts/auth.blade.php.

Dentro desse arquivo terá um HTML simples, com um layout de uma coluna só, para deixar tudo centralizado:

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

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Scripts -->
    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
</head>
<body>
    <div id="app">
        <main class="py-4">
            @yield('content')
        </main>
    </div>
</body>
</html>

E agora, em todos os arquivos de visualização que estão dentro do diretório auth, trocar o extends do layout padrão para:

@extends('layouts.auth')

Com isso, essas rotas irão extender o layout apropriado para as telas de login.

Conclusão

Atenção, essa sidebar não foi feita com responsividade, caso precise de algo responsivo, ou que seja possível minimizar e maximizar, recomendo atualizar a estilização para fazer isso, ou buscar uma outra sidebar.

Este menu é muito útil, diversos sistemas utilizam para trazer essa navegação ao usuário.

O Laravel ajuda muito na construção dos layouts, ainda mais podendo integrar diretamente ao Bootstrap que é um dos maiores frameworks CSS.

Para ver outros canais onde o posto conteúdo veja os Links do Programando Soluções.

Referências

https://www.cloudways.com/blog/create-laravel-blade-layout/

https://getbootstrap.com/docs/5.2/examples/sidebars/

Este conteúdo te ajudou de alguma forma?