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:
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/