Menu and breadcrumb links. WIP #2731 @4

diff --git a/app/Http/Middleware/GenerateMenus.php b/app/Http/Middleware/GenerateMenus.php
index 6a7b2899a87020da2fe45bf78bd209869581f6a6..f72be3b7c3d38911a3b291c7338d7abc275d226f 100644 (file)
--- 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 (file)
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 ab9b3f5c25861dac27d5492d8a780087a22f7f1b..3a5464639cc287e9d9adc331f57a8cc4460c0571 100644 (file)
--- 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 0f5c33f19decdacefdc54f0fe53b3d5c7d342e51..21fbebe2a5c48886316e1b4a30b961f0f0861cef 100644 (file)
--- 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 (file)
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 (file)
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 d8e0e70ef751ea99518bb806895fe05b80a0c5b6..ae53b8326dde9fe6a6e513c7bacc1baa6e820e21 100644 (file)
--- 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 9b5d4fbbb84e39614b3260b3a2390b61f5d7a3dd..b5c85a5d226f136e80e5ad058aa99a899843308c 100644 (file)
--- 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' => '.*']);