Implementa barra lateral dos colaboradores

composer.json

@@ -16,7 +16,8 @@
         "laravel-frontend-presets/tall": "^1.7",
         "laravel/framework": "^7.0",
         "laravel/tinker": "^2.0",
-        "livewire/livewire": "^1.1"
+        "livewire/livewire": "^1.1",
+        "nothingworks/blade-svg": "^0.3.4"
     },
     "require-dev": {
         "facade/ignition": "^2.0",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "61a6d19307e7210b7b3f5262d1c1cdb4",
+    "content-hash": "31aff051abdf646ee48111e2bad56afe",
     "packages": [
         {
             "name": "asm89/stack-cors",
@@ -1502,6 +1502,56 @@
             ],
             "time": "2020-04-10T16:34:50+00:00"
         },
+        {
+            "name": "nothingworks/blade-svg",
+            "version": "v0.3.4",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/adamwathan/blade-svg.git",
+                "reference": "600269d60efe52bf9fc2cc610b21744cd69425df"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/adamwathan/blade-svg/zipball/600269d60efe52bf9fc2cc610b21744cd69425df",
+                "reference": "600269d60efe52bf9fc2cc610b21744cd69425df",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/filesystem": "^5.3|^6.0|^7.0",
+                "illuminate/support": "^5.3|^6.0|^7.0"
+            },
+            "require-dev": {
+                "mockery/mockery": "^0.9.5",
+                "phpunit/phpunit": "^5.5"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "BladeSvg\\BladeSvgServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "BladeSvg\\": "src/"
+                },
+                "files": [
+                    "src/helpers.php"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Adam Wathan",
+                    "email": "adam.wathan@gmail.com"
+                }
+            ],
+            "time": "2020-03-03T13:55:12+00:00"
+        },
         {
             "name": "opis/closure",
             "version": "3.5.3",

config/blade-svg.php

@@ -0,0 +1,72 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | SVG Path
+    |--------------------------------------------------------------------------
+    |
+    | This value is the path to the directory of individual SVG files. This
+    | path is then resolved internally. Please ensure that this value is
+    | set relative to the root directory and not the public directory.
+    |
+    */
+
+    'svg_path' => 'resources/svg',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Spritesheet Path
+    |--------------------------------------------------------------------------
+    |
+    | If you would rather have one spritesheet than a lot of individual SVG
+    | files, you may specify a path to a spritesheet. The SVG images are
+    | extracted from this spritesheet to be rendered out individually.
+    |
+    */
+
+    'spritesheet_path' => 'resources/svg/spritesheet.svg',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Spritesheet URL
+    |--------------------------------------------------------------------------
+    |
+    | If you don't want to embed the spritesheet directly in your markup and
+    | would rather reference an external URL, you can specify the path to
+    | the external spritesheet to use with this configuration option.
+    |
+    */
+
+    'spritesheet_url' => '',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Inline Rendering
+    |--------------------------------------------------------------------------
+    |
+    | This value will determine whether or not the SVG should be rendered inline
+    | or if it should reference a spritesheet through a <use> element.
+    |
+    | Default: true
+    |
+    */
+
+    'inline' => true,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Optional Class
+    |--------------------------------------------------------------------------
+    |
+    | If you would like to have CSS classes applied to your SVGs, you must
+    | specify them here. Much like how you would define multiple classes
+    | in an HTML attribute, you may separate each class using a space.
+    |
+    | Default: ''
+    |
+    */
+
+    'class' => '',
+];

public/mix-manifest.json

@@ -1,5 +1,4 @@
 {
-    "/js/app.js": "/js/app.js?id=c96c4e4417ad9efc981d",
-    "/css/app.css": "/css/app.css?id=e52cebc035b7296e5c1c",
-    "/js/app.js.map": "/js/app.js.map?id=8a4ea1e37c17db13cc91"
+    "/js/app.js": "/js/app.js",
+    "/css/app.css": "/css/app.css"
 }

resources/lang/pt-BR/sidebar.php

@@ -3,4 +3,8 @@
 return [
     'dashboard' => 'Painel',
     'profile' => 'Ver perfil',
+    'associates' => [
+        'title' => 'Associados',
+        'index' => 'Índice',
+    ],
 ];

resources/views/collaborators/dashboard.blade.php

@@ -1,4 +1,4 @@
-@extends('layouts.app')
+@extends('layouts.collaborators')
 
 @section('content')
     <div class="flex flex-col justify-center min-h-screen py-12 bg-gray-50 sm:px-6 lg:px-8">

resources/views/components/sidebar/desktop.blade.php

@@ -1,34 +0,0 @@
-<!-- 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>

resources/views/components/sidebar/item.blade.php

@@ -1,4 +1,8 @@
-<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">
+@props([
+    'current' => false,
+])
+
+<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 focus:outline-none focus:bg-green-700 transition ease-in-out duration-150 {{ $current ? 'bg-green-900' : '' }}">
 
     <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 }}

resources/views/components/sidebar/mobile.blade.php

@@ -1,45 +0,0 @@
-<!-- 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>

resources/views/components/sidebar/title.blade.php

@@ -0,0 +1,3 @@
+<span {{ $attributes }} class="block text-white font-semibold pt-2">
+    {{ $slot }}
+</span>

resources/views/components/sidebar/wrapper.blade.php

@@ -1,7 +0,0 @@
-<x-sidebar.mobile>
-    {{ $slot }}
-</x-sidebar.mobile>
-
-<x-sidebar.desktop>
-    {{ $slot }}
-</x-sidebar.desktop>

resources/views/layouts/app.blade.php

@@ -3,19 +3,86 @@
 @section('body')
     <div class="h-screen flex overflow-hidden bg-gray-100" x-data="{ sidebarOpen: false }" @keydown.window.escape="sidebarOpen = false">
 
-        <x-sidebar.wrapper>
+        <!-- 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">
+                            @yield('sidebar')
+                        </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>
 
-            <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>
+        <!-- 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">
+                        @yield('sidebar')
+                    </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>
 
-                {{ __('sidebar.dashboard') }}
-            </x-sidebar.item>
+                            <div class="ml-3">
+                                <p class="text-sm leading-5 font-medium text-white">
+                                    {{ auth()->user()->name }}
+                                </p>
 
-        </x-sidebar.wrapper>
+                                <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>
 
         <div class="flex flex-col w-0 flex-1 overflow-hidden">
 

resources/views/layouts/collaborators.blade.php

@@ -0,0 +1,23 @@
+@extends('layouts.app')
+
+@section('sidebar')
+    <x-sidebar.item href="{{ route('collaborators.dashboard') }}" :current="request()->route()->named('collaborators.dashboard')">
+        <x-slot name="icon">
+            @svg('home')
+        </x-slot>
+
+        {{ __('sidebar.dashboard') }}
+    </x-sidebar.item>
+
+    <x-sidebar.title>
+        {{ __('sidebar.associates.title') }}
+    </x-sidebar.title>
+
+    <x-sidebar.item href="{{ route('collaborators.dashboard') }}">
+        <x-slot name="icon">
+            @svg('database', 'fill-current')
+        </x-slot>
+
+        {{ __('sidebar.associates.index') }}
+    </x-sidebar.item>
+@endsection