v4web-components
Version:
Stencil Component Starter
2 lines • 3.68 kB
JavaScript
import{r as e,h as t}from"./p-c2aeec95.js";const i=".v4-navbar{position:fixed;left:0;z-index:10;width:3.5rem;top:4rem;bottom:0;display:flex;flex-direction:column;justify-content:space-between;overflow-y:auto;background-color:#fff;color:#333;transition:width 0.5s ease-in-out;box-shadow:var(--lab-ds-semantic-container-shadow-l);overflow:-moz-scrollbars-none;-ms-overflow-style:none}.v4-navbar::-webkit-scrollbar{width:0 !important}nav{padding-top:4.5rem}a{cursor:pointer}.v4-navbar:hover{width:17rem}.title-menu{display:flex;width:100%;align-items:center;justify-content:space-between;opacity:0;font-family:'Inter';font-size:0.875rem;font-weight:400;white-space:nowrap}.title-menu{opacity:0}.v4-navbar:hover .title-menu{opacity:1;transition:opacity 0.4s ease-in-out}ul{list-style:none;padding:0;margin-top:0.5rem;margin-bottom:0.5rem}.menu-option{display:flex;align-items:center;gap:1rem;border:none;padding-top:0.75rem;padding-bottom:0.75rem;padding-inline:0.75rem}.submenu{margin-left:1rem;border-left-style:solid;border:none;opacity:0;visibility:hidden;max-height:0rem;transition:all 0.5s ease}.menu-item{margin-top:1.75rem;margin-bottom:1.75rem}.v4-navbar:hover .menu-item.open .submenu{visibility:visible;max-height:100%;opacity:1;transition:max-height 0.2s}.v4-navbar:hover .menu-item.active .submenu{width:calc(100% - 1rem);transition:opacity 1.5s ease-in-out;transition:max-height 0.2s}.menu-option:hover{background-color:#e6e6ef}.menu-item.active{color:#00c49a}.menu-item.active .title-menu{font-weight:700}.menu-item.active .menu-option{border-right:4px solid #00c49a}.footer{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:2rem;padding:1rem}.footer img{width:2.5rem;height:2.5rem}.v4-navbar:hover .user-data{display:flex;flex-direction:column}.footer .user-data{overflow:hidden;display:none;width:100%;align-items:center;justify-content:center;padding:1rem;color:#c1c1d7;font-size:0.875rem;overflow-wrap:break-word;word-wrap:break-word;text-align:center}";const n=class{constructor(t){e(this,t);this.collapsed=true;this.menus=undefined;this.user=undefined;this.logo=undefined;this.currentHost=window.location;this.activeUrl=window.location.href;this.activeProductsV4=undefined;this.activeRedeV4=undefined;this.openProductsV4=false;this.openRedeV4=false}render(){var e,i;let n=this.openProductsV4?"expand_less":"expand_more";let o=this.openRedeV4?"expand_less":"expand_more";return t("div",{class:`v4-navbar notranslate`},t("nav",null,t("ul",null,t("li",{class:`${this.activeProductsV4?"active":""} ${this.openProductsV4?"open":""} menu-item`},t("a",{onClick:()=>{this.openProductsV4=!this.openProductsV4;this.openRedeV4=false}},t("div",{class:"menu-option"},t("lab-ds-icon-not-selectable",{icon:"lightbulb",size:"s-medium"})," ",t("span",{class:"title-menu"},"Produtos V4 ",t("lab-ds-icon-not-selectable",{icon:n,size:"small"})))),t("ul",{class:"submenu"},t("slot",{name:"products-v4"}))),t("li",{class:`${this.activeRedeV4?"active":""} ${this.openRedeV4?"open":""} menu-item`},t("a",{onClick:()=>{this.openRedeV4=!this.openRedeV4;this.openProductsV4=false}},t("div",{class:"menu-option"},t("lab-ds-icon-not-selectable",{icon:"share",size:"s-medium"})," ",t("span",{class:"title-menu"},"Rede V4 ",t("lab-ds-icon-not-selectable",{icon:o,size:"small"})))),t("ul",{class:"submenu"},t("slot",{name:"rede-v4"}))))),t("div",{class:"footer"},t("div",{class:"user-data"},t("span",null,(e=this.user)===null||e===void 0?void 0:e.name),t("span",null,(i=this.user)===null||i===void 0?void 0:i.unitName)),t("img",{width:20,src:this.logo,alt:"Logo da V4"})))}};n.style=i;export{n as lab_ds_navbar};
//# sourceMappingURL=p-d96df9e1.entry.js.map