From b604569abadf666d8f2a4b1e0477a2d0dee01a00 Mon Sep 17 00:00:00 2001
From: Guilherme Capanema <guilherme@capanema.me>
Date: Fri, 5 Jun 2020 17:13:24 -0300
Subject: [PATCH] =?UTF-8?q?Cria=20componentes=20para=20o=20menu=20lateral?=
 =?UTF-8?q?=20da=20aplica=C3=A7=C3=A3o?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/lang/pt-BR/sidebar.php              |  6 +++
 .../components/sidebar/desktop.blade.php      | 34 ++++++++++++++
 .../views/components/sidebar/item.blade.php   | 10 +++++
 .../views/components/sidebar/mobile.blade.php | 45 +++++++++++++++++++
 .../components/sidebar/wrapper.blade.php      |  7 +++
 resources/views/layouts/app.blade.php         | 36 ++++++++++++++-
 6 files changed, 137 insertions(+), 1 deletion(-)
 create mode 100644 resources/lang/pt-BR/sidebar.php
 create mode 100644 resources/views/components/sidebar/desktop.blade.php
 create mode 100644 resources/views/components/sidebar/item.blade.php
 create mode 100644 resources/views/components/sidebar/mobile.blade.php
 create mode 100644 resources/views/components/sidebar/wrapper.blade.php

diff --git a/resources/lang/pt-BR/sidebar.php b/resources/lang/pt-BR/sidebar.php
new file mode 100644
index 0000000..d3199dd
--- /dev/null
+++ b/resources/lang/pt-BR/sidebar.php
@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'dashboard' => 'Painel',
+    'profile' => 'Ver perfil',
+];
diff --git a/resources/views/components/sidebar/desktop.blade.php b/resources/views/components/sidebar/desktop.blade.php
new file mode 100644
index 0000000..cbca44b
--- /dev/null
+++ b/resources/views/components/sidebar/desktop.blade.php
@@ -0,0 +1,34 @@
+<!-- Static sidebar for desktop -->
+<div class="hidden md:flex md:flex-shrink-0">
+    <div class="flex flex-col w-64 border-r border-gray-200 bg-green-800">
+        <div class="h-0 flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
+            <div class="flex items-center flex-shrink-0 px-4">
+                <x-logo class="h-14 w-auto mx-auto" />
+            </div>
+            <!-- Sidebar component, swap this element with another sidebar if you like -->
+            <nav class="mt-5 space-y-1 flex-1 px-2 bg-green-800">
+                {{ $slot }}
+            </nav>
+        </div>
+
+        <div class="flex-shrink-0 flex border-t border-green-700 p-4">
+            <a href="/profile" class="flex-shrink-0 w-full group block">
+                <div class="flex items-center">
+                    <div>
+                        <img class="inline-block h-9 w-9 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
+                    </div>
+
+                    <div class="ml-3">
+                        <p class="text-sm leading-5 font-medium text-white">
+                            {{ auth()->user()->name }}
+                        </p>
+
+                        <p class="text-xs leading-4 font-medium text-green-300 group-hover:text-green-100 transition ease-in-out duration-150">
+                            {{ __('sidebar.profile') }}
+                        </p>
+                    </div>
+                </div>
+            </a>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/components/sidebar/item.blade.php b/resources/views/components/sidebar/item.blade.php
new file mode 100644
index 0000000..1dcd2a6
--- /dev/null
+++ b/resources/views/components/sidebar/item.blade.php
@@ -0,0 +1,10 @@
+<a {{ $attributes }} class="group flex items-center px-2 py-2 text-base lg:text-sm leading-6 lg:leading-5 font-medium text-white rounded-md bg-green-900 focus:outline-none focus:bg-green-700 transition ease-in-out duration-150">
+
+    <span class="mr-4 lg:mr-3 h-6 w-6 text-green-400 group-hover:text-green-300 group-focus:text-green-300 transition ease-in-out duration-150">
+        {{ $icon }}
+    </span>
+
+    {{ $slot }}
+
+</a>
+
diff --git a/resources/views/components/sidebar/mobile.blade.php b/resources/views/components/sidebar/mobile.blade.php
new file mode 100644
index 0000000..09b4ded
--- /dev/null
+++ b/resources/views/components/sidebar/mobile.blade.php
@@ -0,0 +1,45 @@
+<!-- Off-canvas menu for mobile -->
+<div x-show="sidebarOpen" class="md:hidden" style="display: none;">
+    <div class="fixed inset-0 flex z-40">
+        <div @click="sidebarOpen = false" x-show="sidebarOpen" x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state." x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0" style="display: none;">
+            <div class="absolute inset-0 bg-gray-600 opacity-75"></div>
+        </div>
+        <div x-show="sidebarOpen" x-description="Off-canvas menu, show/hide based on off-canvas menu state." x-transition:enter="transition ease-in-out duration-300 transform" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in-out duration-300 transform" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full" class="relative flex-1 flex flex-col max-w-xs w-full bg-green-800" style="display: none;">
+            <div class="absolute top-0 right-0 -mr-14 p-1">
+                <button x-show="sidebarOpen" @click="sidebarOpen = false" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar" style="display: none;">
+                    <svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                    </svg>
+                </button>
+            </div>
+            <div class="flex-1 h-0 pt-5 pb-4 overflow-y-auto">
+                <div class="flex-shrink-0 flex items-center px-4">
+                    <x-logo class="h-14 w-auto mx-auto" />
+                </div>
+                <nav class="mt-5 px-2 space-y-1">
+                    {{ $slot }}
+                </nav>
+            </div>
+            <div class="flex-shrink-0 flex border-t border-green-700 p-4">
+                <a href="/profile" class="flex-shrink-0 group block focus:outline-none">
+                    <div class="flex items-center">
+                        <div>
+                            <img class="inline-block h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
+                        </div>
+                        <div class="ml-3">
+                            <p class="text-base leading-6 font-medium text-white">
+                                {{ auth()->user()->name }}
+                            </p>
+                            <p class="text-sm leading-5 font-medium text-green-300 group-hover:text-green-100 group-focus:underline transition ease-in-out duration-150">
+                                {{ __('sidebar.profile') }}
+                            </p>
+                        </div>
+                    </div>
+                </a>
+            </div>
+        </div>
+        <div class="flex-shrink-0 w-14">
+            <!-- Force sidebar to shrink to fit close icon -->
+        </div>
+    </div>
+</div>
diff --git a/resources/views/components/sidebar/wrapper.blade.php b/resources/views/components/sidebar/wrapper.blade.php
new file mode 100644
index 0000000..6604743
--- /dev/null
+++ b/resources/views/components/sidebar/wrapper.blade.php
@@ -0,0 +1,7 @@
+<x-sidebar.mobile>
+    {{ $slot }}
+</x-sidebar.mobile>
+
+<x-sidebar.desktop>
+    {{ $slot }}
+</x-sidebar.desktop>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 6abf0d4..f0fdda6 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -1,5 +1,39 @@
 @extends('layouts.base')
 
 @section('body')
-    @yield('content')
+    <div class="h-screen flex overflow-hidden bg-gray-100" x-data="{ sidebarOpen: false }" @keydown.window.escape="sidebarOpen = false">
+
+        <x-sidebar.wrapper>
+
+            <x-sidebar.item href="{{ route('home') }}">
+                <x-slot name="icon">
+                    <svg stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l9-9 9 9M5 10v10a1 1 0 001 1h3a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1h3a1 1 0 001-1V10M9 21h6"></path>
+                    </svg>
+                </x-slot>
+
+                {{ __('sidebar.dashboard') }}
+            </x-sidebar.item>
+
+        </x-sidebar.wrapper>
+
+        <div class="flex flex-col w-0 flex-1 overflow-hidden">
+
+            <div class="md:hidden pl-1 pt-1 sm:pl-3 sm:pt-3">
+                <button @click.stop="sidebarOpen = true" class="-ml-0.5 -mt-0.5 h-12 w-12 inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:bg-gray-200 transition ease-in-out duration-150" aria-label="Open sidebar">
+                    <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+                    </svg>
+                </button>
+            </div>
+
+            <main class="flex-1 relative z-0 overflow-y-auto pt-2 pb-6 focus:outline-none md:py-6" tabindex="0" x-data="" x-init="$el.focus()">
+                <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
+                    @yield('content')
+                </div>
+            </main>
+
+        </div>
+
+    </div>
 @endsection