Advertisement

#16 Main Navigation (Cookie Consent)

In this article we will implement the ability for use to display a message to the user indicating that our site uses cookies and where they can find our policies in relation to their usage. This message will be displayed if a consent cookie has not been set or has expired. The message will continue to be displayed until the user accepts our policies by click an accept button which will cause the consent cookie to be set.

Parts

Adding js-cookie

  • WebUi
    • package.json

To make our life easier when dealing with cookie manipulation we are going to start by adding a npm package called js-cookie (a). At the time of the writing of this article the version number for the package is shown in (b).

Terminal

npm install --save-dev js-cookie @types/js-cookie
(a) Command used to install the js-cookie package in our project.

package.json

{
    ...,
    "devDependencies": {
        ...
        "@types/js-cookie": "^2.2.0",
        ...,
        "js-cookie": "^2.2.0",
        ...
    }
}
(b) The version number at the time of the writing of this article.

Markup

  • WebUi
    • Pages
      • Shared
        • _MainNav.cshtml

Next up is to add the markup for our consent element (c)..

_MainNav.cshtml

...
<header>
    ...
    <div class="consent" id="consent">
        <div class="consent-content">
            <p>
                This site uses cookies to deliver our services. By using our site, you acknowledge that you
                have read and understand our <a href="/cookie">Cookie Policy</a>, 
                <a href="/privacy">Privacy Policy</a> and our <a href="/tos">Terms of Service</a>. 
                Your use of Exciton Interactive's Products and Services is subject to these terms and policies.
            </p>
            <button id="consent-accept">Accept</button>
        </div>
    </div>
</header>
(c) The markup for our consent element.
Advertisement

Styling

  • WebUi
    • Source
      • components
        • main-nav
          • main-nav.component.scss

Our approach is very similar to the mobile navigation menu that we implemented in the previous video in terms of the user interaction. Initially the element will be off screen and we will animate it in if needed. Once the user clicks the button we will then animate it out again (d).

main-nav.component.scss

...
header {
    ...
    .consent {
        @include position(fixed, 0 0 null 0);
        background-color: $dark-gray;
        color: white;
        @include padding(em($gutter));
        z-index: 2;
        transform: translateY(-101%);

        .consent-content {
            max-width: 1024px;
            @include margin(null auto);
            text-align: justify;
        }

        a {
            display: inline;
            color: lighten($action-color, 20%);
            padding: 0;
            text-decoration: underline;

            &:hover {
                color: $action-color;
            }
        }

        button {
            background-color: $action-color;
            width: 100%;
            color: white;
        }
    }
}
(d) The styling used for our consent element.

Interaction

  • WebUi
    • Source
      • components
        • main-nav
          • main-nav.component.ts

The last thing that we have to do is conditionally show our consent element, based on the presence or lack thereof, of a cookie and if it is shown animate it out when the user clicks the accept button (e).

main-nav.component.ts

import Cookies = require("js-cookie");
...
const cookieConsentName = ".Cookie.Consent";
let isConsentOpen = false;
const consent = document.getElementById("consent");

if (typeof Cookies.get(cookieConsentName) === "undefined") {
    isConsentOpen = animateIn(consent);
}

document.getElementById("consent-accept").addEventListener("click", (e) => {
    e.preventDefault();

    const animate = isConsentOpen
        ? animateOut
        : animateIn;

    isConsentOpen = animate(consent);
    Cookies.set(cookieConsentName, "true", { expires: 30, path: "/", samesite: "lax", secure: true } as any);
});
(e) The code used to show the consent element if needed and to animate the element out once the user clicks the accept button.
Exciton Interactive LLC
Advertisement