MkLHX/base.html.twig

## base.html.twig
<!DOCTYPE html>
<html>
<head></head>
<body>
<!-- //... -->
{% set cookieData = {
    msg: 'this website using cookie and by continuing navigation you accept blablablabla....etc',
    btn1: 'More',
    btn2: 'Accept',
    path: '/privacy-policy'
  }
%}
<div id="#cookieData" style="display:none;" data-cookie-data="{{ cookieData|json_encode }}">
{% block javascripts %}
  {{ encore_entry_script_tags('cookie') }}
{% endblock %}
<!-- //... -->
</body>
</html>

## cookie.js
//**## cookie js script ##**//

console.debug("cookie.js loaded");
// IE8 does not support textContent, so we should fallback to innerText.
let supportsTextContent = "textContent" in document.body;

const myCookie = (msg, btn1, btn2, path) => {
  let cookieName = "cookieConsent";
  let cookieConsentId = "cookieInfo";
  let dismissLinkId = "cookieDismiss";

  const _createHeaderElement = (
    cookieText,
    dismissText,
    linkText,
    linkHref
  ) => {
    let butterBarStyles =
      "z-index:1060;position:fixed;width:100%;background-color:rgba(127,127,127,1);color:#ffffff;" +
      "margin:0; left:0; top:0; padding:20px;text-align:center;";

    let cookieConsentElement = document.createElement("div");
    cookieConsentElement.id = cookieConsentId;
    cookieConsentElement.style.cssText = butterBarStyles;
    cookieConsentElement.appendChild(_createConsentText(cookieText));

    if (!!linkText && !!linkHref) {
      let infoLink = _createInformationLink(linkText, linkHref);
      infoLink.classList.add("btn-info");
      cookieConsentElement.appendChild(infoLink);
    }
    let dismissLink = _createDismissLink(dismissText);
    dismissLink.classList.add("btn-success");
    cookieConsentElement.appendChild(dismissLink);

    return cookieConsentElement;
  };

  const _createDialogElement = (
    cookieText,
    dismissText,
    linkText,
    linkHref
  ) => {
    let contentStyle =
      "z-index:1060;position:fixed;left:1%;right:1%;bottom:2%;width:98%;background-color:rgba(255,255,255,0.8);" +
      "padding:20px;box-shadow:4px 4px 25px #888;text-align:center;";

    let cookieConsentElement = document.createElement("div");
    cookieConsentElement.id = cookieConsentId;

    let content = document.createElement("div");
    content.style.cssText = contentStyle;

    let dismissLink = _createDismissLink(dismissText);
    dismissLink.classList.add("btn", "btn-outline-success");

    content.appendChild(_createConsentText(cookieText));
    let buttonElement = document.createElement("div");
    content.appendChild(buttonElement);
    buttonElement.style.textAlign = "center";
    buttonElement.style.marginTop = "15px";

    if (!!linkText && !!linkHref) {
      let infoLink = _createInformationLink(linkText, linkHref);
      infoLink.classList.add("btn", "btn-outline-info");
      buttonElement.appendChild(infoLink);
    }

    buttonElement.appendChild(dismissLink);

    cookieConsentElement.appendChild(content);
    return cookieConsentElement;
  };

  const _setElementText = (element, text) => {
    if (supportsTextContent) {
      element.textContent = text;
    } else {
      element.innerText = text;
    }
  };

  const _createConsentText = cookieText => {
    let consentText = document.createElement("span");
    _setElementText(consentText, cookieText);
    return consentText;
  };

  const _createDismissLink = dismissText => {
    let dismissLink = document.createElement("a");
    _setElementText(dismissLink, dismissText);
    dismissLink.id = dismissLinkId;
    dismissLink.href = "#";
    dismissLink.style.marginLeft = "15px";
    dismissLink.classList.add("btn");
    return dismissLink;
  };

  const _createInformationLink = (linkText, linkHref) => {
    let infoLink = document.createElement("a");
    _setElementText(infoLink, linkText);
    infoLink.href = linkHref;
    infoLink.target = "_blank";
    infoLink.style.marginLeft = "15px";
    infoLink.classList.add("btn");
    return infoLink;
  };

  const _dismissLinkClick = () => {
    _saveUserPreference();
    _removeCookieConsent();
    return false;
  };

  const _showCookieConsent = (
    cookieText,
    dismissText,
    linkText,
    linkHref,
    isDialog
  ) => {
    if (_shouldDisplayConsent()) {
      _removeCookieConsent();
      let consentElement = isDialog
        ? _createDialogElement(cookieText, dismissText, linkText, linkHref)
        : _createHeaderElement(cookieText, dismissText, linkText, linkHref);
      let fragment = document.createDocumentFragment();
      fragment.appendChild(consentElement);
      document.body.appendChild(fragment.cloneNode(true));
      document.getElementById(dismissLinkId).onclick = _dismissLinkClick;
    }
  };

  const showCookieConsentBar = (
    cookieText,
    dismissText,
    linkText,
    linkHref
  ) => {
    _showCookieConsent(cookieText, dismissText, linkText, linkHref, false);
  };

  const showCookieConsentDialog = (
    cookieText,
    dismissText,
    linkText,
    linkHref
  ) => {
    _showCookieConsent(cookieText, dismissText, linkText, linkHref, true);
  };

  const _removeCookieConsent = () => {
    let cookieElement = document.getElementById(cookieConsentId);
    if (cookieElement != null) {
      cookieElement.parentNode.removeChild(cookieElement);
    }
  };

  const _saveUserPreference = () => {
    // Set the cookie expiry to one year after today.
    let expiryDate = new Date();
    expiryDate.setMonth(expiryDate.getMonth() + 1);
    document.cookie =
      cookieName + "=y; path=/; expires=" + expiryDate.toGMTString();
  };

  const _shouldDisplayConsent = () => {
    // Display the header only if the cookie has not been set.
    return !document.cookie.match(new RegExp(cookieName + "=([^;]+)"));
  };

  return showCookieConsentDialog(msg, btn1, btn2, path);
};

document.addEventListener("DOMContentLoaded", () => {
  let cookieData = document.querySelector("#cookieData");
  let cookie = JSON.parse(cookieData.dataset.cookieData);
  myCookie(cookie.msg, cookie.btn1, cookie.btn2, cookie.path);
});

export default {};

## webpack.config.js
let Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .autoProvidejQuery()
    .addEntry('cookie', './assets/js/cookie.js')
    .enableSingleRuntimeChunk()
    .splitEntryChunks()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())
    .enableSassLoader()
;

module.exports = Encore.getWebpackConfig();
	<!DOCTYPE html>
	<html>
	<head></head>
	<body>
	<!-- //... -->
	{% set cookieData = {
	msg: 'this website using cookie and by continuing navigation you accept blablablabla....etc',
	btn1: 'More',
	btn2: 'Accept',
	path: '/privacy-policy'
	}
	%}
	<div id="#cookieData" style="display:none;" data-cookie-data="{{ cookieData\|json_encode }}">
	{% block javascripts %}
	{{ encore_entry_script_tags('cookie') }}
	{% endblock %}
	<!-- //... -->
	</body>
	</html>
	let Encore = require('@symfony/webpack-encore');

	Encore
	.setOutputPath('public/build/')
	.setPublicPath('/build')
	.cleanupOutputBeforeBuild()
	.enableBuildNotifications()
	.autoProvidejQuery()
	.addEntry('cookie', './assets/js/cookie.js')
	.enableSingleRuntimeChunk()
	.splitEntryChunks()
	.enableSourceMaps(!Encore.isProduction())
	// enables hashed filenames (e.g. app.abc123.css)
	.enableVersioning(Encore.isProduction())
	.enableSassLoader()
	;

	module.exports = Encore.getWebpackConfig();