/*!
 * (C) Gasco https://gasco-web-component.herokuapp.com/ - MIT License
 */
import { r as registerInstance, c as createEvent, h, H as Host } from './index-211ca8fb.js';
import { m as menuSharp } from './index-69a9be18.js';
import { c as createColorClasses } from './theme-c4ea3043.js';

const gascoNavbarCss = ".sc-gasco-navbar-h{display:flex;align-items:center;flex-direction:row;max-width:100%;flex:1 1;z-index:2;padding:24px 68px;background:#FFFFFF;box-shadow:0px 2px 4px rgba(171, 190, 209, 0.6);border-radius:0px 0px 4px 0px}.gasco-position-relative.sc-gasco-navbar-h{position:relative}.gasco-position-sticky.sc-gasco-navbar-h{position:sticky;top:0}.header-native.sc-gasco-navbar{display:flex;align-items:center;flex-direction:row;justify-content:space-between;width:100%}.header-native.sc-gasco-navbar>button.sc-gasco-navbar{border:none;background:transparent;outline:none}.header-native.sc-gasco-navbar>img.sc-gasco-navbar{object-fit:contain}.header-nav.sc-gasco-navbar{display:flex;gap:36px}.header-button.sc-gasco-navbar{position:relative;border:none;text-align:left;background:transparent}.sc-gasco-navbar-s>[slot=nav]{display:flex;align-items:center;gap:30px;font-weight:400;font-size:12px;line-height:16px;color:#072531}.sc-gasco-navbar-s>[slot=nav] ul{display:flex;align-items:center;gap:30px;margin:0;padding:0;list-style:none}.sc-gasco-navbar-s>[slot=nav] a,.sc-gasco-navbar-s>[slot=nav] div{display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none;margin:0}.sc-gasco-navbar-s>[slot=nav] p{margin:0}ion-icon.sc-gasco-navbar{font-size:24px}.wrap-avatar.sc-gasco-navbar{display:flex;align-items:center;position:relative;margin:0;cursor:pointer}.wrap-avatar.sc-gasco-navbar::before{content:\"\";position:absolute;z-index:2;inset:0 0 0 0}.wrap-avatar.sc-gasco-navbar img.sc-gasco-navbar{width:45px;height:45px;margin-right:10px;border-radius:50px;clip-path:circle(50% at 50% 50%);object-fit:contain}.wrap-avatar.sc-gasco-navbar figcaption.sc-gasco-navbar h3.sc-gasco-navbar,.wrap-avatar.sc-gasco-navbar figcaption.sc-gasco-navbar p.sc-gasco-navbar{margin:0}.wrap-avatar.sc-gasco-navbar figcaption.sc-gasco-navbar h3.sc-gasco-navbar{font-weight:600;font-size:16px;line-height:20px;color:#072531}.wrap-avatar.sc-gasco-navbar figcaption.sc-gasco-navbar p.sc-gasco-navbar{font-weight:400;font-size:14px;line-height:20px;color:#4D4D4D}gasco-list.sc-gasco-navbar{position:absolute;right:5rem;top:6.3rem;z-index:100}@media only screen and (max-width: 680px){.sc-gasco-navbar-h{padding:19px 27px;border-radius:0px}}@media only screen and (max-width: 480px){.header-native.sc-gasco-navbar>img.sc-gasco-navbar{height:24px}.sc-gasco-navbar-s>[slot=nav]{display:none}}";

const logo = 'https://camo.githubusercontent.com/2bac56fff4f1d85f15664302b857a26d039d467660d9f34f73d9a19436ad8b4a/68747470733a2f2f676173636f2d7765622d636f6d706f6e656e742e6865726f6b756170702e636f6d2f696d672f676173636f2d7765622d636f6d706f6e656e742e737667';
const GascoNavbar = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.gascoSidebarShow = createEvent(this, "gascoSidebarShow", 7);
    this.gascoSetUserToSidebar = createEvent(this, "gascoSetUserToSidebar", 7);
    // STATE
    this.isResponsive = document.documentElement.clientWidth;
    this.isOpen = false;
    // PROPS
    this.position = 'relative';
    this.color = 'primary';
  }
  handleResize() {
    this.isResponsive = document.documentElement.clientWidth;
  }
  componentWillRender() {
    this.gascoSetUserToSidebar.emit({ user: this.user, userNav: this.usernav });
  }
  render() {
    const { user, position } = this;
    return (h(Host, { class: createColorClasses(this.color, {
        'gasco-navbar': true,
        'gasco-activatable': true,
        [`gasco-position-${position}`]: true,
      }) }, h("header", { class: "header-native", part: "native" }, this.isResponsive <= 480 && (h("button", { onClick: () => this.gascoSidebarShow.emit(true) }, h("ion-icon", { icon: menuSharp, lazy: false, flipRtl: true }))), h("img", { src: logo, alt: "logo" }), this.isResponsive >= 480 && (h("div", { class: "header-nav" }, h("slot", { name: "nav" }), user !== undefined && (h("button", { class: "header-button", onFocus: () => this.isOpen = true, onBlur: () => setTimeout(() => this.isOpen = false, 120) }, h("figure", { class: "wrap-avatar" }, h("img", { src: user === null || user === void 0 ? void 0 : user.avatar, alt: user === null || user === void 0 ? void 0 : user.name }), h("figcaption", null, h("h3", null, user === null || user === void 0 ? void 0 : user.name), h("p", null, user === null || user === void 0 ? void 0 : user.role))))))), this.isOpen && (h("gasco-list", null, this.usernav.map((nav) => (h("gasco-item", { href: nav.link }, nav.name))))))));
  }
};
GascoNavbar.style = gascoNavbarCss;

export { GascoNavbar as gasco_navbar };
