{
	"data": {
		"_customHTML": "<section mbr-id=\"_anchor\" class=\"_customHTML\">\n \n  \n    <mbr-parameters>\n<hr><header>Menu Configuration</header>\n        <input type=\"range\" inline title=\"Top\" name=\"paddingTopmenu\" min=\"0\" max=\"200\" step=\"1\" value=\"0\">\n      <input type=\"range\" inline title=\"Width  Hover\" name=\"widthsize\" min=\"14\" max=\"50\" step=\"1\" value=\"14\">\n      <input type=\"checkbox\" title=\"Show Logo\" name=\"showLogo\" checked>\n      <input type=\"checkbox\" title=\"Brand Name\" name=\"showName\" checked>\n         <input type=\"range\" title=\"Logo Size\" inline name=\"logoSize\" min=\"2\" max=\"8\" step=\"0.1\" value=\"8\" condition=\"showLogo\">\n         <input type=\"range\" title=\"Icon Size\" inline name=\"iconSize\" min=\"30\" max=\"60\" step=\"1\" value=\"30\">      \n      <input type=\"range\" inline title=\"Items Count\" name=\"iconsCount\" min=\"1\" max=\"10\" step=\"1\" value=\"1\">  \n        <input type=\"color\" title=\"Bar Color\" name=\"bgcolormenu\" value=\"#149dcc\">\n             <input type=\"range\" title=\"Opacity\" inline name=\"Opacitybarmenu\" min=\"0\" max=\"1\" step=\"0.1\" value=\"0.5\"> \n                   <input type=\"range\" title=\"Opacity Hover\" inline name=\"OpacitybarmenuHover\" min=\"0\" max=\"1\" step=\"0.1\" value=\"1\">  \n        <input type=\"color\" title=\"Hover Color\" name=\"bgcolormenu1\" value=\"#cccccc\">\n        <input type=\"color\" title=\"Icon Color\" name=\"bgcolormenu2\" value=\"#232323\">\n        <input type=\"color\" title=\"Icon Hover Color\" name=\"bgcolormenu3\" value=\"#0f7699\">\n        <input type=\"range\" inline title=\"Items Count\" name=\"iconsCount\" min=\"1\" max=\"10\" step=\"1\" value=\"1\">\n        <input type=\"checkbox\" title=\"Icon at Bottom\" name=\"lastchild\" condition=\"paddingTopmenu==0\">\n\n\n    </mbr-parameters> \n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\t<aside class=\"sidebar\">\n\t\t\t<nav>\n\t\t\t\t<ul class=\"sidebar__nav\">\n                         \n         \n \t\t\t\t\t<li mbr-if=\"showLogo\">\n\t\t\t\t\t\t<a href=\"http://www.google.be\" class=\"sidebar__nav__link\">\n\t\t\t\t         <span class=\"sidebar__nav__text\"> <img src=\"https://www.unsitepourtous.be/mobi/yourlogo.png\" alt=\"Mobirise\" mbr-style=\"{'height': logoSize + 'rem'}\" title></span>\n                          </a>\n\t\t\t\t\t</li>\n                   \t<li mbr-if=\"showName\">\n\t\t\t\t\t\t<a href=\"http://www.google.be\" class=\"sidebar__nav__link\">\n                          <span class=\"sidebar__nav__text\" mbr-text>YOUR BRAND</span>\n                          </a>\n\t\t\t\t\t</li>\n                  \t<li>\n\t\t\t\t\t\t<a href=\"#\" class=\"sidebar__nav__link\">\n\t\t\t\t\t\t\t<i mbr-icon class=\"mbr-iconfont mbri-watch\" style=\"font-size: {{iconSize}}px;\"></i>\n                          \t<span class=\"sidebar__nav__text\" mbr-text>Page 1</span>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li mbr-if=\"iconsCount > 1\">\n\t\t\t\t\t\t<a href=\"#\" class=\"sidebar__nav__link\">\n\t\t\t\t\t\t\t<i mbr-icon class=\"mbr-iconfont mbri-cash\" style=\"font-size: {{iconSize}}px;\"></i>\n                          \t<span class=\"sidebar__nav__text\" mbr-text>Page 2</span>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li mbr-if=\"iconsCount > 2\">\n\t\t\t\t\t\t<a href=\"#\" class=\"sidebar__nav__link\">\n\t\t\t\t\t\t\t<i mbr-icon class=\"mbr-iconfont mbri-android\" style=\"font-size: {{iconSize}}px;\"></i>\n                          \t<span class=\"sidebar__nav__text\" mbr-text>Page 3</span>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n                  \t<li mbr-if=\"iconsCount > 3\">\n\t\t\t\t\t\t<a href=\"#\" class=\"sidebar__nav__link\">\n\t\t\t\t\t\t\t<i mbr-icon class=\"mbr-iconfont mbri-cart-full\" style=\"font-size: {{iconSize}}px;\"></i>\n                          \t<span class=\"sidebar__nav__text\" mbr-text>Page 4</span>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li mbr-if=\"iconsCount > 4\">\n\t\t\t\t\t\t<a href=\"#\" class=\"sidebar__nav__link\">\n\t\t\t\t\t\t\t<i mbr-icon class=\"mbr-iconfont mbri-apple\" style=\"font-size: {{iconSize}}px;\"></i>\n                          \t<span class=\"sidebar__nav__text\" mbr-text>Page 5</span>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n                  \t<li mbr-if=\"iconsCount > 5\">\n\t\t\t\t\t\t<a href=\"#\" class=\"sidebar__nav__link\">\n\t\t\t\t\t\t\t<i mbr-icon class=\"mbr-iconfont mbri-sun\" style=\"font-size: {{iconSize}}px;\"></i>\n                          \t<span class=\"sidebar__nav__text\" mbr-text>Page 6</span>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n                  \t\t\t\t\t<li mbr-if=\"iconsCount > 6\">\n\t\t\t\t\t\t<a href=\"#\" class=\"sidebar__nav__link\">\n\t\t\t\t\t\t\t<i mbr-icon class=\"mbr-iconfont mbri-question\" style=\"font-size: {{iconSize}}px;\"></i>\n                          \t<span class=\"sidebar__nav__text\" mbr-text>Page 7</span>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n                  \t\t\t\t\t<li mbr-if=\"iconsCount > 7\">\n\t\t\t\t\t\t<a href=\"#\" class=\"sidebar__nav__link\">\n\t\t\t\t\t\t\t<i mbr-icon class=\"mbr-iconfont mbri-github\" style=\"font-size: {{iconSize}}px;\"></i>\n                          \t<span class=\"sidebar__nav__text\" mbr-text>Page 8</span>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li mbr-if=\"iconsCount > 8\">\n\t\t\t\t\t\t<a href=\"#\" class=\"sidebar__nav__link\">\n\t\t\t\t\t\t\t<i mbr-icon class=\"mbr-iconfont mbri-setting3\" style=\"font-size: {{iconSize}}px;\"></i>\n                          \t<span class=\"sidebar__nav__text\" mbr-text>Page 9</span>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n                  \t\t\t\t\t<li mbr-if=\"iconsCount > 9\">\n\t\t\t\t\t\t<a href=\"#\" class=\"sidebar__nav__link\">\n\t\t\t\t\t\t\t<i mbr-icon class=\"mbr-iconfont mbri-rocket\" style=\"font-size: {{iconSize}}px;\"></i>\n                          \t<span class=\"sidebar__nav__text\" mbr-text>Page 10</span>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\n\t\t\t\t</ul>\n\t\t\t</nav>\n\t\t</aside>\n\n <div mbr-class=\"{'hidden': isPublish}\" style=\"padding:1rem; background-color:#c1c1c1;\">\n   <div class=\"align-center\">\n              <h10> <br><br><br><br><br><br>Simply Left Menu<br><br>\n        Click the \"gear\" icon to change the layout of the Simply Left Menu bar. This text will be removed on preview/publish.<br><br><br><br><br><br></h10>\n\t\t\t\t\n    </div></div>\n</section>",
    "_styles": 
{
  "p": {
    "color": "#ecf0f1",
    "line-height": "28px",
    "font-size": "15px",
    "padding-top": "50px"
  },
  "DIV": {
    "color": "#ffffff"
  },
  "H10": {
    "color": "#767676"
  },
  ".hidden": {
    "display": "none"
  },
  ".sidebar": {
    "z-index": "1001",
    "background-color": "@bgcolormenu",
    "opacity": "@Opacitybarmenu",
    "position": "fixed",
    "transition": "width 0.2s ease"
  },
  ".sidebar nav": {
    "height": "100%"
  },
  ".sidebar .sidebar__nav": {
    "display": "flex",
    "height": "100%",
    "list-style": "none",
    "margin-top": "(@paddingTopmenu * 1px)",
    "margin-right": "0px",
    "margin-bottom": "0px",
    "margin-left": "0px",
    "padding": "0"
  },
  ".sidebar .sidebar__nav .sidebar__nav__link": {
    "align-items": "center",
    "color": "@bgcolormenu2",
    "display": "flex",
    "padding-left": "20px",
    "text-decoration": "none",
    "transition": "color 0.2s ease, background-color 0.2s ease"
  },
  ".sidebar .sidebar__nav .sidebar__nav__link:hover": {
    "background-color": "@bgcolormenu1",
    "color": "@bgcolormenu3"
  },
  ".sidebar .sidebar__nav .sidebar__nav__text": {
    "display": "none",
    "margin-left": "10px",
    "margin-right": "auto",
    "white-space": "nowrap"
  },
  ".sidebar .sidebar__nav i": {
    "align-items": "center",
    "display": "flex",
    "justify-content": "center"
  },
  "@media (max-width: 572px)": {
    ".sidebar": {
      "bottom": "0",
      "width": "100%"
    },
    ".sidebar .sidebar__nav": {
      "justify-content": "center"
    },
    ".sidebar .sidebar__nav .sidebar__nav__link": {
      "height": "100%",
      "padding": "0.75em"
    },
    ".sidebar .sidebar__nav i": {
      "font-size": "2rem"
    }
  },
  "@media (min-width: 572px)": {
    ".sidebar": {
      "height": "100vh",
      "left": "0",
      "width": "var(--sidebar-width)"
    },
    ".sidebar:hover": {
      "width": "(@widthsize * 1rem)",
      "opacity": "@OpacitybarmenuHover"
    },
    ".sidebar .sidebar__nav": {
      "flex-direction": "column"
    },
    "& when (@lastchild) and (@paddingTopmenu = 0)": {
      ".sidebar .sidebar__nav li:last-child": {
        "margin-top": "auto"
      }
    },
    ".sidebar .sidebar__nav .sidebar__nav__link": {
      "padding": "1em"
    },
    ".sidebar:hover .sidebar__nav .sidebar__nav__text": {
      "display": "inline"
    },
    ".sidebar .sidebar__nav i": {
      "font-size": "2.5rem"
    }
  },
  "@media (max-height: 434px)": {
    ".sidebar": {
      "overflow-y": "scroll"
    }
  },
  ":root": {
    "--sidebar-width": "4.5em"
  }
}
    }
	}