From: Stephen Cameron <stephen@cubedesigners.com>
Date: Wed, 29 May 2019 14:55:55 +0000 (+0200)
Subject: Menu and breadcrumb links. WIP #2731 @4
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=f2bca3d7055ae75ff143e00a2417227c86db12ce;p=pmi.git

Menu and breadcrumb links. WIP #2731 @4
---

diff --git a/app/Http/Middleware/GenerateMenus.php b/app/Http/Middleware/GenerateMenus.php
index 6a7b289..f72be3b 100644
--- a/app/Http/Middleware/GenerateMenus.php
+++ b/app/Http/Middleware/GenerateMenus.php
@@ -15,6 +15,7 @@ class GenerateMenus
      */
     public function handle($request, Closure $next)
     {
+        // Hard coded menu structure until we have dynamic data from the CMS
         $nav_items = [
 
             'Products' => [
@@ -25,12 +26,12 @@ class GenerateMenus
                     [
                         'title' => 'Capteurs',
                         'links' => [
-                            'Force' => 'force',
-                            'Couple' => 'couple',
-                            'Déplacement' => 'deplacement',
-                            'Accélération' => 'acceleration',
-                            'Inclinaison' => 'inclinaison',
-                            'Pression' => 'pression',
+                            'Force' => 'products/force',
+                            'Couple' => 'products/couple',
+                            'Déplacement' => 'products/deplacement',
+                            'Accélération' => 'products/acceleration',
+                            'Inclinaison' => 'products/inclinaison',
+                            'Pression' => 'products/pression',
                         ],
                     ],
 
@@ -38,12 +39,12 @@ class GenerateMenus
                     [
                         'title' => 'Systèmes de mesure',
                         'links' => [
-                            'Roue dynamométrique' => 'roue',
-                            'Contrôle de fermeture d’ouvrants' => 'cdfdo',
-                            'Contrôle de taraudage' => 'cdt',
-                            'Collecteurs tournant' => 'ct',
-                            'Télémétrie' => 'telemetrie',
-                            'Acquisition de données' => 'add',
+                            'Roue dynamométrique' => 'products/roue',
+                            'Contrôle de fermeture d’ouvrants' => 'products/cdfdo',
+                            'Contrôle de taraudage' => 'products/cdt',
+                            'Collecteurs tournant' => 'products/ct',
+                            'Télémétrie' => 'products/telemetrie',
+                            'Acquisition de données' => 'products/add',
                         ],
                     ],
                 ],
@@ -54,12 +55,12 @@ class GenerateMenus
                 'submenus' => [
                     [
                         'links' => [
-                            'Énergie' => 'energie',
-                            'Aéronautique' => 'aero',
-                            'Ferroviaire' => 'ferroviaire',
-                            'Automobile' => 'auto',
-                            'Génie civil' => 'civil',
-                            'Industrie' => 'industrie',
+                            'Énergie' => 'solutions/energie',
+                            'Aéronautique' => 'solutions/aero',
+                            'Ferroviaire' => 'solutions/ferroviaire',
+                            'Automobile' => 'solutions/auto',
+                            'Génie civil' => 'solutions/civil',
+                            'Industrie' => 'solutions/industrie',
                         ]
                     ],
                 ],
@@ -71,58 +72,80 @@ class GenerateMenus
                     [
                         'title' => null,
                         'links' => [
-                            'Location' => 'location',
-                            'Calibration' => 'calibration',
-                            'Développement OEM' => 'developpement-oem',
-                            'Custom Design' => 'custom-design',
-                            'Formation' => 'formation',
+                            'Location' => 'services/location',
+                            'Calibration' => 'services/calibration',
+                            'Développement OEM' => 'services/developpement-oem',
+                            'Custom Design' => 'services/custom-design',
+                            'Formation' => 'services/formation',
                         ],
                     ],
                 ],
             ],
-            'Support' => 'support',
-            'Société' => 'company',
-            'Contact' => 'contact',
+            'Support' => ['url' => 'support'],
+            'Société' => [
+                'url' => 'societe',
+                'submenus' => [
+                    [
+                        'links' => [
+                            'Qui sommes nous ?' => 'societe/a-propos',
+                            'Actualités' => 'societe/actualites',
+                        ]
+                    ]
+                ],
+            ],
+            'Contact' => ['url' => 'contact'],
         ];
 
 
         \Menu::make('primary', function ($menu) use ($nav_items) {
 
-            // Todo: figure out how we can have the home link included in the breadcrumb menu without needing to add it to the menu like this. Also find a way to stop the home breaking when this link is not in the menu...
-            $menu->add('Home', '');
-
             foreach ($nav_items as $nav_label => $nav_item) {
 
+                $parent = $menu->add($nav_label, $nav_item['url']);
+
                 // Handle items with submenus
-                if (is_array($nav_item)) {
-                    $parent = $menu->add($nav_label, $nav_item['url']);
+                if (isset($nav_item['submenus'])) {
 
                     foreach ($nav_item['submenus'] as $submenu_data) {
 
+                        // Create an empty sub-element that will serve as a wrapper for the submenu(s)
+                        $wrapper = $parent->raw('')->attr(['class' => 'nav-submenu-wrapper']);
+
+                        // Some submenus have a title element
+                        if (isset($submenu_data['title'])) {
+                            $wrapper->raw($submenu_data['title'])->attr(['class' => 'nav-submenu-title']);
+                        }
+
                         foreach ($submenu_data['links'] as $label => $url) {
-                            $parent->add($label, $url);
+                            $wrapper->add($label, $url);
                         }
+                    }
+                }
 
-                        /*
-                        $parent->add($submenu_data['title'] ?? 'SUBMENU');
+            }
 
-                        $parent->group(['prefix' => $nav_item['url']], function ($submenu) use ($submenu_data) {
+        });
 
-                            foreach ($submenu_data['links'] as $label => $url) {
-                                $submenu->add($label, $url);
-                            }
+        // Also make a menu for the breadcrumbs - this one is simpler and doesn't have the submenu headings
+        \Menu::make('breadcrumbs', function ($menu) use ($nav_items) {
 
-                        });
-                        */
-                    }
+            // Start with home link
+            $menu = $menu->add('Home', '');
 
-                // Simple nav items with no sub-menus
-                } else {
-                    $menu->add($nav_label, $nav_item);
-                }
-            }
+            foreach ($nav_items as $nav_label => $nav_item) {
+
+                $parent = $menu->add($nav_label, $nav_item['url']);
 
+                // Handle items with submenus
+                if (isset($nav_item['submenus'])) {
 
+                    foreach ($nav_item['submenus'] as $submenu_data) {
+                        foreach ($submenu_data['links'] as $label => $url) {
+                            $parent->add($label, $url);
+                        }
+                    }
+                }
+            }
         });
 
         return $next($request);
diff --git a/resources/styles/components/breadcrumbs.styl b/resources/styles/components/breadcrumbs.styl
new file mode 100644
index 0000000..bb8f0f5
--- /dev/null
+++ b/resources/styles/components/breadcrumbs.styl
@@ -0,0 +1,26 @@
+.breadcrumbs
+  @apply flex items-center
+
+  a
+    @apply text-grey-dark
+
+    &:hover
+      @apply text-blue
+
+  &-item
+    @apply pr-8 relative
+
+    a
+      &:after
+        content: ''
+        display: inline-block
+        width: 8px
+        height: @width
+        border-width: 1px 1px 0 0
+        border-style: solid
+        border-color: theme('colors.grey.dark')
+        transform: rotate(45deg)
+        position: absolute
+        right: 0.8em
+        top: 50%
+        margin-top: -3px
diff --git a/resources/styles/components/navigation.styl b/resources/styles/components/navigation.styl
index ab9b3f5..3a54646 100644
--- a/resources/styles/components/navigation.styl
+++ b/resources/styles/components/navigation.styl
@@ -1,9 +1,16 @@
+// Submenu fade in effect
+@keyframes submenu-fade-in
+  from
+    opacity: 0
+  to
+    opacity: 1
+
 .nav-primary
   @apply flex mx-auto px-10
 
   // Top level items
   > li
-    @apply relative py-4
+    @apply relative py-5
 
     &.active
       @apply text-blue
@@ -12,8 +19,9 @@
       @apply mr-10
 
     &:hover
-      .nav-submenu
-        display: block
+      > ul // First level submenus
+        display: flex // Set to flex so we can have 2 menus side-by-side in submenu
+        animation: submenu-fade-in 0.3s
 
   // Top level links
   > li > a
@@ -23,15 +31,17 @@
       color: theme('colors.blue')
 
 
-.nav-submenu
-  @apply bg-white text-base shadow-2xl
-  display: none
-  position: absolute
-  top: 100%
-  left: 0
-  padding: 1em 0
+  // Submenus
+  > li > ul // Only target 1st level of submenu items
+    @apply bg-white text-base shadow-2xl
+    display: none
+    position: absolute
+    top: 100%
+    left: 0
+    padding: 1em 0
 
-  // Submenu items
+// Submenu items
+.nav-submenu-wrapper ul
   li
     &:hover, &.active
       a
@@ -61,7 +71,10 @@
 
   // Set transition for links - same for both elements
   a, a:before
-    transition: transform 0.3s ease-out
+    transition: transform 0.2s ease-out
 
+.nav-submenu-title
+  @apply bg-grey-100 text-lg text-navy px-6 py-5 -mt-4 mb-2
+  min-width: 285px // Make sure both columns are a bit closer in width
 
 
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 0f5c33f..21fbebe 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -11,11 +11,13 @@
     @include('partials.header')
 
     @section('breadcrumbs')
-        <full-width padding="pt-1v pb-1v">
-            <content>
-                {!! Menu::get('primary')->crumbMenu()->asDiv(['class' => 'breadcrumbs flex'], [], ['class' => 'pr-4']) !!}
-            </content>
-        </full-width>
+        @if(Menu::get('breadcrumbs')->active())
+            <full-width padding="pt-1v pb-1v">
+                <content>
+                        {!! Menu::get('breadcrumbs')->crumbMenu()->asDiv(['class' => 'breadcrumbs'], [], ['class' => 'breadcrumbs-item']) !!}
+                </content>
+            </full-width>
+        @endif
     @show
 
     <main class="flex-grow">
diff --git a/resources/views/pages/solutions.blade.php b/resources/views/pages/solutions.blade.php
deleted file mode 100644
index 2544a5c..0000000
--- a/resources/views/pages/solutions.blade.php
+++ /dev/null
@@ -1,11 +0,0 @@
-@extends('layouts/app')
-
-@section('content')
-    <full-width>
-        <content>
-            <text-block title="Products">
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. At consequatur consequuntur deserunt impedit in ipsum, laboriosam molestias mollitia odio omnis, quaerat quas quisquam veritatis. A doloremque illum laborum obcaecati quo.
-            </text-block>
-        </content>
-    </full-width>
-@endsection
diff --git a/resources/views/pages/test.blade.php b/resources/views/pages/test.blade.php
new file mode 100644
index 0000000..0fe371f
--- /dev/null
+++ b/resources/views/pages/test.blade.php
@@ -0,0 +1,31 @@
+@extends('layouts/app')
+
+@section('content')
+
+    @php
+        $name = last(explode('/', $name))
+    @endphp
+
+    <full-width padding="pb-4v">
+        <content>
+            <columns>
+                <column>
+                    <img src="{{ asset('storage/uploads/images/home-wing.jpg') }}" alt="">
+                </column>
+
+                <column>
+                    <text-block class="pt-2v" title_class="h1 overlap-left" :title="isset($name) ? ucfirst($name) : 'Lorem ipsum'">
+
+                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aperiam aspernatur corporis dicta dolore, earum est et eum eveniet, harum minima non, pariatur perspiciatis possimus ratione repudiandae veniam voluptas. Aspernatur eius esse laudantium nostrum nulla?</p>
+
+                        <p>Sit amet, consectetur adipisicing elit. Aut cum dolores ratione vel. Alias exercitationem obcaecati quae! Accusantium alias, aspernatur atque autem beatae commodi delectus dolores esse, exercitationem facere illo itaque iusto libero magni natus nemo obcaecati odit officia quia quibusdam reiciendis soluta suscipit unde ut veritatis, voluptate voluptatibus.</p>
+
+                        <p><a href="#">En savoir plus</a></p>
+                    </text-block>
+
+                </column>
+            </columns>
+        </content>
+
+    </full-width>
+@endsection
diff --git a/resources/views/partials/nav.blade.php b/resources/views/partials/nav.blade.php
index d8e0e70..ae53b83 100644
--- a/resources/views/partials/nav.blade.php
+++ b/resources/views/partials/nav.blade.php
@@ -1 +1 @@
-{!! Menu::get('primary')->asUl(['class' => 'nav-primary'], ['class' => 'nav-submenu']) !!}
+{!! Menu::get('primary')->asUl(['class' => 'nav-primary']) !!}
diff --git a/routes/web.php b/routes/web.php
index 9b5d4fb..b5c85a5 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -15,6 +15,11 @@ Route::get('/', function () {
     return view('pages.home');
 });
 
+// Temporary catch all for testing nav and breadcrumbs
+Route::get('/{name}', function ($name) {
+    return view('pages.test', compact('section','name'));
+})->where(['name' => '.*']);
+
 /** CATCH-ALL ROUTE for Backpack/PageManager - needs to be at the end of your routes.php file  **/
 Route::get('{page}/{subs?}', ['uses' => 'PageController@index'])
     ->where(['page' => '^((?!admin).)*$', 'subs' => '.*']);