Português
Passo a passo para instalar no seu projeto Laravel
Passo 1
Instale o Tailwind (cuidado: Tailwind modifica todo o estilo padrão do HTML)
npm install -D tailwindcss postcss autoprefixer
Passo 2
Instale o Tippy
npm install tippy.js
Passo 3
Baixe os arquivos para as pastas correspondentes:
-
resources/css:
theme-dark.css
theme-light.css
theme-neutral.css -
resources/js:
sidebar.js -
resources/views/components:
sidebar.blade.php
Passo 4
Importe os temas no seu resources/css/app.css
@import "./theme-neutral.css";
@import "./theme-dark.css";
@import "./theme-light.css";
Passo 5
Importe o JS da sidebar no seu resources/js/app.js
import './sidebar';
Passo 6
Importe o Sidebar logo abaixo da tag <body>
<body>
@include('components.sidebar')
Passo 7 (opcional para o tema neutral)
Escolha um tema:
<body class="theme-dark">
@include('components.sidebar')
English
Step-by-step guide to install it in your Laravel project
Step 1
Install Tailwind (warning: Tailwind overrides the default HTML styling)
npm install -D tailwindcss postcss autoprefixer
Step 2
Install Tippy
npm install tippy.js
Step 3
Download the files to their corresponding folders:
-
resources/css:
theme-dark.css
theme-light.css
theme-neutral.css -
resources/js:
sidebar.js -
resources/views/components:
sidebar.blade.php
Step 4
Import the themes inside resources/css/app.css
@iimport "./theme-neutral.css";
@iimport "./theme-dark.css";
@iimport "./theme-light.css";
Step 5
Import the sidebar script inside resources/js/app.js
import './sidebar';
Step 6
Include the Sidebar right below your <body> tag
<body>
@include('components.sidebar')
Step 7 (optional for the neutral theme)
Choose a theme:
<body class="theme-dark">
@include('components.sidebar')