add breadcrumb

components/breadcrumb/breadcrumb.html

@@ -0,0 +1,47 @@
+<?php
+
+  switch($_GET['q']) {
+    case 'raccontare':
+        $levels[0] = array('raccontare', '/raccontare');
+    break;
+    case 'conoscere':
+        $levels[0] = array('conoscere', '/conoscere');
+    break;
+    case 'produrre':
+        $levels[0] = array('produrre', '/produrre');
+    break;
+    case 'acquistare':
+        $levels[0] = array('acquistare', '/acquistare');
+    break;
+
+    case 'due-cucchiai-di-salute':
+        $levels[0] = array('raccontare', '/raccontare');
+        $levels[1] = array('Due cucchiai di salute', '/due-cucchiai-di-salute');
+    break;
+    case 'le-variabili-del-gusto':
+        $levels[0] = array('raccontare', '/raccontare');
+        $levels[1] = array('Le variabili del gusto', '/le-variabili-del-gusto');
+    break;
+    case 'un-olio-da-strippare':
+        $levels[0] = array('raccontare', '/raccontare');
+        $levels[1] = array('Un olio da... strippare', '/un-olio-da-strippare');
+    break;
+  }
+?>
+
+<div class="component-breadcrumb">
+  <div class="container">
+    <ul class="items">
+      <li class="item">
+        <a class="link" href="/iolovolio">iolovolio</a>
+      </li>
+
+      <?php
+        foreach($levels as $level) {
+          echo '<li class="item"> <a class="link" href="'.$level[1].'">'.$level[0].'</a></li>';
+        }
+
+      ?>
+    </ul>
+  </div>
+</div>

components/breadcrumb/breadcrumb.js

@@ -0,0 +1,5 @@
+
+$(document).ready( () => {
+  console.log('Load component - breadcrumb')
+
+})

components/breadcrumb/breadcrumb.scss

@@ -0,0 +1,45 @@
+@import "../../src/scss/variables.scss";
+@import "../../src/scss/mixins.scss";
+
+.component-breadcrumb {
+  display: block;
+  padding-top: $header-height-mobile+60;
+  margin-bottom: 20px;
+
+  .items {
+    display: block;
+    list-style: none;
+    padding: 20px 0 15px 0;
+    border-bottom: 1px solid $black-alpha;
+
+    .item {
+      display: inline;
+      @include font-style($font-sans, 'regular', $font-18);
+      color: $gray;
+
+      .link {
+        color: $gray;
+      }
+
+      &:after {
+        content: '>';
+        padding: 0 4px;
+        font-size: $font-14;
+      }
+
+      &:last-of-type {
+        font-weight: bold;
+        &:after {
+          content: '';
+        }
+      }
+
+    }
+  }
+}
+
+@media (min-width: map-get($grid-breakpoints, 'md')) {
+  .component-breadcrumb {
+    padding-top: $header-height+60;
+  }
+}

components/buy/buy.html

@@ -0,0 +1,8 @@
+<?php
+  @include('components/breadcrumb/breadcrumb.php');
+?>
+
+<div class="component-buy">
+  <div class="row no-gutters">
+  </div>
+</div>

components/buy/buy.js

@@ -0,0 +1,5 @@
+
+$(document).ready( () => {
+  console.log('Load component - buy')
+
+})

components/buy/buy.scss

@@ -0,0 +1,7 @@
+@import "../../src/scss/variables.scss";
+@import "../../src/scss/mixins.scss";
+
+.component-buy {
+  padding-top: $header-height-mobile+60px;
+
+}

components/content/content-learn.html

@@ -1,3 +1,6 @@
+<?php
+  @include('components/breadcrumb/breadcrumb.php');
+?>
 
 <div class="component-content">
   <div class="container">

components/content/content-produce.html

@@ -1,3 +1,7 @@
+<?php
+  @include('components/breadcrumb/breadcrumb.php');
+?>
+
 
 <div class="component-content">
   <div class="container">

components/content/content-recount-1.html

@@ -1,3 +1,7 @@
+<?php
+  @include('components/breadcrumb/breadcrumb.php');
+?>
+
 <div class="component-content">
   <div class="container">
 

components/content/content-recount-2.html

@@ -1,3 +1,7 @@
+<?php
+  @include('components/breadcrumb/breadcrumb.php');
+?>
+
 <div class="component-content">
   <div class="container">
 

components/content/content-recount-3.html

@@ -1,3 +1,7 @@
+<?php
+  @include('components/breadcrumb/breadcrumb.php');
+?>
+
 <div class="component-content">
   <div class="container">
 

components/content/content-recount-index.html

@@ -1,3 +1,7 @@
+<?php
+  @include('components/breadcrumb/breadcrumb.php');
+?>
+
 <div class="component-content">
   <div class="container">
 

components/content/content-recount.html

@@ -1,3 +1,7 @@
+<?php
+  @include('components/breadcrumb/breadcrumb.php');
+?>
+
 <div class="component-content">
   <div class="container">
 

components/content/content.html

@@ -1,3 +1,7 @@
+<?php
+  @include('components/breadcrumb/breadcrumb.php');
+?>
+
 <div class="component-content">
   <div class="container">
 

components/content/content.scss

@@ -2,7 +2,7 @@
 @import "../../src/scss/mixins.scss";
 
 .component-content {
-  padding-top: $header-height-mobile+60px;
+  //padding-top: $header-height-mobile+60px;
 
   .title {
     display: block;
@@ -52,6 +52,6 @@
 
 @media (min-width: map-get($grid-breakpoints, 'md')) {
   .component-content {
-    padding-top: $header-height+60px;
+    //padding-top: $header-height+60px;
   }
 }

components/header/header.html

@@ -17,17 +17,17 @@
       </span>
 
       <ul class="menu">
-        <li class="item <?php if($_GET['q'] == 'learn') { echo "active";}?>">
-          <a href="/learn" class="label">conoscere</a>
+        <li class="item <?php if($_GET['q'] == 'conoscere') { echo "active";}?>">
+          <a href="/conoscere" class="label">conoscere</a>
         </li>
-        <li class="item <?php if($_GET['q'] == 'produce') { echo "active";}?>">
-          <a href="/produce" class="label">produrre</a>
+        <li class="item <?php if($_GET['q'] == 'produrre') { echo "active";}?>">
+          <a href="/produrre" class="label">produrre</a>
         </li>
-        <li class="item <?php if($_GET['q'] == 'buy') { echo "active";}?>">
-          <a href="/buy" class="label">acquistare</a>
+        <li class="item <?php if($_GET['q'] == 'acquistare') { echo "active";}?>">
+          <a href="/acquistare" class="label">acquistare</a>
         </li>
-        <li class="item <?php if($_GET['q'] == 'recount') { echo "active";}?>">
-          <a href="/recount" class="label">raccontare</a>
+        <li class="item <?php if($_GET['q'] == 'raccontare') { echo "active";}?>">
+          <a href="/raccontare" class="label">raccontare</a>
         </li>
       </ul>
     </nav>

pages/acquistare.ejs

@@ -0,0 +1,2 @@
+
+${require('../components/buy/buy.html')}

pages/index.ejs

@@ -1,18 +1,18 @@
 <?php
   switch($_GET['q']) {
-    case 'recount':
+    case 'raccontare':
     case 'due-cucchiai-di-salute':
     case 'le-variabili-del-gusto':
     case 'un-olio-da-strippare':
         $section_label = 'raccontare';
     break;
-    case 'learn':
+    case 'conoscere':
         $section_label = 'conoscere';
     break;
-    case 'produce':
+    case 'produrre':
         $section_label = 'produrre';
     break;
-    case 'buy':
+    case 'acquistare':
         $section_label = 'acquistare';
     break;
   }
@@ -34,6 +34,7 @@
     <main class="main-content">
 
       <?php
+      echo $_GET['q'];
         @include $_GET['q'].'.php';
       ?>
 

src/scss/main.scss

@@ -15,3 +15,5 @@
 @import "./components/sectionHeader/sectionHeader.scss";
 @import "./components/content/content.scss";
 @import "./components/footer/footer.scss";
+@import "./components/buy/buy.scss";
+@import "./components/breadcrumb/breadcrumb.scss";