gov-gui
Version:
Gov UI Component Library Typscript Build
156 lines (155 loc) • 5.71 kB
JavaScript
import { h } from "@stencil/core";
export class GovSidebar {
constructor() {
this.sidebarUsername = '';
this.items = '';
this.avatarInitials = '';
this.avatarImgUrl = '';
this.showSideBarAvatar = true;
this.parsedLinks = [];
this.activeLink = 0;
this.isOpen = true; // New state for sidebar visibility
}
componentWillLoad() {
this.parseProps(this.items);
}
parseProps(links) {
this.parsedLinks = JSON.parse(links);
}
toggleSidebar() {
this.isOpen = !this.isOpen;
}
render() {
return (h("div", { key: '2c01d67335ca2440e4806836a8b8716a66d2205b', class: `sidebar fixed-sidebar flex-shrink-0 p-0 mr-15 ${this.isOpen ? 'open' : 'closed'}` }, h("div", { key: 'fc18a8f2b9bff371bab22051d804fd93f33e0cf7', class: "toggle-container" }, h("gov-button", { key: 'eebf04f7b864b9223f835ef105261574f6a33e4e', "type-variant": "iconButton", variant: "primary", icon: 'barsOutline', onClick: () => this.toggleSidebar() })), h("gov-box", { key: 'f01bc2285bb13247f5b1af643429d4921046baf9' }, this.showSideBarAvatar && (h("div", { key: '89d3d107800659cd3cb89037eb3ef8d03dbf68f5', class: "user-profile" }, h("gov-avatar", { key: '645a369ec6b3a9cc0491be6fc258c8b4dee9c684', imgUrl: this.avatarImgUrl, initials: this.avatarInitials }), h("div", { key: 'f6b761ee28103e47692dfeb22435f1654f530c07', class: "user-name" }, this.sidebarUsername))), h("div", { key: 'a4bc144e35b908059e8e3a0894df7d14cf5cb16a', class: "separator" }), h("gov-menubar", { key: '21bf496e45f33f25017131aedc5be1ef687d630d', type: "vertical", items: this.items }), h("gov-button", { key: '79241d64dbe19f8b79de869f4e6088e3069aaa0f', label: 'Logout', size: 'extended' }))));
}
static get is() { return "gov-sidebar"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["gov-sidebar.css"]
};
}
static get styleUrls() {
return {
"$": ["gov-sidebar.css"]
};
}
static get properties() {
return {
"sidebarUsername": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "sidebar-username",
"reflect": false,
"defaultValue": "''"
},
"items": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "items",
"reflect": false,
"defaultValue": "''"
},
"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": "''"
},
"showSideBarAvatar": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "show-side-bar-avatar",
"reflect": false,
"defaultValue": "true"
}
};
}
static get states() {
return {
"parsedLinks": {},
"activeLink": {},
"isOpen": {}
};
}
static get watchers() {
return [{
"propName": "navlinks",
"methodName": "parseProps"
}];
}
}
//# sourceMappingURL=gov-sidebar.js.map