Release 3.6.4

README.md

@@ -59,7 +59,11 @@ For example, to set the `breakpoint` to `1036`:
 <script src="/node_modules/@canonical/global-nav/dist/index.js"></script>
 
 <script>
-  canonicalGlobalNav.createNav({ breakpoint: 1036, mobileContainerSelector: "global-nav-mobile", desktopContainerSelector: "global-nav-desktop" });
+  canonicalGlobalNav.createNav({
+    breakpoint: 1036,
+    mobileContainerSelector: 'global-nav-mobile',
+    desktopContainerSelector: 'global-nav-desktop',
+  });
 </script>
 ```
 
@@ -121,6 +125,12 @@ Just because this was a bit of a pain, here is what I did.
 5. [Encode the svg](https://meyerweb.com/eric/tools/dencoder/)
 6. Add this with `data:image/svg+xml,` in the right place in product-details.js
 
+### Vanilla updates
+
+This project uses the [Vanilla framework](https://vanillaframework.io/) as a dependency in two ways: the SCSS files are imported directly to build the styles of the global-nav itself (via the `vanilla-framework` npm package, as defined in dependencied in [package.json](https://github.com/canonical/global-nav/blob/main/package.json)) and for styling the demo page (via direct link in the [index.html](https://github.com/canonical/global-nav/blob/main/index.html) file).
+
+When updating Vanilla to latest version **both dependencies** should be updated.
+
 ### Release process
 
 The package is versioned using [semantic versioning](https://semver.org/) and published to the NPM registry.
@@ -136,4 +146,3 @@ This will trigger the `prepublishonly` script which will ensure requisite artefa
 Code licensed LGPLv3 by Canonical Ltd.
 
 With ♥ from Canonical
-

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/global-nav",
-  "version": "3.6.3",
+  "version": "3.6.4",
   "description": "A script and stylesheet that displays the Canonical global nav across the top of a site",
   "main": "dist/module.js",
   "iife": "dist/global-nav.js",

src/js/global-nav.js

@@ -325,7 +325,11 @@ function addListeners(wrapper, breakpoint) {
   /* eslint-enable */
 }
 
-export const createNav = ({ breakpoint = 1036, mobileContainerSelector, desktopContainerSelector } = {}) => {
+export const createNav = ({
+  breakpoint = 1036,
+  mobileContainerSelector,
+  desktopContainerSelector,
+} = {}) => {
   // Recruitment call to action
   // eslint-disable-next-line no-console
   console.log(
@@ -365,9 +369,11 @@ export const createNav = ({ breakpoint = 1036, mobileContainerSelector, desktopC
   document.body.appendChild(overlay); //eslint-disable-line
 
   if (mobileContainer && desktopContainer) {
-    const mobileDropdownList = mobileDropdown.querySelector("ul.p-navigation__items");
-    mobileDropdownList.classList.add("u-hide");
-    const globalNavButton = navItem.querySelector("button");
+    const mobileDropdownList = mobileDropdown.querySelector(
+      'ul.p-navigation__items'
+    );
+    mobileDropdownList.classList.add('u-hide');
+    const globalNavButton = navItem.querySelector('button');
     desktopContainer.appendChild(navDropdown);
     mobileContainer.prepend(mobileDropdownList);
     container.prepend(globalNavButton);

src/js/product-details.js

@@ -93,32 +93,27 @@ const canonicalProducts = {
     {
       title: 'Ubuntu on public clouds',
       url: 'https://ubuntu.com/download/cloud',
-      description:
-        'Optimised Ubuntu for public clouds.',
+      description: 'Optimised Ubuntu for public clouds.',
     },
     {
       title: 'Multipass',
       url: 'https://multipass.run/',
-      description:
-        'Spin up Ubuntu VMs on Windows, Mac and Linux.',
+      description: 'Spin up Ubuntu VMs on Windows, Mac and Linux.',
     },
     {
       title: 'Cloud-init',
       url: 'https://cloud-init.io/',
-      description:
-        'Control and customise your cloud instances.',
+      description: 'Control and customise your cloud instances.',
     },
     {
       title: 'Landscape',
       url: 'https://ubuntu.com/landscape',
-      description:
-        'Systems management and security patching for Ubuntu.',
+      description: 'Systems management and security patching for Ubuntu.',
     },
     {
       title: 'Netplan',
       url: 'http://www.netplan.io/',
-      description:
-        'Simplify and standardise complex network configuration.',
+      description: 'Simplify and standardise complex network configuration.',
     },
     {
       title: 'Charmed Kubeflow',
@@ -128,8 +123,7 @@ const canonicalProducts = {
     {
       title: 'MicroCloud',
       url: 'https://microcloud.is/',
-      description:
-        'Deploy a fully functional cloud in minutes.',
+      description: 'Deploy a fully functional cloud in minutes.',
     },
   ],
   abouts: [

src/sass/global-nav.scss

@@ -17,7 +17,7 @@ $global-nav-font-size-mobile: 0.8175rem;
 $global-nav-overlay-color: rgba(17, 17, 17, 0.4);
 $global-nav-link-color: #69c;
 $grid-max-width: 80rem;
-$box-shadow-color: hsla(0, 0%, 100%, .1);
+$box-shadow-color: hsla(0, 0%, 100%, 0.1);
 
 .global-nav {
   * {