Merge pull request #5 from opdavies/active-link

Make sponsor us link active

app/config/sculpin_site.yml

@@ -5,3 +5,16 @@ eventbrite:
 
 papercall:
     url: https://www.papercall.io/drupalcamp-bristol-2019
+
+main_menu:
+    - title: Tickets
+      url: '%eventbrite.url%'
+      pattern: ~
+
+    - title: Submit a session
+      url: '%papercall.url%'
+      pattern: ~
+
+    - title: Sponsor us
+      url: /sponsor-us
+      pattern: /^\/sponsor-us\/?/

package.json

@@ -12,7 +12,8 @@
     "browser-sync-webpack-plugin": "2.0.1",
     "cross-env": "^5.2.0",
     "laravel-mix": "^4.0.14",
-    "laravel-mix-purgecss": "^4.1.0"
+    "laravel-mix-purgecss": "^4.1.0",
+    "tailwindcss-list-reset": "^1.0.0"
   },
   "dependencies": {
     "postcss-nested": "^4.1.2",

source/_includes/banner.html.twig

@@ -8,10 +8,17 @@
 
         <nav role="navigation" aria-labelledby="block-dcb2017-main-menu-menu" id="block-dcb2017-main-menu" class="block block-menu navigation menu--main">
             <h2 class="visually-hidden" id="block-dcb2017-main-menu-menu">Main navigation</h2>
-            <ul class="menu">
-                <li class="menu-item"><a href="{{ site.eventbrite.url }}">Tickets</a></li>
-                <li class="menu-item"><a href="{{ site.papercall.url }}">Submit a session</a></li>
-                <li class="menu-item"><a href="/sponsor-us">Sponsor us</a></li>
+            <ul class="tw-list-reset tw-flex tw-flex-wrap tw-justify-center tw--ml-8">
+                {% for item in site.main_menu %}
+                    <li class="tw-mb-2 tw-mx-4 md:tw-m-0 md:tw-ml-8">
+                        <a
+                            class="tw-uppercase tw-no-underline hocus:tw-text-green-600 {{ item.pattern and page.url matches item.pattern ? 'tw-text-green-600' : 'tw-text-black' }}"
+                            href="{{ item.url }}"
+                        >
+                            {{ item.title }}
+                        </a>
+                    </li>
+                {% endfor %}
             </ul>
         </nav>
     </div>

tailwind.config.js

@@ -20,6 +20,7 @@ module.exports = {
   },
   plugins: [
     require('tailwindcss-interaction-variants')(),
+    require('tailwindcss-list-reset')(),
     require('tailwindcss-spaced-items')({ values: defaultTheme.spacing }),
   ],
 }

yarn.lock

@@ -6746,6 +6746,15 @@ tailwindcss-interaction-variants@^2.0.0-beta.1:
   dependencies:
     lodash "^4.17.11"
 
+tailwindcss-list-reset@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/tailwindcss-list-reset/-/tailwindcss-list-reset-1.0.0.tgz#982da1bf826283a2ecd30d6e7c8207b3e5240e1f"
+  integrity sha512-TSoZNV+Yub0XxGI/NkqD3JIdc8+3CGEhwHC7gcnnPhOjFa80NDEjt8YL8dHm8L/m83Loj43Sscahl5MC039bRg==
+  dependencies:
+    lodash "^4.17.11"
+    postcss "^7.0.14"
+    tailwindcss "^1.0.0-beta.4"
+
 tailwindcss-spaced-items@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/tailwindcss-spaced-items/-/tailwindcss-spaced-items-0.1.0.tgz#e7f381e5c780a034bcdbc38a6a2cfb31f828a020"
@@ -6771,6 +6780,25 @@ tailwindcss@^1.0.0-beta.3:
     postcss-selector-parser "^6.0.0"
     pretty-hrtime "^1.0.3"
 
+tailwindcss@^1.0.0-beta.4:
+  version "1.0.0-beta.8"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-1.0.0-beta.8.tgz#62c04d4bb342933b45164735b0334119651cd733"
+  integrity sha512-rHS9yx2KzQPnfE++in2FcZ9yPt1KwdqENvMbmJzgWwidD4riNdTtGDKSk/3g7A8I2D7hMFvk6l6H3B52vOpqwQ==
+  dependencies:
+    autoprefixer "^9.4.5"
+    bytes "^3.0.0"
+    chalk "^2.4.1"
+    fs-extra "^7.0.1"
+    lodash "^4.17.11"
+    node-emoji "^1.8.1"
+    normalize.css "^8.0.1"
+    postcss "^7.0.11"
+    postcss-functions "^3.0.0"
+    postcss-js "^2.0.0"
+    postcss-nested "^4.1.1"
+    postcss-selector-parser "^6.0.0"
+    pretty-hrtime "^1.0.3"
+
 tapable@^1.0.0, tapable@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.1.tgz#4d297923c5a72a42360de2ab52dadfaaec00018e"