gov-gui
Version:
Gov UI Component Library Typscript Build
161 lines (160 loc) • 8.82 kB
JavaScript
import { h } from "@stencil/core";
export class TopBar {
constructor() {
// @Prop() logo: string = '../../assets/images/Logo (1).png';
this.avatarInitials = '';
this.avatarImgUrl = '';
this.topBarUsername = '';
this.siteMenuItems = '';
this.menuType = 'admin';
this.showTopBarAvatar = true;
this.isDropdownOpen = false; // Controls dropdown visibility
}
toggleDropdown() {
this.isDropdownOpen = !this.isDropdownOpen;
}
render() {
return (h("gov-row", { key: 'a21fe2ac27dc33fbba23b6b9bf09018481b41555', classes: "shadow-lg pt-10 pb-10 pl-20 pr-20", align: "center", justify: "between" }, h("gov-box", { key: 'aa6c4daf9a946f72a1e4b5112201cc8d59aff9de', size: 2 }, h("img", { key: 'b30b70f325be8ce5ca72ee71d466f96c039c6967', src: '../../assets/images/Logo (1).png', alt: "Logo", height: 40 })), this.menuType === 'admin' && (h("div", { key: '3599f9d70dac45fcd602e7f37cf79d982e833491', class: "adminMenu d-flex flex-grow-1 pl-40 pr-20" }, h("gov-box", { key: 'fef0a5de3687840d329cdd93acaa878140c55966', classes: "d-flex flex-grow-1 pl-40 pr-20 admindesktop", align: "center" }, h("gov-box", { key: 'a81409abfaa6c21c69559ab860408cc6b08885dd', size: 8, xl: 6, lg: 4, md: 3 }, h("gov-input", { key: 'be0eff81724fe6b6176a0416bbc431398f771baa', type: "search", placeholder: "Search here...", icon: "search", class: "d-block ml-20 mr-20", style: { margin: '0 auto' } }))), this.showTopBarAvatar && (h("gov-box", { key: 'b6a90138b81d842a9b6646f81c306f8740406646', size: 4, classes: "d-flex flex-grow-1 pl-40 pr-20 admindesktop ", gap: '15px', align: "center" }, h("gov-avatar", { key: '9f282494dd56ce28004d05cf8f34a054ff9bfe2e', imgUrl: this.avatarImgUrl, initials: this.avatarInitials }), h("gov-menubar", { key: '8d50dd6f018a2da4c94fb223eb6b4496bfe2de56', type: "horizontal", items: this.topBarUsername }))), h("div", { key: '1a609a95ab27738e45819c6677659ce154435c98', class: "mobile-menu" }, h("div", { key: 'f301c6162520dee60cf34146382844274e973a9b', class: "d-flex flex-grow-1 pl-40 pr-20" }, h("div", { key: '3b91725c73cbad86e9029832a1cfc8730fc5ef27', class: "toggle-container" }, h("gov-button", { key: 'd8b306933c4954dd9debc2d9ea1c0cbd2226ac7c', typeVariant: "iconButton", variant: "primary", icon: 'barsOutline', onClick: () => this.toggleDropdown() })), h("div", { key: 'f066252143468d97bb36ddd2540e864c0acd0603', class: `mobile-dropdown ${this.isDropdownOpen ? 'open' : 'closed'}` }, h("gov-box", { key: '1a18e1df504d854007407fe60b28295ce678cdde', classes: "d-flex flex-grow-1 pl-40 pr-20", align: "center" }, h("gov-box", { key: 'ce7d2e858d24626afb5a5658d3a0c39e1ab6b443' }, h("gov-input", { key: '582de361785702529f7aabdfa4cc55d734bff9c8', type: "search", placeholder: "Search here...", icon: "search", class: "d-block ml-20 mr-20", style: { margin: '0 auto' } }))), this.showTopBarAvatar && (h("gov-box", { key: '2c18f555feb21aabb88a0f46cc6ade8769d7340b', auto: true, classes: "d-flex flex-grow-1 pl-40 pr-20 ", align: "center" }, h("gov-avatar", { key: 'e8535f91da44235fa1057a42a849a245c9e5214d', imgUrl: this.avatarImgUrl, initials: this.avatarInitials }), h("gov-menubar", { key: 'c7f3435f9d32c35c38bb6e9b9aad4c210cf54846', type: "horizontal", items: this.topBarUsername })))))))), this.menuType === 'site' && (h("div", { key: 'b06e7e06c7b07de80d244ecc05e69bf0eff4354a', class: "siteMenu flex-grow-1", style: { position: 'relative' } }, h("div", { key: '91a776ef55cd733e2020cd46241fcebbc615daf2', class: "desktop-menu" }, h("gov-box", { key: '36a452f4da03bea49e402c11fd425cddae06b5fe', classes: "d-flex flex-grow-1 pl-40 pr-20", align: "center", justify: "end" }, h("gov-menubar", { key: '7f19f1c2884107da9e792b7b8ca21953ec48d635', type: "horizontal", items: this.siteMenuItems }))), h("div", { key: '8906f6559327a8df04a4de108244fd2afd1eb1b2', class: "mobile-menu d-flex flex-grow-1 pl-40 pr-20" }, h("div", { key: 'cb147c9e3968db29465f56e6577dffe738bbb437', class: "toggle-container-site" }, h("gov-button", { key: 'e55c19fb3844a54c855a4f541a7d68e4ebc7fba7', "type-variant": "iconButton", variant: "primary", icon: "barsOutline", onClick: () => this.toggleDropdown() })), h("div", { key: '20c8f1ffb62f7092c82473de06446fd14923e977', class: `mobile-dropdown-site ${this.isDropdownOpen ? 'open' : 'closed'}` }, h("gov-menubar", { key: '3577f8c39e6806181d14e1bc6e24d7cc2abfd0df', type: "vertical", items: this.siteMenuItems })))))));
}
static get is() { return "gov-topbar"; }
static get originalStyleUrls() {
return {
"$": ["gov-topbar.css"]
};
}
static get styleUrls() {
return {
"$": ["gov-topbar.css"]
};
}
static get properties() {
return {
"avatarInitials": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "avatar-initials",
"reflect": false,
"defaultValue": "''"
},
"avatarImgUrl": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "avatar-img-url",
"reflect": false,
"defaultValue": "''"
},
"topBarUsername": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "top-bar-username",
"reflect": false,
"defaultValue": "''"
},
"siteMenuItems": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "site-menu-items",
"reflect": false,
"defaultValue": "''"
},
"menuType": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'admin' | 'site'",
"resolved": "\"admin\" | \"site\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "menu-type",
"reflect": false,
"defaultValue": "'admin'"
},
"showTopBarAvatar": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "show-top-bar-avatar",
"reflect": false,
"defaultValue": "true"
}
};
}
static get states() {
return {
"isDropdownOpen": {}
};
}
}
//# sourceMappingURL=gov-topbar.js.map