@saasquatch/mint-components 1.11.0-2 → 1.11.0-3

package/dist/esm-es5/sqm-navigation-sidebar-view-4e8a6a8c.js

@@ -0,0 +1 @@
+import{h}from"./index-17b4da69.js";var vanillaStyle="\n\n* {\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n}\n\n@keyframes slideIn {\n  0% {\n    left: -350px;\n  }\n  100% {\n    left: 0;\n  }\n}\n\n@media screen and (max-width: 570px) {\n  :host {\n    width: 0;\n  }\n}\n\n@media screen and (min-width: 800px) {\n  :host {\n    max-width: 300px;\n  }\n  .toggler,\n  .hamburger {\n     user-select: none;\n     visibility:hidden;\n  }\n  .container{\n    position: sticky;\n    top: 0;\n  }\n  .menu-items {\n    min-width: 290px;\n    max-width: 320px;\n    box-sizing: border-box;\n    padding: 0px 15px;\n  }\n  .menu-items > :not(:last-child): {\n    margin-bottom: 4px;\n  }\n}\n@media screen and (max-width: 799px) {\n  .toggler {\n    border: 2px solid #eee;\n    cursor: pointer;\n    opacity: 0;\n    z-index: 5;\n  }\n\n  .container {\n    position: sticky;\n    top: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 60px;\n    width: 60px;\n    flex-direction: column;\n    z-index: 100;\n  }\n  .menu-items { \n    display: none;\n    padding: 20px;\n    border-right: 1px solid #eaeaea;\n    padding-top: 60px;\n    background: white; \n    width: 100vw;\n    height: 100vh;\n    position: absolute;\n    top: 0;\n    right: 0;\n    left: 0px;\n    margin: 0;\n    animation: slideIn 500ms ease-in-out;\n  }\n\n  .toggler,\n  .hamburger {\n    visibility: visible !important;\n  }\n\n  .container {\n    display: flex;\n  }\n\n  .hamburger > .line {\n    visibility: visible !important;\n  }\n\n\n  .toggler,\n  .hamburger {\n    position: absolute;\n    padding: 20px 10px;\n  }\n\n  .toggler {\n    z-index: 100;\n    width: 100%;\n    height: 100%;\n  }\n\n  .hamburger {\n    z-index: 10;\n    width: 75%;\n    height: 100%;\n  }\n\n  .toggler:checked ~ .menu-items {\n    display: block;\n  }\n\n  /***** Turn hamburger into an X *****/\n  .toggler:checked ~ .hamburger > .line:nth-child(1) {\n    opacity: 0;\n  }\n\n  .toggler:checked ~ .hamburger > .line:nth-child(2) {\n    transform: rotate(45deg) translate(0px, -0.5px);\n  }\n\n  .toggler:checked ~ .hamburger > .line:nth-child(3) {\n    transform: rotate(-45deg) translate(3px, -3.5px);\n  }\n\n  .toggler:checked ~ .hamburger > .line:nth-child(1),\n  .toggler:checked ~ .hamburger > .line:nth-child(2),\n  .toggler:checked ~ .hamburger > .line:nth-child(3) {\n    width: 75%;\n    border-bottom: 3px solid #444445;\n    margin: 0;\n  }\n\n  .hamburger > .line {\n    visibility:hidden;\n    z-index: 2;\n    height: 4px;\n    width: 100%;\n    margin-bottom: 3px;\n    border-bottom: 5px solid #444445;\n  }\n}\n";function NavigationSidebarView(n,e){return h("div",{class:"container",part:"sqm-base"},h("style",null,vanillaStyle),h("input",Object.assign({type:"checkbox",class:"toggler"},n)),h("div",{class:"hamburger"},h("div",{class:"line"}),h("div",{class:"line"}),h("div",{class:"line"})),h("div",{class:"menu-items",part:"sqm-items-container"},e))}export{NavigationSidebarView as N};

package/dist/esm-es5/sqm-navigation-sidebar.entry.js

@@ -1 +1 @@
-import{r as registerInstance,h as h$1}from"./index-17b4da69.js";import{n as h,k as useState,f as useEffect}from"./stencil-hooks.module-ac12ca1c.js";import{S as Sn,H}from"./index.module-def4aec5.js";import{N as NavigationSidebarView}from"./sqm-navigation-sidebar-view-414bcb19.js";var NavigationSidebar=function(){function e(e){registerInstance(this,e);this.ignored=true;h(this)}e.prototype.disconnectedCallback=function(){};e.prototype.render=function(){var e=useNavigationSidebar();return h$1(NavigationSidebarView,Object.assign({},e),h$1("slot",null))};return e}();function useNavigationSidebar(){var e=Sn();var a=H();var i=useState(false),t=i[0],n=i[1];useEffect((function(){n(false)}),[e.pathname,a]);function r(e){n(e.target.checked)}return{checked:t,onClick:r}}export{NavigationSidebar as sqm_navigation_sidebar};
+import{r as registerInstance,h as h$1}from"./index-17b4da69.js";import{n as h,k as useState,f as useEffect}from"./stencil-hooks.module-ac12ca1c.js";import{S as Sn,H}from"./index.module-def4aec5.js";import{N as NavigationSidebarView}from"./sqm-navigation-sidebar-view-4e8a6a8c.js";var NavigationSidebar=function(){function e(e){registerInstance(this,e);this.ignored=true;h(this)}e.prototype.disconnectedCallback=function(){};e.prototype.render=function(){var e=useNavigationSidebar();return h$1(NavigationSidebarView,Object.assign({},e),h$1("slot",null))};return e}();function useNavigationSidebar(){var e=Sn();var a=H();var i=useState(false),t=i[0],n=i[1];useEffect((function(){n(false)}),[e.pathname,a]);function r(e){n(e.target.checked)}return{checked:t,onClick:r}}export{NavigationSidebar as sqm_navigation_sidebar};