From 7b2955d4f07ed58285d5d9cb23d255a5f13f5c3f Mon Sep 17 00:00:00 2001
From: Stephen Cameron <stephen@cubedesigners.com>
Date: Wed, 29 May 2019 18:41:04 +0200
Subject: [PATCH] WIP #2739 @3

---
 composer.json                             |  1 +
 composer.lock                             | 52 +++++++++++++++-
 config/blade-svg.php                      | 72 +++++++++++++++++++++++
 public/images/search.svg                  |  4 ++
 resources/views/partials/header.blade.php | 16 ++++-
 5 files changed, 143 insertions(+), 2 deletions(-)
 create mode 100644 config/blade-svg.php
 create mode 100644 public/images/search.svg

diff --git a/composer.json b/composer.json
index 6072051..38dc970 100644
--- a/composer.json
+++ b/composer.json
@@ -16,6 +16,7 @@
     "require": {
         "cubist/cms-back": "dev-master",
         "lavary/laravel-menu": "^1.7",
+        "nothingworks/blade-svg": "^0.3.1",
         "spatie/laravel-blade-x": "^2.2"
     },
     "config": {
diff --git a/composer.lock b/composer.lock
index 8c3e185..1ff2a93 100644
--- a/composer.lock
+++ b/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": "598cd690dc62966911ca9a319210f278",
+    "content-hash": "ec05df446a42acac61cfec76f1e4a6c0",
     "packages": [
         {
             "name": "almasaeed2010/adminlte",
@@ -3107,6 +3107,56 @@
             ],
             "time": "2019-02-16T20:54:15+00:00"
         },
+        {
+            "name": "nothingworks/blade-svg",
+            "version": "v0.3.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/adamwathan/blade-svg.git",
+                "reference": "c4b450d946172e30533c51ed99c74f3d3f4089a1"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/adamwathan/blade-svg/zipball/c4b450d946172e30533c51ed99c74f3d3f4089a1",
+                "reference": "c4b450d946172e30533c51ed99c74f3d3f4089a1",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/filesystem": "^5.3",
+                "illuminate/support": "^5.3"
+            },
+            "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": "2018-10-21T21:02:25+00:00"
+        },
         {
             "name": "opis/closure",
             "version": "3.2.0",
diff --git a/config/blade-svg.php b/config/blade-svg.php
new file mode 100644
index 0000000..cc374d3
--- /dev/null
+++ b/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' => 'public/images',
+
+    /*
+    |--------------------------------------------------------------------------
+    | 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' => 'svg',
+];
diff --git a/public/images/search.svg b/public/images/search.svg
new file mode 100644
index 0000000..cb3dc93
--- /dev/null
+++ b/public/images/search.svg
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve" width="16" height="16">
+<path d="M16,14.6l-5-5c0.7-1,1.1-2.2,1.1-3.5C12.1,2.7,9.4,0,6.1,0S0,2.7,0,6.1s2.7,6.1,6.1,6.1c1.3,0,2.5-0.4,3.5-1.1
+	l5,5L16,14.6z M1.9,6.1c0-2.3,1.8-4.1,4.1-4.1s4.1,1.8,4.1,4.1s-1.8,4.1-4.1,4.1S1.9,8.3,1.9,6.1z"/>
+</svg>
diff --git a/resources/views/partials/header.blade.php b/resources/views/partials/header.blade.php
index 2ca342e..4e91f3b 100644
--- a/resources/views/partials/header.blade.php
+++ b/resources/views/partials/header.blade.php
@@ -9,8 +9,9 @@
             @include('partials.logo')
         </div>
 
-        <div class="nav mx-auto">
+        <div class="nav mx-auto flex items-center">
             @include('partials.nav')
+            @svg('search', 'nav-search-icon text-white fill-current hover:text-blue cursor-pointer')
         </div>
 
         <div class="cart text-right flex items-center">
@@ -20,3 +21,16 @@
     </div>
 
 </header>
+
+<div class="bg-white">
+    <content class="header-search-box py-3">
+        <form class="flex justify-between items-center">
+            <input class="pl-2 -ml-2 py-2 font-display text-2xl flex-grow appearance-none focus:outline-none focus:bg-grey-100"
+                   type="text"
+                   name="search"
+                   autocomplete="off"
+                   placeholder="{{ __('Search...') }}">
+            <button class="ml-4 p-3 -mr-3 appearance-none focus:outline-none focus:bg-grey-100">@svg('search', 'fill-current text-navy w-6 h-6')</button>
+        </form>
+    </content>
+</div>
-- 
2.39.5