ps-toolkit-ui 0.1.9 → 0.1.13

package/esm2015/lib/components/header/header.component.js

@@ -3,6 +3,7 @@ import { InputClass } from '../../classes/form.class';
 import { InputType } from '../../classes/enum.class';
 import { PsToolkitUiConfigService } from '../../services/config.service';
 import { LangClass } from '../../classes/lang.class';
+import * as $ from 'jquery';
 export class HeaderComponent {
     constructor(config) {
         this.config = config;
@@ -16,12 +17,15 @@ export class HeaderComponent {
             this.logout.emit();
         };
     }
+    showUserDropDown(e) {
+        $(e.target).closest('#Header').find('.user-drop-down').slideToggle();
+    }
 }
 HeaderComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-header',
-                template: "<div id=\"Header\" class=\"underline\">\r\n  <div class=\"content\"><ng-content></ng-content></div>\r\n  <div class=\"logout\">\r\n    <lib-form-button [inp]=\"logoutInp\"></lib-form-button>\r\n  </div>\r\n</div>\r\n",
-                styles: ["#Header{background-color:#fff;float:right;height:50px;position:relative;width:100%;z-index:11}#Header .content{float:right;height:100%;width:calc(100% - 150px)}#Header .logout{float:left;padding:10px 30px;width:150px}@media (max-width:399.98px){#Header .toggle-sidebar{display:block}}@media (min-width:400px) and (max-width:499.98px){#Header .toggle-sidebar{display:block}}@media (min-width:500px) and (max-width:599.98px){#Header .toggle-sidebar{display:block}}@media (min-width:600px) and (max-width:699.98px){#Header .toggle-sidebar{display:block}}@media (min-width:700px) and (max-width:799.98px){#Header .toggle-sidebar{display:block}}"]
+                template: "<div id=\"Header\" class=\"underline\">\r\n  <div class=\"content\"><ng-content></ng-content></div>\r\n  <div (click)=\"showUserDropDown($event)\" class=\"user-con\"><i class=\"fa-duotone fa-user user\"></i></div>\r\n  <div class=\"user-drop-down\">\r\n    <lib-form-button [inp]=\"logoutInp\"></lib-form-button>\r\n  </div>\r\n</div>\r\n",
+                styles: ["#Header{background-color:#fff;float:right;height:50px;position:relative;width:100%;z-index:11}#Header .content{float:right;height:100%;margin-right:50px;text-align:center;width:calc(100% - 150px)}#Header .user-con{align-items:center;display:flex;float:right;height:100%;justify-content:center;width:100px}#Header .user-con .user{background-color:var(--base-22);border-radius:50%;color:var(--comp);cursor:pointer;float:right;font-size:18px;height:30px;line-height:30px;text-align:center;width:30px}#Header .user-con .user:hover{color:var(--comp-dark)}#Header .user-drop-down{background-color:#fff;border-radius:5px;box-shadow:var(--box-shadow);display:none;overflow:hidden;position:absolute;right:0;top:50px;transition:all .3s;width:200px}@media (max-width:399.98px){#Header .content{font-size:12px;width:calc(100% - 100px)}#Header .user-con{width:50px}}@media (min-width:400px) and (max-width:499.98px){#Header .content{font-size:12px;width:calc(100% - 100px)}#Header .user-con{width:50px}}"]
             },] }
 ];
 HeaderComponent.ctorParameters = () => [
@@ -30,4 +34,4 @@ HeaderComponent.ctorParameters = () => [
 HeaderComponent.propDecorators = {
     logout: [{ type: Output }]
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVhZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJEOi9Qcm9qZWN0cy9Qc1Rvb2xraXQvVUkvcHJvamVjdHMvcHMtdG9vbGtpdC11aS9zcmMvIiwic291cmNlcyI6WyJsaWIvY29tcG9uZW50cy9oZWFkZXIvaGVhZGVyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFFLFlBQVksRUFBRSxNQUFNLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDOUQsT0FBTyxFQUFDLFVBQVUsRUFBQyxNQUFNLDBCQUEwQixDQUFDO0FBQ3BELE9BQU8sRUFBQyxTQUFTLEVBQUMsTUFBTSwwQkFBMEIsQ0FBQztBQUNuRCxPQUFPLEVBQUMsd0JBQXdCLEVBQUMsTUFBTSwrQkFBK0IsQ0FBQztBQUN2RSxPQUFPLEVBQUMsU0FBUyxFQUFDLE1BQU0sMEJBQTBCLENBQUM7QUFTbkQsTUFBTSxPQUFPLGVBQWU7SUFJMUIsWUFBbUIsTUFBZ0M7UUFBaEMsV0FBTSxHQUFOLE1BQU0sQ0FBMEI7UUFEbkQsV0FBTSxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFFMUIsTUFBTSxJQUFJLEdBQUcsSUFBSSxTQUFTLENBQUMsTUFBTSxDQUFDLFdBQVcsRUFBRSxNQUFNLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDL0QsTUFBTSxDQUFDLEdBQUcsQ0FBQyxHQUFXLEVBQUUsQ0FBQyxHQUFHLElBQUksRUFBVSxFQUFFO1lBQzFDLE9BQU8sSUFBSSxDQUFDLEdBQUcsQ0FBQyxRQUFRLEVBQUUsUUFBUSxFQUFFLEdBQUcsRUFBRSxDQUFDLENBQUMsQ0FBQztRQUM5QyxDQUFDLENBQUM7UUFDRixJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksVUFBVSxDQUFDLE1BQU0sQ0FBQyxXQUFXLEVBQUUsQ0FBQyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxXQUFXLENBQUMsQ0FBQztRQUN0RyxJQUFJLENBQUMsU0FBUyxDQUFDLE9BQU8sR0FBRyxHQUFHLEVBQUU7WUFDNUIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUNyQixDQUFDLENBQUM7SUFDSixDQUFDOzs7WUFsQkYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxZQUFZO2dCQUN0QixvT0FBc0M7O2FBRXZDOzs7WUFUTyx3QkFBd0I7OztxQkFZN0IsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIE91dHB1dH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7SW5wdXRDbGFzc30gZnJvbSAnLi4vLi4vY2xhc3Nlcy9mb3JtLmNsYXNzJztcclxuaW1wb3J0IHtJbnB1dFR5cGV9IGZyb20gJy4uLy4uL2NsYXNzZXMvZW51bS5jbGFzcyc7XHJcbmltcG9ydCB7UHNUb29sa2l0VWlDb25maWdTZXJ2aWNlfSBmcm9tICcuLi8uLi9zZXJ2aWNlcy9jb25maWcuc2VydmljZSc7XHJcbmltcG9ydCB7TGFuZ0NsYXNzfSBmcm9tICcuLi8uLi9jbGFzc2VzL2xhbmcuY2xhc3MnO1xyXG5pbXBvcnQge3N0cmluZ3N9IGZyb20gJy4uLy4uL2NsYXNzZXMvc3RyaW5nLmNsYXNzJztcclxuaW1wb3J0IHtIZWxwZXJDbGFzc30gZnJvbSAnLi4vLi4vY2xhc3Nlcy9oZWxwZXIuY2xhc3MnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdsaWItaGVhZGVyJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vaGVhZGVyLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9oZWFkZXIuY29tcG9uZW50LmNzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBIZWFkZXJDb21wb25lbnR7XHJcbiAgbG9nb3V0SW5wOiBJbnB1dENsYXNzO1xyXG4gIEBPdXRwdXQoKVxyXG4gIGxvZ291dCA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuICBjb25zdHJ1Y3RvcihwdWJsaWMgY29uZmlnOiBQc1Rvb2xraXRVaUNvbmZpZ1NlcnZpY2Upe1xyXG4gICAgY29uc3QgbGFuZyA9IG5ldyBMYW5nQ2xhc3MoY29uZmlnLmN1cnJlbnRMYW5nLCBjb25maWcuc3RyaW5ncyk7XHJcbiAgICBjb25zdCBsID0gKGtleTogc3RyaW5nLCB2ID0gbnVsbCk6IHN0cmluZyA9PiB7XHJcbiAgICAgIHJldHVybiBsYW5nLmdldCgnUHVibGljJywgJ0hlYWRlcicsIGtleSwgdik7XHJcbiAgICB9O1xyXG4gICAgdGhpcy5sb2dvdXRJbnAgPSBuZXcgSW5wdXRDbGFzcyhjb25maWcuZW52aXJvbm1lbnQsIGwsICdMb2dvdXQnLCBudWxsLCBJbnB1dFR5cGUuQnV0dG9uLCAnZ3JleSBoLTMwJyk7XHJcbiAgICB0aGlzLmxvZ291dElucC5vbkNsaWNrID0gKCkgPT4ge1xyXG4gICAgICB0aGlzLmxvZ291dC5lbWl0KCk7XHJcbiAgICB9O1xyXG4gIH1cclxufVxyXG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVhZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJEOi9Qcm9qZWN0cy9Qc1Rvb2xraXQvVUkvcHJvamVjdHMvcHMtdG9vbGtpdC11aS9zcmMvIiwic291cmNlcyI6WyJsaWIvY29tcG9uZW50cy9oZWFkZXIvaGVhZGVyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFFLFlBQVksRUFBRSxNQUFNLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDOUQsT0FBTyxFQUFDLFVBQVUsRUFBQyxNQUFNLDBCQUEwQixDQUFDO0FBQ3BELE9BQU8sRUFBQyxTQUFTLEVBQUMsTUFBTSwwQkFBMEIsQ0FBQztBQUNuRCxPQUFPLEVBQUMsd0JBQXdCLEVBQUMsTUFBTSwrQkFBK0IsQ0FBQztBQUN2RSxPQUFPLEVBQUMsU0FBUyxFQUFDLE1BQU0sMEJBQTBCLENBQUM7QUFHbkQsT0FBTyxLQUFLLENBQUMsTUFBTSxRQUFRLENBQUM7QUFPNUIsTUFBTSxPQUFPLGVBQWU7SUFJMUIsWUFBbUIsTUFBZ0M7UUFBaEMsV0FBTSxHQUFOLE1BQU0sQ0FBMEI7UUFEbkQsV0FBTSxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFFMUIsTUFBTSxJQUFJLEdBQUcsSUFBSSxTQUFTLENBQUMsTUFBTSxDQUFDLFdBQVcsRUFBRSxNQUFNLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDL0QsTUFBTSxDQUFDLEdBQUcsQ0FBQyxHQUFXLEVBQUUsQ0FBQyxHQUFHLElBQUksRUFBVSxFQUFFO1lBQzFDLE9BQU8sSUFBSSxDQUFDLEdBQUcsQ0FBQyxRQUFRLEVBQUUsUUFBUSxFQUFFLEdBQUcsRUFBRSxDQUFDLENBQUMsQ0FBQztRQUM5QyxDQUFDLENBQUM7UUFDRixJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksVUFBVSxDQUFDLE1BQU0sQ0FBQyxXQUFXLEVBQUUsQ0FBQyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxXQUFXLENBQUMsQ0FBQztRQUN0RyxJQUFJLENBQUMsU0FBUyxDQUFDLE9BQU8sR0FBRyxHQUFHLEVBQUU7WUFDNUIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUNyQixDQUFDLENBQUM7SUFDSixDQUFDO0lBQ0QsZ0JBQWdCLENBQUMsQ0FBQztRQUNoQixDQUFDLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLE9BQU8sQ0FBQyxTQUFTLENBQUMsQ0FBQyxJQUFJLENBQUMsaUJBQWlCLENBQUMsQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUN2RSxDQUFDOzs7WUFyQkYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxZQUFZO2dCQUN0Qiw4VkFBc0M7O2FBRXZDOzs7WUFWTyx3QkFBd0I7OztxQkFhN0IsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIE91dHB1dH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7SW5wdXRDbGFzc30gZnJvbSAnLi4vLi4vY2xhc3Nlcy9mb3JtLmNsYXNzJztcclxuaW1wb3J0IHtJbnB1dFR5cGV9IGZyb20gJy4uLy4uL2NsYXNzZXMvZW51bS5jbGFzcyc7XHJcbmltcG9ydCB7UHNUb29sa2l0VWlDb25maWdTZXJ2aWNlfSBmcm9tICcuLi8uLi9zZXJ2aWNlcy9jb25maWcuc2VydmljZSc7XHJcbmltcG9ydCB7TGFuZ0NsYXNzfSBmcm9tICcuLi8uLi9jbGFzc2VzL2xhbmcuY2xhc3MnO1xyXG5pbXBvcnQge3N0cmluZ3N9IGZyb20gJy4uLy4uL2NsYXNzZXMvc3RyaW5nLmNsYXNzJztcclxuaW1wb3J0IHtIZWxwZXJDbGFzc30gZnJvbSAnLi4vLi4vY2xhc3Nlcy9oZWxwZXIuY2xhc3MnO1xyXG5pbXBvcnQgKiBhcyAkIGZyb20gJ2pxdWVyeSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2xpYi1oZWFkZXInLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9oZWFkZXIuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2hlYWRlci5jb21wb25lbnQuY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIEhlYWRlckNvbXBvbmVudHtcclxuICBsb2dvdXRJbnA6IElucHV0Q2xhc3M7XHJcbiAgQE91dHB1dCgpXHJcbiAgbG9nb3V0ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xyXG4gIGNvbnN0cnVjdG9yKHB1YmxpYyBjb25maWc6IFBzVG9vbGtpdFVpQ29uZmlnU2VydmljZSl7XHJcbiAgICBjb25zdCBsYW5nID0gbmV3IExhbmdDbGFzcyhjb25maWcuY3VycmVudExhbmcsIGNvbmZpZy5zdHJpbmdzKTtcclxuICAgIGNvbnN0IGwgPSAoa2V5OiBzdHJpbmcsIHYgPSBudWxsKTogc3RyaW5nID0+IHtcclxuICAgICAgcmV0dXJuIGxhbmcuZ2V0KCdQdWJsaWMnLCAnSGVhZGVyJywga2V5LCB2KTtcclxuICAgIH07XHJcbiAgICB0aGlzLmxvZ291dElucCA9IG5ldyBJbnB1dENsYXNzKGNvbmZpZy5lbnZpcm9ubWVudCwgbCwgJ0xvZ291dCcsIG51bGwsIElucHV0VHlwZS5CdXR0b24sICdncmV5IGgtMzAnKTtcclxuICAgIHRoaXMubG9nb3V0SW5wLm9uQ2xpY2sgPSAoKSA9PiB7XHJcbiAgICAgIHRoaXMubG9nb3V0LmVtaXQoKTtcclxuICAgIH07XHJcbiAgfVxyXG4gIHNob3dVc2VyRHJvcERvd24oZSk6IHZvaWR7XHJcbiAgICAkKGUudGFyZ2V0KS5jbG9zZXN0KCcjSGVhZGVyJykuZmluZCgnLnVzZXItZHJvcC1kb3duJykuc2xpZGVUb2dnbGUoKTtcclxuICB9XHJcbn1cclxuIl19

package/esm2015/lib/components/sidebar/item/sidebar.item.component.js

@@ -37,7 +37,7 @@ SidebarItemComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-sidebar-item',
                 template: "<div [className]=\"(isActive(item) ? 'parent-active open ' : '') + 'user-sidebar-item'\">\r\n  <a [style]=\"{paddingRight: (i * 25) + 'px'}\" *ngIf=\"item.children.length == 0\" [className]=\"(currentSidebar && item.name == currentSidebar.name ? 'active ' : '') + 'content'\" [routerLink]=\"(area ? '/' + area : '') + '/' + (item.controller == 'Dashboard' ? '' : (item.controller + (item.action ? '/' + item.action : '')))\">\r\n    <i [className]=\"item.icon + ' icon'\"></i>\r\n    <div class=\"title\">{{ l(item.name) }}</div>\r\n  </a>\r\n  <div [style]=\"{paddingRight: (i * 25) + 'px'}\" *ngIf=\"item.children.length > 0\" (click)=\"openClose($event)\" class=\"content parent\">\r\n    <i [className]=\"item.icon + ' icon'\"></i>\r\n    <div class=\"title\">{{ l(item.name) }}</div>\r\n    <i [className]=\"'fa-duotone fa-angle-left arrow'\"></i>\r\n  </div>\r\n  <div *ngIf=\"item.children.length > 0\" class=\"children\">\r\n    <div class=\"items\">\r\n      <lib-sidebar-item [i]=\"i + 1\" [item]=\"child\" [currentSidebar]=\"currentSidebar\" [area]=\"area\" *ngFor=\"let child of item.children\"></lib-sidebar-item>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                styles: [".user-sidebar-item{float:left;position:relative;text-align:center;width:100%}.user-sidebar-item .content{align-items:center;cursor:pointer;direction:rtl;display:flex;float:right;justify-content:right;position:relative;transition:all .3s;width:100%}.user-sidebar-item .dot{background-color:var(--base);border:2px solid hsla(0,0%,93.3%,.4);border-radius:50%;height:10px;position:absolute;right:-15px;top:15px;width:10px;z-index:2}.user-sidebar-item .dot.active{background-color:var(--base-11);border:2px solid var(--base-11)}.user-sidebar-item.parent-active>.dot.parent{background-color:hsla(0,0%,93.3%,.4);border:none}.user-sidebar-item .dot.back{background-color:var(--base);border:none;z-index:1}.user-sidebar-item .children{display:none;float:left;position:relative;width:100%}.user-sidebar-item .children .items{float:left;width:100%}.user-sidebar-item .children .line{background-color:hsla(0,0%,93.3%,.4);height:calc(100% - 20px);left:calc(85% + 10px);position:absolute;top:0;width:1px}.user-sidebar-item .content .title{color:hsla(0,0%,100%,.8);float:right;font-family:VazirLight;font-size:12px;height:45px;line-height:45px;overflow:hidden;transition:all .3s;width:0}.user-sidebar-item .content .icon{color:hsla(0,0%,100%,.6666666666666666);float:right;font-size:18px;height:45px;line-height:45px;transition:all .3s;width:100%}.user-sidebar-item .content .arrow{color:hsla(0,0%,100%,.8);font-size:13px;height:45px;line-height:45px;overflow:hidden;text-align:right;transition:all .3s;width:0}::ng-deep #Sidebar.open .user-sidebar-item .content .title{width:calc(100% - 100px)}::ng-deep #Sidebar.open .user-sidebar-item .content .icon{width:70px}::ng-deep #Sidebar.open .user-sidebar-item .content .arrow{width:30px}::ng-deep #Sidebar.close .user-sidebar-item .content{padding:0!important}.user-sidebar-item.open .content .arrow{transform:rotate(-90deg)}.user-sidebar-item>.children .content .icon{font-size:11px}.user-sidebar-item.parent-active>.content,.user-sidebar-item:hover>.content{background-color:var(--base-dark)}.user-sidebar-item.parent-active>.content .title,.user-sidebar-item:hover>.content .title{color:#fff;font-family:VazirBold}.user-sidebar-item.parent-active>.content .icon,.user-sidebar-item:hover>.content .icon{color:var(--comp)}.user-sidebar-item.parent-active>.content .arrow,.user-sidebar-item:hover>.content .arrow{color:#fff}.user-sidebar-item.parent-active>.children{display:block}@media (max-width:399.98px){.user-sidebar-item .content .title{font-size:11px;width:calc(100% - 30px)}.user-sidebar-item .content .icon{font-size:13px;width:30px}}@media (min-width:400px) and (max-width:499.98px){.user-sidebar-item .content .title{font-size:11px;width:calc(100% - 30px)}.user-sidebar-item .content .icon{font-size:13px;width:30px}}@media (min-width:500px) and (max-width:599.98px){.user-sidebar-item .content .title{font-size:11px;width:calc(100% - 30px)}.user-sidebar-item .content .icon{font-size:13px;width:30px}}@media (min-width:600px) and (max-width:699.98px){.user-sidebar-item .content .title{font-size:11px;width:calc(100% - 30px)}.user-sidebar-item .content .icon{font-size:13px;width:30px}}@media (min-width:700px) and (max-width:799.98px){.user-sidebar-item .content .title{font-size:11px;width:calc(100% - 30px)}.user-sidebar-item .content .icon{font-size:13px;width:30px}}@media (min-width:800px) and (max-width:899.98px){.user-sidebar-item .content .title{font-size:11px;width:calc(100% - 30px)}.user-sidebar-item .content .icon{font-size:13px;width:30px}}@media (min-width:900px) and (max-width:999.98px){.user-sidebar-item .content .title{font-size:11px;width:calc(100% - 30px)}.user-sidebar-item .content .icon{font-size:13px;width:30px}}@media (min-width:1100px) and (max-width:1199.98px){::ng-deep #Sidebar .user-sidebar-item .content .title{width:calc(100% - 100px)}::ng-deep #Sidebar.open .user-sidebar-item .content .title{width:0}::ng-deep #Sidebar .user-sidebar-item .content .icon{width:70px}::ng-deep #Sidebar.open .user-sidebar-item .content .icon{width:100%}::ng-deep #Sidebar .user-sidebar-item .content .arrow{width:30px}::ng-deep #Sidebar.open .user-sidebar-item .content .arrow{width:0}}"]
+                styles: [".user-sidebar-item{float:left;position:relative;text-align:center;width:100%}.user-sidebar-item .content{align-items:center;cursor:pointer;direction:rtl;display:flex;float:right;justify-content:right;position:relative;transition:all .3s;width:100%}.user-sidebar-item .dot{background-color:var(--base);border:2px solid hsla(0,0%,93.3%,.4);border-radius:50%;height:10px;position:absolute;right:-15px;top:15px;width:10px;z-index:2}.user-sidebar-item .dot.active{background-color:var(--base-11);border:2px solid var(--base-11)}.user-sidebar-item.parent-active>.dot.parent{background-color:hsla(0,0%,93.3%,.4);border:none}.user-sidebar-item .dot.back{background-color:var(--base);border:none;z-index:1}.user-sidebar-item .children{display:none;float:left;position:relative;width:100%}.user-sidebar-item .children .items{float:left;width:100%}.user-sidebar-item .children .line{background-color:hsla(0,0%,93.3%,.4);height:calc(100% - 20px);left:calc(85% + 10px);position:absolute;top:0;width:1px}.user-sidebar-item .content .title{color:hsla(0,0%,100%,.8);float:right;font-family:VazirLight;font-size:12px;height:45px;line-height:45px;overflow:hidden;transition:all .3s;width:0}.user-sidebar-item .content .icon{color:hsla(0,0%,100%,.6666666666666666);float:right;font-size:18px;height:45px;line-height:45px;transition:all .3s;width:100%}.user-sidebar-item .content .arrow{color:hsla(0,0%,100%,.8);font-size:13px;height:45px;line-height:45px;overflow:hidden;text-align:right;transition:all .3s;width:0}::ng-deep #Sidebar.open .user-sidebar-item .content .title{width:calc(100% - 100px)}::ng-deep #Sidebar.open .user-sidebar-item .content .icon{width:70px}::ng-deep #Sidebar.open .user-sidebar-item .content .arrow{width:30px}::ng-deep #Sidebar.close .user-sidebar-item .content{padding:0!important}.user-sidebar-item.open .content .arrow{transform:rotate(-90deg)}.user-sidebar-item>.children .content .icon{font-size:11px}.user-sidebar-item.parent-active>.content,.user-sidebar-item:hover>.content{background-color:var(--base-dark)}.user-sidebar-item.parent-active>.content .title,.user-sidebar-item:hover>.content .title{color:#fff;font-family:VazirBold}.user-sidebar-item.parent-active>.content .icon,.user-sidebar-item:hover>.content .icon{color:var(--comp)}.user-sidebar-item.parent-active>.content .arrow,.user-sidebar-item:hover>.content .arrow{color:#fff}.user-sidebar-item.parent-active>.children{display:block}@media (max-width:399.98px){::ng-deep #Sidebar .user-sidebar-item .content .title{width:calc(100% - 100px)}::ng-deep #Sidebar.open .user-sidebar-item .content .title{width:0}::ng-deep #Sidebar .user-sidebar-item .content .icon{width:70px}::ng-deep #Sidebar.open .user-sidebar-item .content .icon{width:100%}::ng-deep #Sidebar .user-sidebar-item .content .arrow{width:30px}::ng-deep #Sidebar.open .user-sidebar-item .content .arrow{width:0}}@media (min-width:400px) and (max-width:499.98px){::ng-deep #Sidebar .user-sidebar-item .content .title{width:calc(100% - 100px)}::ng-deep #Sidebar.open .user-sidebar-item .content .title{width:0}::ng-deep #Sidebar .user-sidebar-item .content .icon{width:70px}::ng-deep #Sidebar.open .user-sidebar-item .content .icon{width:100%}::ng-deep #Sidebar .user-sidebar-item .content .arrow{width:30px}::ng-deep #Sidebar.open .user-sidebar-item .content .arrow{width:0}}@media (min-width:500px) and (max-width:599.98px){::ng-deep #Sidebar .user-sidebar-item .content .title{width:calc(100% - 100px)}::ng-deep #Sidebar.open .user-sidebar-item .content .title{width:0}::ng-deep #Sidebar .user-sidebar-item .content .icon{width:70px}::ng-deep #Sidebar.open .user-sidebar-item .content .icon{width:100%}::ng-deep #Sidebar .user-sidebar-item .content .arrow{width:30px}::ng-deep #Sidebar.open .user-sidebar-item .content .arrow{width:0}}@media (min-width:600px) and (max-width:699.98px){::ng-deep #Sidebar .user-sidebar-item .content .title{width:calc(100% - 100px)}::ng-deep #Sidebar.open .user-sidebar-item .content .title{width:0}::ng-deep #Sidebar .user-sidebar-item .content .icon{width:70px}::ng-deep #Sidebar.open .user-sidebar-item .content .icon{width:100%}::ng-deep #Sidebar .user-sidebar-item .content .arrow{width:30px}::ng-deep #Sidebar.open .user-sidebar-item .content .arrow{width:0}}@media (min-width:700px) and (max-width:799.98px){::ng-deep #Sidebar .user-sidebar-item .content .title{width:calc(100% - 100px)}::ng-deep #Sidebar.open .user-sidebar-item .content .title{width:0}::ng-deep #Sidebar .user-sidebar-item .content .icon{width:70px}::ng-deep #Sidebar.open .user-sidebar-item .content .icon{width:100%}::ng-deep #Sidebar .user-sidebar-item .content .arrow{width:30px}::ng-deep #Sidebar.open .user-sidebar-item .content .arrow{width:0}}@media (min-width:800px) and (max-width:899.98px){::ng-deep #Sidebar .user-sidebar-item .content .title{width:calc(100% - 100px)}::ng-deep #Sidebar.open .user-sidebar-item .content .title{width:0}::ng-deep #Sidebar .user-sidebar-item .content .icon{width:70px}::ng-deep #Sidebar.open .user-sidebar-item .content .icon{width:100%}::ng-deep #Sidebar .user-sidebar-item .content .arrow{width:30px}::ng-deep #Sidebar.open .user-sidebar-item .content .arrow{width:0}}@media (min-width:900px) and (max-width:999.98px){::ng-deep #Sidebar .user-sidebar-item .content .title{width:calc(100% - 100px)}::ng-deep #Sidebar.open .user-sidebar-item .content .title{width:0}::ng-deep #Sidebar .user-sidebar-item .content .icon{width:70px}::ng-deep #Sidebar.open .user-sidebar-item .content .icon{width:100%}::ng-deep #Sidebar .user-sidebar-item .content .arrow{width:30px}::ng-deep #Sidebar.open .user-sidebar-item .content .arrow{width:0}}@media (min-width:1000px) and (max-width:1099.98px){::ng-deep #Sidebar .user-sidebar-item .content .title{width:calc(100% - 100px)}::ng-deep #Sidebar.open .user-sidebar-item .content .title{width:0}::ng-deep #Sidebar .user-sidebar-item .content .icon{width:70px}::ng-deep #Sidebar.open .user-sidebar-item .content .icon{width:100%}::ng-deep #Sidebar .user-sidebar-item .content .arrow{width:30px}::ng-deep #Sidebar.open .user-sidebar-item .content .arrow{width:0}}@media (min-width:1100px) and (max-width:1199.98px){::ng-deep #Sidebar .user-sidebar-item .content .title{width:calc(100% - 100px)}::ng-deep #Sidebar.open .user-sidebar-item .content .title{width:0}::ng-deep #Sidebar .user-sidebar-item .content .icon{width:70px}::ng-deep #Sidebar.open .user-sidebar-item .content .icon{width:100%}::ng-deep #Sidebar .user-sidebar-item .content .arrow{width:30px}::ng-deep #Sidebar.open .user-sidebar-item .content .arrow{width:0}}"]
             },] }
 ];
 SidebarItemComponent.ctorParameters = () => [

package/esm2015/lib/components/sidebar/sidebar.component.js

@@ -52,7 +52,7 @@ SidebarComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-sidebar',
                 template: "<div id=\"Sidebar\" class=\"open\">\r\n  <div class=\"sidebar-shadow\" (click)=\"toggleSidebar.emit()\"></div>\r\n  <div class=\"sidebar-scroll\">\r\n    <i (click)=\"toggleSidebar.emit()\" class=\"toggle fa-duotone fa-angle-double-left\"></i>\r\n    <div class=\"brand-con\">\r\n      <div class=\"logo\"></div>\r\n      <div class=\"title\">\r\n        {{l('SoftwareName')}}\r\n        <div class=\"version\">{{l('Version', version)}}</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"sidebar-con\" id=\"sidebar-con\">\r\n      <span *ngFor=\"let item of sidebar\">\r\n        <lib-sidebar-item [i]=\"0\" [item]=\"item\" [base]=\"true\" [currentSidebar]=\"currentSidebar\" [area]=\"area\"></lib-sidebar-item>\r\n      </span>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                styles: ["#Sidebar{background-color:var(--base);height:calc(100vh - 35px);min-height:calc(100vh - 35px);position:relative;transition:width .3s;width:78px;z-index:12}#Sidebar,#Sidebar .sidebar-shadow{-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;direction:ltr;float:right}#Sidebar .sidebar-shadow{background-color:var(--black);height:100vh;left:0;min-height:100vh;opacity:0;overflow:hidden;position:fixed;transition:all .3s;visibility:hidden;width:100%;z-index:9}#Sidebar.open{width:260px}#Sidebar .sidebar-scroll{background-color:var(--base);height:100%;position:absolute;right:0;top:0;transition:all .3s;width:100%;z-index:11}#Sidebar .sidebar-scroll .sidebar-con{direction:ltr;float:right;height:calc(100vh - 85px);overflow-x:hidden;overflow-y:auto;width:100%}#Sidebar .sidebar-scroll .brand-con{align-items:center;background-color:var(--base-dark);direction:rtl;display:flex;float:right;height:50px;justify-content:center;padding:10px;width:100%}#Sidebar .sidebar-scroll .brand-con .logo{background-position:50%;background-repeat:no-repeat;background-size:contain;float:right;height:30px;width:30px}#Sidebar .sidebar-scroll .brand-con .title{align-items:center;color:#fff;display:flex;font-family:VazirBold;font-size:15px;height:100%;justify-content:center;overflow:hidden;position:relative;top:-4px;transition:all .3s;width:0}#Sidebar.open .sidebar-scroll .brand-con .title{width:110px}#Sidebar .sidebar-scroll .brand-con .title .version{font-family:VazirLight;font-size:9px;position:absolute;top:17px}#Sidebar .toggle{color:var(--comp);cursor:pointer;float:left;font-size:18px;height:50px;left:-60px;line-height:50px;position:absolute;text-align:center;transform:scaleX(1);transition:all .3s;width:60px}#Sidebar.open .toggle{transform:scaleX(-1)}#Sidebar .toggle:hover{color:var(--comp-dark)}@media (max-width:399.98px){#Sidebar{right:0;width:200px}#Sidebar,#Sidebar .sidebar-shadow{height:calc(100vh - 110px);min-height:calc(100vh - 110px)}#Sidebar .sidebar-shadow{opacity:.7;visibility:visible;width:calc(100% - 200px)}#Sidebar.open .sidebar-shadow{opacity:0;visibility:hidden;width:100%}}@media (min-width:400px) and (max-width:499.98px){#Sidebar{height:calc(100vh - 110px);min-height:calc(100vh - 110px);right:0;width:200px}#Sidebar.open{right:-200px}#Sidebar .sidebar-shadow{height:calc(100vh - 110px);min-height:calc(100vh - 110px);opacity:.7;visibility:visible;width:calc(100% - 200px)}#Sidebar.open .sidebar-shadow{opacity:0;visibility:hidden;width:100%}}@media (min-width:500px) and (max-width:599.98px){#Sidebar{height:calc(100vh - 110px);min-height:calc(100vh - 110px);right:0;width:200px}#Sidebar.open{right:-200px}#Sidebar .sidebar-shadow{height:calc(100vh - 110px);min-height:calc(100vh - 110px);opacity:.7;visibility:visible;width:calc(100% - 200px)}#Sidebar.open .sidebar-shadow{opacity:0;visibility:hidden;width:100%}}@media (min-width:600px) and (max-width:699.98px){#Sidebar{right:0;width:200px}#Sidebar.open{right:-200px}#Sidebar .sidebar-shadow{opacity:.7;visibility:visible;width:calc(100% - 200px)}#Sidebar.open .sidebar-shadow{opacity:0;visibility:hidden;width:100%}}@media (min-width:700px) and (max-width:799.98px){#Sidebar{right:0;width:200px}#Sidebar.open{right:-200px}#Sidebar .sidebar-shadow{opacity:.7;visibility:visible;width:calc(100% - 200px)}#Sidebar.open .sidebar-shadow{opacity:0;visibility:hidden;width:100%}}@media (min-width:800px) and (max-width:899.98px){#Sidebar{right:-200px;width:200px}#Sidebar.open{right:0}}@media (min-width:900px) and (max-width:999.98px){#Sidebar{right:-200px;width:200px}#Sidebar.open{right:0}}@media (min-width:1000px) and (max-width:1099.98px){#Sidebar{right:-200px;width:200px}#Sidebar.open{right:0}}@media (min-width:1100px) and (max-width:1199.98px){#Sidebar,#Sidebar.open{width:78px}#Sidebar.open .sidebar-scroll{width:100%}#Sidebar .sidebar-scroll{width:260px}#Sidebar.open .sidebar-scroll .brand-con .title{width:0}#Sidebar .sidebar-scroll .brand-con .title{width:110px}#Sidebar .sidebar-shadow{opacity:.7;visibility:visible}#Sidebar.open .sidebar-shadow{opacity:0;visibility:hidden}#Sidebar .toggle{transform:scaleX(-1)}#Sidebar .toggle,#Sidebar .toggle:hover{color:var(--white)}#Sidebar.open .toggle{color:var(--comp);transform:scaleX(1)}#Sidebar.open .toggle:hover{color:var(--comp-dark)}}"]
+                styles: ["#Sidebar{background-color:var(--base);height:calc(100vh - 35px);min-height:calc(100vh - 35px);position:relative;transition:width .3s;width:78px;z-index:12}#Sidebar,#Sidebar .sidebar-shadow{-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;direction:ltr;float:right}#Sidebar .sidebar-shadow{background-color:var(--black);height:100vh;left:0;min-height:100vh;opacity:0;overflow:hidden;position:fixed;transition:all .3s;visibility:hidden;width:100%;z-index:9}#Sidebar.open{width:260px}#Sidebar .sidebar-scroll{background-color:var(--base);height:100%;position:absolute;right:0;top:0;transition:all .3s;width:100%;z-index:11}#Sidebar .sidebar-scroll .sidebar-con{direction:ltr;float:right;height:calc(100vh - 85px);overflow-x:hidden;overflow-y:auto;width:100%}#Sidebar .sidebar-scroll .brand-con{align-items:center;background-color:var(--base-dark);direction:rtl;display:flex;float:right;height:50px;justify-content:center;width:100%}#Sidebar .sidebar-scroll .brand-con .logo{background-position:50%;background-repeat:no-repeat;background-size:contain;float:right;height:30px;width:30px}#Sidebar .sidebar-scroll .brand-con .title{align-items:center;color:#fff;display:flex;font-family:VazirBold;font-size:15px;height:100%;justify-content:center;overflow:hidden;position:relative;top:-4px;transition:all .3s;width:0}#Sidebar.open .sidebar-scroll .brand-con .title{width:110px}#Sidebar .sidebar-scroll .brand-con .title .version{font-family:VazirLight;font-size:9px;position:absolute;top:27px}#Sidebar .toggle{color:var(--comp);cursor:pointer;float:left;font-size:18px;height:50px;left:-50px;line-height:50px;position:absolute;text-align:center;transform:scaleX(1);transition:all .3s;width:50px}#Sidebar.open .toggle{transform:scaleX(-1)}#Sidebar .toggle:hover{color:var(--comp-dark)}@media (max-width:399.98px){#Sidebar{height:calc(100vh - 60px);min-height:calc(100vh - 60px)}#Sidebar,#Sidebar.open{width:0}#Sidebar.open .sidebar-scroll{width:100%}#Sidebar .sidebar-scroll{width:260px}#Sidebar .sidebar-scroll .sidebar-con{height:calc(100vh - 110px)}#Sidebar.open .sidebar-scroll .brand-con .title{width:0}#Sidebar .sidebar-scroll .brand-con .title{width:110px}#Sidebar .sidebar-shadow{opacity:.7;visibility:visible}#Sidebar.open .sidebar-shadow{opacity:0;visibility:hidden}#Sidebar .toggle{transform:scaleX(-1)}#Sidebar .toggle,#Sidebar .toggle:hover{color:var(--white)}#Sidebar.open .toggle{color:var(--comp);transform:scaleX(1)}#Sidebar.open .toggle:hover{color:var(--comp-dark)}}@media (min-width:400px) and (max-width:499.98px){#Sidebar{height:calc(100vh - 60px);min-height:calc(100vh - 60px)}#Sidebar,#Sidebar.open{width:0}#Sidebar.open .sidebar-scroll{width:100%}#Sidebar .sidebar-scroll{width:240px}#Sidebar .sidebar-scroll .sidebar-con{height:calc(100vh - 110px)}#Sidebar.open .sidebar-scroll .brand-con .title{width:0}#Sidebar .sidebar-scroll .brand-con .title{width:110px}#Sidebar .sidebar-shadow{opacity:.7;visibility:visible}#Sidebar.open .sidebar-shadow{opacity:0;visibility:hidden}#Sidebar .toggle{transform:scaleX(-1)}#Sidebar .toggle,#Sidebar .toggle:hover{color:var(--white)}#Sidebar.open .toggle{color:var(--comp);transform:scaleX(1)}#Sidebar.open .toggle:hover{color:var(--comp-dark)}}@media (min-width:500px) and (max-width:599.98px){#Sidebar{height:calc(100vh - 60px);min-height:calc(100vh - 60px)}#Sidebar,#Sidebar.open{width:0}#Sidebar.open .sidebar-scroll{width:100%}#Sidebar .sidebar-scroll{width:260px}#Sidebar .sidebar-scroll .sidebar-con{height:calc(100vh - 110px)}#Sidebar.open .sidebar-scroll .brand-con .title{width:0}#Sidebar .sidebar-scroll .brand-con .title{width:110px}#Sidebar .sidebar-shadow{opacity:.7;visibility:visible}#Sidebar.open .sidebar-shadow{opacity:0;visibility:hidden}#Sidebar .toggle{transform:scaleX(-1)}#Sidebar .toggle,#Sidebar .toggle:hover{color:var(--white)}#Sidebar.open .toggle{color:var(--comp);transform:scaleX(1)}#Sidebar.open .toggle:hover{color:var(--comp-dark)}}@media (min-width:600px) and (max-width:699.98px){#Sidebar,#Sidebar.open{width:0}#Sidebar.open .sidebar-scroll{width:100%}#Sidebar .sidebar-scroll{width:260px}#Sidebar.open .sidebar-scroll .brand-con .title{width:0}#Sidebar .sidebar-scroll .brand-con .title{width:110px}#Sidebar .sidebar-shadow{opacity:.7;visibility:visible}#Sidebar.open .sidebar-shadow{opacity:0;visibility:hidden}#Sidebar .toggle{transform:scaleX(-1)}#Sidebar .toggle,#Sidebar .toggle:hover{color:var(--white)}#Sidebar.open .toggle{color:var(--comp);transform:scaleX(1)}#Sidebar.open .toggle:hover{color:var(--comp-dark)}}@media (min-width:700px) and (max-width:799.98px){#Sidebar,#Sidebar.open{width:60px}#Sidebar.open .sidebar-scroll{width:100%}#Sidebar .sidebar-scroll{width:260px}#Sidebar.open .sidebar-scroll .brand-con .title{width:0}#Sidebar .sidebar-scroll .brand-con .title{width:110px}#Sidebar .sidebar-shadow{opacity:.7;visibility:visible}#Sidebar.open .sidebar-shadow{opacity:0;visibility:hidden}#Sidebar .toggle{transform:scaleX(-1)}#Sidebar .toggle,#Sidebar .toggle:hover{color:var(--white)}#Sidebar.open .toggle{color:var(--comp);transform:scaleX(1)}#Sidebar.open .toggle:hover{color:var(--comp-dark)}}@media (min-width:800px) and (max-width:899.98px){#Sidebar,#Sidebar.open{width:60px}#Sidebar.open .sidebar-scroll{width:100%}#Sidebar .sidebar-scroll{width:260px}#Sidebar.open .sidebar-scroll .brand-con .title{width:0}#Sidebar .sidebar-scroll .brand-con .title{width:110px}#Sidebar .sidebar-shadow{opacity:.7;visibility:visible}#Sidebar.open .sidebar-shadow{opacity:0;visibility:hidden}#Sidebar .toggle{transform:scaleX(-1)}#Sidebar .toggle,#Sidebar .toggle:hover{color:var(--white)}#Sidebar.open .toggle{color:var(--comp);transform:scaleX(1)}#Sidebar.open .toggle:hover{color:var(--comp-dark)}}@media (min-width:900px) and (max-width:999.98px){#Sidebar,#Sidebar.open{width:78px}#Sidebar.open .sidebar-scroll{width:100%}#Sidebar .sidebar-scroll{width:260px}#Sidebar.open .sidebar-scroll .brand-con .title{width:0}#Sidebar .sidebar-scroll .brand-con .title{width:110px}#Sidebar .sidebar-shadow{opacity:.7;visibility:visible}#Sidebar.open .sidebar-shadow{opacity:0;visibility:hidden}#Sidebar .toggle{transform:scaleX(-1)}#Sidebar .toggle,#Sidebar .toggle:hover{color:var(--white)}#Sidebar.open .toggle{color:var(--comp);transform:scaleX(1)}#Sidebar.open .toggle:hover{color:var(--comp-dark)}}@media (min-width:1000px) and (max-width:1099.98px){#Sidebar,#Sidebar.open{width:78px}#Sidebar.open .sidebar-scroll{width:100%}#Sidebar .sidebar-scroll{width:260px}#Sidebar.open .sidebar-scroll .brand-con .title{width:0}#Sidebar .sidebar-scroll .brand-con .title{width:110px}#Sidebar .sidebar-shadow{opacity:.7;visibility:visible}#Sidebar.open .sidebar-shadow{opacity:0;visibility:hidden}#Sidebar .toggle{transform:scaleX(-1)}#Sidebar .toggle,#Sidebar .toggle:hover{color:var(--white)}#Sidebar.open .toggle{color:var(--comp);transform:scaleX(1)}#Sidebar.open .toggle:hover{color:var(--comp-dark)}}@media (min-width:1100px) and (max-width:1199.98px){#Sidebar,#Sidebar.open{width:78px}#Sidebar.open .sidebar-scroll{width:100%}#Sidebar .sidebar-scroll{width:260px}#Sidebar.open .sidebar-scroll .brand-con .title{width:0}#Sidebar .sidebar-scroll .brand-con .title{width:110px}#Sidebar .sidebar-shadow{opacity:.7;visibility:visible}#Sidebar.open .sidebar-shadow{opacity:0;visibility:hidden}#Sidebar .toggle{transform:scaleX(-1)}#Sidebar .toggle,#Sidebar .toggle:hover{color:var(--white)}#Sidebar.open .toggle{color:var(--comp);transform:scaleX(1)}#Sidebar.open .toggle:hover{color:var(--comp-dark)}}"]
             },] }
 ];
 SidebarComponent.ctorParameters = () => [

package/fesm2015/ps-toolkit-ui.js

@@ -1550,12 +1550,15 @@ class HeaderComponent {
             this.logout.emit();
         };
     }
+    showUserDropDown(e) {
+        $(e.target).closest('#Header').find('.user-drop-down').slideToggle();
+    }
 }
 HeaderComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-header',
-                template: "<div id=\"Header\" class=\"underline\">\r\n  <div class=\"content\"><ng-content></ng-content></div>\r\n  <div class=\"logout\">\r\n    <lib-form-button [inp]=\"logoutInp\"></lib-form-button>\r\n  </div>\r\n</div>\r\n",
-                styles: ["#Header{background-color:#fff;float:right;height:50px;position:relative;width:100%;z-index:11}#Header .content{float:right;height:100%;width:calc(100% - 150px)}#Header .logout{float:left;padding:10px 30px;width:150px}@media (max-width:399.98px){#Header .toggle-sidebar{display:block}}@media (min-width:400px) and (max-width:499.98px){#Header .toggle-sidebar{display:block}}@media (min-width:500px) and (max-width:599.98px){#Header .toggle-sidebar{display:block}}@media (min-width:600px) and (max-width:699.98px){#Header .toggle-sidebar{display:block}}@media (min-width:700px) and (max-width:799.98px){#Header .toggle-sidebar{display:block}}"]
+                template: "<div id=\"Header\" class=\"underline\">\r\n  <div class=\"content\"><ng-content></ng-content></div>\r\n  <div (click)=\"showUserDropDown($event)\" class=\"user-con\"><i class=\"fa-duotone fa-user user\"></i></div>\r\n  <div class=\"user-drop-down\">\r\n    <lib-form-button [inp]=\"logoutInp\"></lib-form-button>\r\n  </div>\r\n</div>\r\n",
+                styles: ["#Header{background-color:#fff;float:right;height:50px;position:relative;width:100%;z-index:11}#Header .content{float:right;height:100%;margin-right:50px;text-align:center;width:calc(100% - 150px)}#Header .user-con{align-items:center;display:flex;float:right;height:100%;justify-content:center;width:100px}#Header .user-con .user{background-color:var(--base-22);border-radius:50%;color:var(--comp);cursor:pointer;float:right;font-size:18px;height:30px;line-height:30px;text-align:center;width:30px}#Header .user-con .user:hover{color:var(--comp-dark)}#Header .user-drop-down{background-color:#fff;border-radius:5px;box-shadow:var(--box-shadow);display:none;overflow:hidden;position:absolute;right:0;top:50px;transition:all .3s;width:200px}@media (max-width:399.98px){#Header .content{font-size:12px;width:calc(100% - 100px)}#Header .user-con{width:50px}}@media (min-width:400px) and (max-width:499.98px){#Header .content{font-size:12px;width:calc(100% - 100px)}#Header .user-con{width:50px}}"]
             },] }
 ];
 HeaderComponent.ctorParameters = () => [
@@ -1622,7 +1625,7 @@ SidebarItemComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-sidebar-item',
                 template: "<div [className]=\"(isActive(item) ? 'parent-active open ' : '') + 'user-sidebar-item'\">\r\n  <a [style]=\"{paddingRight: (i * 25) + 'px'}\" *ngIf=\"item.children.length == 0\" [className]=\"(currentSidebar && item.name == currentSidebar.name ? 'active ' : '') + 'content'\" [routerLink]=\"(area ? '/' + area : '') + '/' + (item.controller == 'Dashboard' ? '' : (item.controller + (item.action ? '/' + item.action : '')))\">\r\n    <i [className]=\"item.icon + ' icon'\"></i>\r\n    <div class=\"title\">{{ l(item.name) }}</div>\r\n  </a>\r\n  <div [style]=\"{paddingRight: (i * 25) + 'px'}\" *ngIf=\"item.children.length > 0\" (click)=\"openClose($event)\" class=\"content parent\">\r\n    <i [className]=\"item.icon + ' icon'\"></i>\r\n    <div class=\"title\">{{ l(item.name) }}</div>\r\n    <i [className]=\"'fa-duotone fa-angle-left arrow'\"></i>\r\n  </div>\r\n  <div *ngIf=\"item.children.length > 0\" class=\"children\">\r\n    <div class=\"items\">\r\n      <lib-sidebar-item [i]=\"i + 1\" [item]=\"child\" [currentSidebar]=\"currentSidebar\" [area]=\"area\" *ngFor=\"let child of item.children\"></lib-sidebar-item>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                styles: [".user-sidebar-item{float:left;position:relative;text-align:center;width:100%}.user-sidebar-item .content{align-items:center;cursor:pointer;direction:rtl;display:flex;float:right;justify-content:right;position:relative;transition:all .3s;width:100%}.user-sidebar-item .dot{background-color:var(--base);border:2px solid hsla(0,0%,93.3%,.4);border-radius:50%;height:10px;position:absolute;right:-15px;top:15px;width:10px;z-index:2}.user-sidebar-item .dot.active{background-color:var(--base-11);border:2px solid var(--base-11)}.user-sidebar-item.parent-active>.dot.parent{background-color:hsla(0,0%,93.3%,.4);border:none}.user-sidebar-item .dot.back{background-color:var(--base);border:none;z-index:1}.user-sidebar-item .children{display:none;float:left;position:relative;width:100%}.user-sidebar-item .children .items{float:left;width:100%}.user-sidebar-item .children .line{background-color:hsla(0,0%,93.3%,.4);height:calc(100% - 20px);left:calc(85% + 10px);position:absolute;top:0;width:1px}.user-sidebar-item .content .title{color:hsla(0,0%,100%,.8);float:right;font-family:VazirLight;font-size:12px;height:45px;line-height:45px;overflow:hidden;transition:all .3s;width:0}.user-sidebar-item .content .icon{color:hsla(0,0%,100%,.6666666666666666);float:right;font-size:18px;height:45px;line-height:45px;transition:all .3s;width:100%}.user-sidebar-item .content .arrow{color:hsla(0,0%,100%,.8);font-size:13px;height:45px;line-height:45px;overflow:hidden;text-align:right;transition:all .3s;width:0}::ng-deep #Sidebar.open .user-sidebar-item .content .title{width:calc(100% - 100px)}::ng-deep #Sidebar.open .user-sidebar-item .content .icon{width:70px}::ng-deep #Sidebar.open .user-sidebar-item .content .arrow{width:30px}::ng-deep #Sidebar.close .user-sidebar-item .content{padding:0!important}.user-sidebar-item.open .content .arrow{transform:rotate(-90deg)}.user-sidebar-item>.children .content .icon{font-size:11px}.user-sidebar-item.parent-active>.content,.user-sidebar-item:hover>.content{background-color:var(--base-dark)}.user-sidebar-item.parent-active>.content .title,.user-sidebar-item:hover>.content .title{color:#fff;font-family:VazirBold}.user-sidebar-item.parent-active>.content .icon,.user-sidebar-item:hover>.content .icon{color:var(--comp)}.user-sidebar-item.parent-active>.content .arrow,.user-sidebar-item:hover>.content .arrow{color:#fff}.user-sidebar-item.parent-active>.children{display:block}@media (max-width:399.98px){.user-sidebar-item .content .title{font-size:11px;width:calc(100% - 30px)}.user-sidebar-item .content .icon{font-size:13px;width:30px}}@media (min-width:400px) and (max-width:499.98px){.user-sidebar-item .content .title{font-size:11px;width:calc(100% - 30px)}.user-sidebar-item .content .icon{font-size:13px;width:30px}}@media (min-width:500px) and (max-width:599.98px){.user-sidebar-item .content .title{font-size:11px;width:calc(100% - 30px)}.user-sidebar-item .content .icon{font-size:13px;width:30px}}@media (min-width:600px) and (max-width:699.98px){.user-sidebar-item .content .title{font-size:11px;width:calc(100% - 30px)}.user-sidebar-item .content .icon{font-size:13px;width:30px}}@media (min-width:700px) and (max-width:799.98px){.user-sidebar-item .content .title{font-size:11px;width:calc(100% - 30px)}.user-sidebar-item .content .icon{font-size:13px;width:30px}}@media (min-width:800px) and (max-width:899.98px){.user-sidebar-item .content .title{font-size:11px;width:calc(100% - 30px)}.user-sidebar-item .content .icon{font-size:13px;width:30px}}@media (min-width:900px) and (max-width:999.98px){.user-sidebar-item .content .title{font-size:11px;width:calc(100% - 30px)}.user-sidebar-item .content .icon{font-size:13px;width:30px}}@media (min-width:1100px) and (max-width:1199.98px){::ng-deep #Sidebar .user-sidebar-item .content .title{width:calc(100% - 100px)}::ng-deep #Sidebar.open .user-sidebar-item .content .title{width:0}::ng-deep #Sidebar .user-sidebar-item .content .icon{width:70px}::ng-deep #Sidebar.open .user-sidebar-item .content .icon{width:100%}::ng-deep #Sidebar .user-sidebar-item .content .arrow{width:30px}::ng-deep #Sidebar.open .user-sidebar-item .content .arrow{width:0}}"]
+                styles: [".user-sidebar-item{float:left;position:relative;text-align:center;width:100%}.user-sidebar-item .content{align-items:center;cursor:pointer;direction:rtl;display:flex;float:right;justify-content:right;position:relative;transition:all .3s;width:100%}.user-sidebar-item .dot{background-color:var(--base);border:2px solid hsla(0,0%,93.3%,.4);border-radius:50%;height:10px;position:absolute;right:-15px;top:15px;width:10px;z-index:2}.user-sidebar-item .dot.active{background-color:var(--base-11);border:2px solid var(--base-11)}.user-sidebar-item.parent-active>.dot.parent{background-color:hsla(0,0%,93.3%,.4);border:none}.user-sidebar-item .dot.back{background-color:var(--base);border:none;z-index:1}.user-sidebar-item .children{display:none;float:left;position:relative;width:100%}.user-sidebar-item .children .items{float:left;width:100%}.user-sidebar-item .children .line{background-color:hsla(0,0%,93.3%,.4);height:calc(100% - 20px);left:calc(85% + 10px);position:absolute;top:0;width:1px}.user-sidebar-item .content .title{color:hsla(0,0%,100%,.8);float:right;font-family:VazirLight;font-size:12px;height:45px;line-height:45px;overflow:hidden;transition:all .3s;width:0}.user-sidebar-item .content .icon{color:hsla(0,0%,100%,.6666666666666666);float:right;font-size:18px;height:45px;line-height:45px;transition:all .3s;width:100%}.user-sidebar-item .content .arrow{color:hsla(0,0%,100%,.8);font-size:13px;height:45px;line-height:45px;overflow:hidden;text-align:right;transition:all .3s;width:0}::ng-deep #Sidebar.open .user-sidebar-item .content .title{width:calc(100% - 100px)}::ng-deep #Sidebar.open .user-sidebar-item .content .icon{width:70px}::ng-deep #Sidebar.open .user-sidebar-item .content .arrow{width:30px}::ng-deep #Sidebar.close .user-sidebar-item .content{padding:0!important}.user-sidebar-item.open .content .arrow{transform:rotate(-90deg)}.user-sidebar-item>.children .content .icon{font-size:11px}.user-sidebar-item.parent-active>.content,.user-sidebar-item:hover>.content{background-color:var(--base-dark)}.user-sidebar-item.parent-active>.content .title,.user-sidebar-item:hover>.content .title{color:#fff;font-family:VazirBold}.user-sidebar-item.parent-active>.content .icon,.user-sidebar-item:hover>.content .icon{color:var(--comp)}.user-sidebar-item.parent-active>.content .arrow,.user-sidebar-item:hover>.content .arrow{color:#fff}.user-sidebar-item.parent-active>.children{display:block}@media (max-width:399.98px){::ng-deep #Sidebar .user-sidebar-item .content .title{width:calc(100% - 100px)}::ng-deep #Sidebar.open .user-sidebar-item .content .title{width:0}::ng-deep #Sidebar .user-sidebar-item .content .icon{width:70px}::ng-deep #Sidebar.open .user-sidebar-item .content .icon{width:100%}::ng-deep #Sidebar .user-sidebar-item .content .arrow{width:30px}::ng-deep #Sidebar.open .user-sidebar-item .content .arrow{width:0}}@media (min-width:400px) and (max-width:499.98px){::ng-deep #Sidebar .user-sidebar-item .content .title{width:calc(100% - 100px)}::ng-deep #Sidebar.open .user-sidebar-item .content .title{width:0}::ng-deep #Sidebar .user-sidebar-item .content .icon{width:70px}::ng-deep #Sidebar.open .user-sidebar-item .content .icon{width:100%}::ng-deep #Sidebar .user-sidebar-item .content .arrow{width:30px}::ng-deep #Sidebar.open .user-sidebar-item .content .arrow{width:0}}@media (min-width:500px) and (max-width:599.98px){::ng-deep #Sidebar .user-sidebar-item .content .title{width:calc(100% - 100px)}::ng-deep #Sidebar.open .user-sidebar-item .content .title{width:0}::ng-deep #Sidebar .user-sidebar-item .content .icon{width:70px}::ng-deep #Sidebar.open .user-sidebar-item .content .icon{width:100%}::ng-deep #Sidebar .user-sidebar-item .content .arrow{width:30px}::ng-deep #Sidebar.open .user-sidebar-item .content .arrow{width:0}}@media (min-width:600px) and (max-width:699.98px){::ng-deep #Sidebar .user-sidebar-item .content .title{width:calc(100% - 100px)}::ng-deep #Sidebar.open .user-sidebar-item .content .title{width:0}::ng-deep #Sidebar .user-sidebar-item .content .icon{width:70px}::ng-deep #Sidebar.open .user-sidebar-item .content .icon{width:100%}::ng-deep #Sidebar .user-sidebar-item .content .arrow{width:30px}::ng-deep #Sidebar.open .user-sidebar-item .content .arrow{width:0}}@media (min-width:700px) and (max-width:799.98px){::ng-deep #Sidebar .user-sidebar-item .content .title{width:calc(100% - 100px)}::ng-deep #Sidebar.open .user-sidebar-item .content .title{width:0}::ng-deep #Sidebar .user-sidebar-item .content .icon{width:70px}::ng-deep #Sidebar.open .user-sidebar-item .content .icon{width:100%}::ng-deep #Sidebar .user-sidebar-item .content .arrow{width:30px}::ng-deep #Sidebar.open .user-sidebar-item .content .arrow{width:0}}@media (min-width:800px) and (max-width:899.98px){::ng-deep #Sidebar .user-sidebar-item .content .title{width:calc(100% - 100px)}::ng-deep #Sidebar.open .user-sidebar-item .content .title{width:0}::ng-deep #Sidebar .user-sidebar-item .content .icon{width:70px}::ng-deep #Sidebar.open .user-sidebar-item .content .icon{width:100%}::ng-deep #Sidebar .user-sidebar-item .content .arrow{width:30px}::ng-deep #Sidebar.open .user-sidebar-item .content .arrow{width:0}}@media (min-width:900px) and (max-width:999.98px){::ng-deep #Sidebar .user-sidebar-item .content .title{width:calc(100% - 100px)}::ng-deep #Sidebar.open .user-sidebar-item .content .title{width:0}::ng-deep #Sidebar .user-sidebar-item .content .icon{width:70px}::ng-deep #Sidebar.open .user-sidebar-item .content .icon{width:100%}::ng-deep #Sidebar .user-sidebar-item .content .arrow{width:30px}::ng-deep #Sidebar.open .user-sidebar-item .content .arrow{width:0}}@media (min-width:1000px) and (max-width:1099.98px){::ng-deep #Sidebar .user-sidebar-item .content .title{width:calc(100% - 100px)}::ng-deep #Sidebar.open .user-sidebar-item .content .title{width:0}::ng-deep #Sidebar .user-sidebar-item .content .icon{width:70px}::ng-deep #Sidebar.open .user-sidebar-item .content .icon{width:100%}::ng-deep #Sidebar .user-sidebar-item .content .arrow{width:30px}::ng-deep #Sidebar.open .user-sidebar-item .content .arrow{width:0}}@media (min-width:1100px) and (max-width:1199.98px){::ng-deep #Sidebar .user-sidebar-item .content .title{width:calc(100% - 100px)}::ng-deep #Sidebar.open .user-sidebar-item .content .title{width:0}::ng-deep #Sidebar .user-sidebar-item .content .icon{width:70px}::ng-deep #Sidebar.open .user-sidebar-item .content .icon{width:100%}::ng-deep #Sidebar .user-sidebar-item .content .arrow{width:30px}::ng-deep #Sidebar.open .user-sidebar-item .content .arrow{width:0}}"]
             },] }
 ];
 SidebarItemComponent.ctorParameters = () => [
@@ -1697,7 +1700,7 @@ SidebarComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-sidebar',
                 template: "<div id=\"Sidebar\" class=\"open\">\r\n  <div class=\"sidebar-shadow\" (click)=\"toggleSidebar.emit()\"></div>\r\n  <div class=\"sidebar-scroll\">\r\n    <i (click)=\"toggleSidebar.emit()\" class=\"toggle fa-duotone fa-angle-double-left\"></i>\r\n    <div class=\"brand-con\">\r\n      <div class=\"logo\"></div>\r\n      <div class=\"title\">\r\n        {{l('SoftwareName')}}\r\n        <div class=\"version\">{{l('Version', version)}}</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"sidebar-con\" id=\"sidebar-con\">\r\n      <span *ngFor=\"let item of sidebar\">\r\n        <lib-sidebar-item [i]=\"0\" [item]=\"item\" [base]=\"true\" [currentSidebar]=\"currentSidebar\" [area]=\"area\"></lib-sidebar-item>\r\n      </span>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                styles: ["#Sidebar{background-color:var(--base);height:calc(100vh - 35px);min-height:calc(100vh - 35px);position:relative;transition:width .3s;width:78px;z-index:12}#Sidebar,#Sidebar .sidebar-shadow{-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;direction:ltr;float:right}#Sidebar .sidebar-shadow{background-color:var(--black);height:100vh;left:0;min-height:100vh;opacity:0;overflow:hidden;position:fixed;transition:all .3s;visibility:hidden;width:100%;z-index:9}#Sidebar.open{width:260px}#Sidebar .sidebar-scroll{background-color:var(--base);height:100%;position:absolute;right:0;top:0;transition:all .3s;width:100%;z-index:11}#Sidebar .sidebar-scroll .sidebar-con{direction:ltr;float:right;height:calc(100vh - 85px);overflow-x:hidden;overflow-y:auto;width:100%}#Sidebar .sidebar-scroll .brand-con{align-items:center;background-color:var(--base-dark);direction:rtl;display:flex;float:right;height:50px;justify-content:center;padding:10px;width:100%}#Sidebar .sidebar-scroll .brand-con .logo{background-position:50%;background-repeat:no-repeat;background-size:contain;float:right;height:30px;width:30px}#Sidebar .sidebar-scroll .brand-con .title{align-items:center;color:#fff;display:flex;font-family:VazirBold;font-size:15px;height:100%;justify-content:center;overflow:hidden;position:relative;top:-4px;transition:all .3s;width:0}#Sidebar.open .sidebar-scroll .brand-con .title{width:110px}#Sidebar .sidebar-scroll .brand-con .title .version{font-family:VazirLight;font-size:9px;position:absolute;top:17px}#Sidebar .toggle{color:var(--comp);cursor:pointer;float:left;font-size:18px;height:50px;left:-60px;line-height:50px;position:absolute;text-align:center;transform:scaleX(1);transition:all .3s;width:60px}#Sidebar.open .toggle{transform:scaleX(-1)}#Sidebar .toggle:hover{color:var(--comp-dark)}@media (max-width:399.98px){#Sidebar{right:0;width:200px}#Sidebar,#Sidebar .sidebar-shadow{height:calc(100vh - 110px);min-height:calc(100vh - 110px)}#Sidebar .sidebar-shadow{opacity:.7;visibility:visible;width:calc(100% - 200px)}#Sidebar.open .sidebar-shadow{opacity:0;visibility:hidden;width:100%}}@media (min-width:400px) and (max-width:499.98px){#Sidebar{height:calc(100vh - 110px);min-height:calc(100vh - 110px);right:0;width:200px}#Sidebar.open{right:-200px}#Sidebar .sidebar-shadow{height:calc(100vh - 110px);min-height:calc(100vh - 110px);opacity:.7;visibility:visible;width:calc(100% - 200px)}#Sidebar.open .sidebar-shadow{opacity:0;visibility:hidden;width:100%}}@media (min-width:500px) and (max-width:599.98px){#Sidebar{height:calc(100vh - 110px);min-height:calc(100vh - 110px);right:0;width:200px}#Sidebar.open{right:-200px}#Sidebar .sidebar-shadow{height:calc(100vh - 110px);min-height:calc(100vh - 110px);opacity:.7;visibility:visible;width:calc(100% - 200px)}#Sidebar.open .sidebar-shadow{opacity:0;visibility:hidden;width:100%}}@media (min-width:600px) and (max-width:699.98px){#Sidebar{right:0;width:200px}#Sidebar.open{right:-200px}#Sidebar .sidebar-shadow{opacity:.7;visibility:visible;width:calc(100% - 200px)}#Sidebar.open .sidebar-shadow{opacity:0;visibility:hidden;width:100%}}@media (min-width:700px) and (max-width:799.98px){#Sidebar{right:0;width:200px}#Sidebar.open{right:-200px}#Sidebar .sidebar-shadow{opacity:.7;visibility:visible;width:calc(100% - 200px)}#Sidebar.open .sidebar-shadow{opacity:0;visibility:hidden;width:100%}}@media (min-width:800px) and (max-width:899.98px){#Sidebar{right:-200px;width:200px}#Sidebar.open{right:0}}@media (min-width:900px) and (max-width:999.98px){#Sidebar{right:-200px;width:200px}#Sidebar.open{right:0}}@media (min-width:1000px) and (max-width:1099.98px){#Sidebar{right:-200px;width:200px}#Sidebar.open{right:0}}@media (min-width:1100px) and (max-width:1199.98px){#Sidebar,#Sidebar.open{width:78px}#Sidebar.open .sidebar-scroll{width:100%}#Sidebar .sidebar-scroll{width:260px}#Sidebar.open .sidebar-scroll .brand-con .title{width:0}#Sidebar .sidebar-scroll .brand-con .title{width:110px}#Sidebar .sidebar-shadow{opacity:.7;visibility:visible}#Sidebar.open .sidebar-shadow{opacity:0;visibility:hidden}#Sidebar .toggle{transform:scaleX(-1)}#Sidebar .toggle,#Sidebar .toggle:hover{color:var(--white)}#Sidebar.open .toggle{color:var(--comp);transform:scaleX(1)}#Sidebar.open .toggle:hover{color:var(--comp-dark)}}"]
+                styles: ["#Sidebar{background-color:var(--base);height:calc(100vh - 35px);min-height:calc(100vh - 35px);position:relative;transition:width .3s;width:78px;z-index:12}#Sidebar,#Sidebar .sidebar-shadow{-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;direction:ltr;float:right}#Sidebar .sidebar-shadow{background-color:var(--black);height:100vh;left:0;min-height:100vh;opacity:0;overflow:hidden;position:fixed;transition:all .3s;visibility:hidden;width:100%;z-index:9}#Sidebar.open{width:260px}#Sidebar .sidebar-scroll{background-color:var(--base);height:100%;position:absolute;right:0;top:0;transition:all .3s;width:100%;z-index:11}#Sidebar .sidebar-scroll .sidebar-con{direction:ltr;float:right;height:calc(100vh - 85px);overflow-x:hidden;overflow-y:auto;width:100%}#Sidebar .sidebar-scroll .brand-con{align-items:center;background-color:var(--base-dark);direction:rtl;display:flex;float:right;height:50px;justify-content:center;width:100%}#Sidebar .sidebar-scroll .brand-con .logo{background-position:50%;background-repeat:no-repeat;background-size:contain;float:right;height:30px;width:30px}#Sidebar .sidebar-scroll .brand-con .title{align-items:center;color:#fff;display:flex;font-family:VazirBold;font-size:15px;height:100%;justify-content:center;overflow:hidden;position:relative;top:-4px;transition:all .3s;width:0}#Sidebar.open .sidebar-scroll .brand-con .title{width:110px}#Sidebar .sidebar-scroll .brand-con .title .version{font-family:VazirLight;font-size:9px;position:absolute;top:27px}#Sidebar .toggle{color:var(--comp);cursor:pointer;float:left;font-size:18px;height:50px;left:-50px;line-height:50px;position:absolute;text-align:center;transform:scaleX(1);transition:all .3s;width:50px}#Sidebar.open .toggle{transform:scaleX(-1)}#Sidebar .toggle:hover{color:var(--comp-dark)}@media (max-width:399.98px){#Sidebar{height:calc(100vh - 60px);min-height:calc(100vh - 60px)}#Sidebar,#Sidebar.open{width:0}#Sidebar.open .sidebar-scroll{width:100%}#Sidebar .sidebar-scroll{width:260px}#Sidebar .sidebar-scroll .sidebar-con{height:calc(100vh - 110px)}#Sidebar.open .sidebar-scroll .brand-con .title{width:0}#Sidebar .sidebar-scroll .brand-con .title{width:110px}#Sidebar .sidebar-shadow{opacity:.7;visibility:visible}#Sidebar.open .sidebar-shadow{opacity:0;visibility:hidden}#Sidebar .toggle{transform:scaleX(-1)}#Sidebar .toggle,#Sidebar .toggle:hover{color:var(--white)}#Sidebar.open .toggle{color:var(--comp);transform:scaleX(1)}#Sidebar.open .toggle:hover{color:var(--comp-dark)}}@media (min-width:400px) and (max-width:499.98px){#Sidebar{height:calc(100vh - 60px);min-height:calc(100vh - 60px)}#Sidebar,#Sidebar.open{width:0}#Sidebar.open .sidebar-scroll{width:100%}#Sidebar .sidebar-scroll{width:240px}#Sidebar .sidebar-scroll .sidebar-con{height:calc(100vh - 110px)}#Sidebar.open .sidebar-scroll .brand-con .title{width:0}#Sidebar .sidebar-scroll .brand-con .title{width:110px}#Sidebar .sidebar-shadow{opacity:.7;visibility:visible}#Sidebar.open .sidebar-shadow{opacity:0;visibility:hidden}#Sidebar .toggle{transform:scaleX(-1)}#Sidebar .toggle,#Sidebar .toggle:hover{color:var(--white)}#Sidebar.open .toggle{color:var(--comp);transform:scaleX(1)}#Sidebar.open .toggle:hover{color:var(--comp-dark)}}@media (min-width:500px) and (max-width:599.98px){#Sidebar{height:calc(100vh - 60px);min-height:calc(100vh - 60px)}#Sidebar,#Sidebar.open{width:0}#Sidebar.open .sidebar-scroll{width:100%}#Sidebar .sidebar-scroll{width:260px}#Sidebar .sidebar-scroll .sidebar-con{height:calc(100vh - 110px)}#Sidebar.open .sidebar-scroll .brand-con .title{width:0}#Sidebar .sidebar-scroll .brand-con .title{width:110px}#Sidebar .sidebar-shadow{opacity:.7;visibility:visible}#Sidebar.open .sidebar-shadow{opacity:0;visibility:hidden}#Sidebar .toggle{transform:scaleX(-1)}#Sidebar .toggle,#Sidebar .toggle:hover{color:var(--white)}#Sidebar.open .toggle{color:var(--comp);transform:scaleX(1)}#Sidebar.open .toggle:hover{color:var(--comp-dark)}}@media (min-width:600px) and (max-width:699.98px){#Sidebar,#Sidebar.open{width:0}#Sidebar.open .sidebar-scroll{width:100%}#Sidebar .sidebar-scroll{width:260px}#Sidebar.open .sidebar-scroll .brand-con .title{width:0}#Sidebar .sidebar-scroll .brand-con .title{width:110px}#Sidebar .sidebar-shadow{opacity:.7;visibility:visible}#Sidebar.open .sidebar-shadow{opacity:0;visibility:hidden}#Sidebar .toggle{transform:scaleX(-1)}#Sidebar .toggle,#Sidebar .toggle:hover{color:var(--white)}#Sidebar.open .toggle{color:var(--comp);transform:scaleX(1)}#Sidebar.open .toggle:hover{color:var(--comp-dark)}}@media (min-width:700px) and (max-width:799.98px){#Sidebar,#Sidebar.open{width:60px}#Sidebar.open .sidebar-scroll{width:100%}#Sidebar .sidebar-scroll{width:260px}#Sidebar.open .sidebar-scroll .brand-con .title{width:0}#Sidebar .sidebar-scroll .brand-con .title{width:110px}#Sidebar .sidebar-shadow{opacity:.7;visibility:visible}#Sidebar.open .sidebar-shadow{opacity:0;visibility:hidden}#Sidebar .toggle{transform:scaleX(-1)}#Sidebar .toggle,#Sidebar .toggle:hover{color:var(--white)}#Sidebar.open .toggle{color:var(--comp);transform:scaleX(1)}#Sidebar.open .toggle:hover{color:var(--comp-dark)}}@media (min-width:800px) and (max-width:899.98px){#Sidebar,#Sidebar.open{width:60px}#Sidebar.open .sidebar-scroll{width:100%}#Sidebar .sidebar-scroll{width:260px}#Sidebar.open .sidebar-scroll .brand-con .title{width:0}#Sidebar .sidebar-scroll .brand-con .title{width:110px}#Sidebar .sidebar-shadow{opacity:.7;visibility:visible}#Sidebar.open .sidebar-shadow{opacity:0;visibility:hidden}#Sidebar .toggle{transform:scaleX(-1)}#Sidebar .toggle,#Sidebar .toggle:hover{color:var(--white)}#Sidebar.open .toggle{color:var(--comp);transform:scaleX(1)}#Sidebar.open .toggle:hover{color:var(--comp-dark)}}@media (min-width:900px) and (max-width:999.98px){#Sidebar,#Sidebar.open{width:78px}#Sidebar.open .sidebar-scroll{width:100%}#Sidebar .sidebar-scroll{width:260px}#Sidebar.open .sidebar-scroll .brand-con .title{width:0}#Sidebar .sidebar-scroll .brand-con .title{width:110px}#Sidebar .sidebar-shadow{opacity:.7;visibility:visible}#Sidebar.open .sidebar-shadow{opacity:0;visibility:hidden}#Sidebar .toggle{transform:scaleX(-1)}#Sidebar .toggle,#Sidebar .toggle:hover{color:var(--white)}#Sidebar.open .toggle{color:var(--comp);transform:scaleX(1)}#Sidebar.open .toggle:hover{color:var(--comp-dark)}}@media (min-width:1000px) and (max-width:1099.98px){#Sidebar,#Sidebar.open{width:78px}#Sidebar.open .sidebar-scroll{width:100%}#Sidebar .sidebar-scroll{width:260px}#Sidebar.open .sidebar-scroll .brand-con .title{width:0}#Sidebar .sidebar-scroll .brand-con .title{width:110px}#Sidebar .sidebar-shadow{opacity:.7;visibility:visible}#Sidebar.open .sidebar-shadow{opacity:0;visibility:hidden}#Sidebar .toggle{transform:scaleX(-1)}#Sidebar .toggle,#Sidebar .toggle:hover{color:var(--white)}#Sidebar.open .toggle{color:var(--comp);transform:scaleX(1)}#Sidebar.open .toggle:hover{color:var(--comp-dark)}}@media (min-width:1100px) and (max-width:1199.98px){#Sidebar,#Sidebar.open{width:78px}#Sidebar.open .sidebar-scroll{width:100%}#Sidebar .sidebar-scroll{width:260px}#Sidebar.open .sidebar-scroll .brand-con .title{width:0}#Sidebar .sidebar-scroll .brand-con .title{width:110px}#Sidebar .sidebar-shadow{opacity:.7;visibility:visible}#Sidebar.open .sidebar-shadow{opacity:0;visibility:hidden}#Sidebar .toggle{transform:scaleX(-1)}#Sidebar .toggle,#Sidebar .toggle:hover{color:var(--white)}#Sidebar.open .toggle{color:var(--comp);transform:scaleX(1)}#Sidebar.open .toggle:hover{color:var(--comp-dark)}}"]
             },] }
 ];
 SidebarComponent.ctorParameters = () => [