@yomotech/view-toolkit 0.0.30 → 0.0.32

package/src/lib/containers/side-menu/side-menu.component.css

@@ -0,0 +1,173 @@
+.menu-separator {
+  height: 1px;
+  margin: 15px 0 6px;
+  background-color: rgba(255, 255, 255, 0.15);
+  list-style: none;
+}
+
+.side-menu {
+  background-color: #0d1b2a;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  transition: width 0.3s ease;
+  /* position: relative; */
+}
+
+.side-menu ul[nz-menu] {
+  flex: 1; /* fill remaining space */
+  overflow-y: auto; /* ✅ ENABLE SCROLL */
+  overflow-x: hidden;
+  scrollbar-width: thin; /* Firefox */
+  scroll-behavior: smooth;
+}
+
+/* user profile */
+.user-profile {
+  text-align: center;
+  padding: 20px 10px;
+  margin-top: 40px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.user-profile.collapsed {
+  padding: 10px;
+}
+
+.user-profile .avatar {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  margin-bottom: 8px;
+}
+
+.user-profile.collapsed .avatar {
+  width: 40px;
+  height: 40px;
+  margin-bottom: 0;
+}
+
+.user-profile .name {
+  font-weight: 600;
+  font-size: 14px;
+  color: #fff;
+}
+
+.user-profile .email {
+  font-size: 12px;
+  color: #aaa;
+  margin-bottom: 8px;
+  word-break: break-word;
+}
+
+.user-profile .actions button {
+  margin: 0 4px;
+  color: #fff;
+}
+
+/* projects pinned at bottom */
+.projects {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+}
+
+/* responsive tweaks for mobile */
+@media (max-width: 768px) {
+  .side-menu {
+    height: calc(100dvh - var(--header-height));
+    top: var(--header-height);
+  }
+
+  .side-menu.open {
+    width: 250px;
+  }
+
+  .user-profile .details {
+    display: none; /* only avatar on mobile collapsed */
+  }
+
+  .user-profile .avatar {
+    width: 40px;
+    height: 40px;
+  }
+}
+
+.collapse-btn {
+  position: absolute;
+  z-index: 10001;
+}
+
+@media (max-width: 768px) {
+  .collapse-btn {
+    top: calc(var(--header-height) + 8px); /* BELOW header */
+    left: 10px;
+  }
+}
+
+@media (max-width: 768px) {
+  .left-wrap.sidemenu.collapsed .user-profile {
+    max-height: 0;
+    opacity: 0;
+    overflow: hidden;
+    padding: 0;
+    transition: all 0.2s ease;
+  }
+}
+
+.menu-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.menu-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.delete-icon {
+  margin-left: auto;
+  cursor: pointer;
+}
+
+.side-toggle-handle {
+  position: absolute;
+  right: -14px;
+  width: 28px;
+  height: 48px;
+  background: #0d1b2a;
+  border-radius: 0 6px 6px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 10000;
+  transition: all 0.25s ease;
+  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.25);
+}
+
+.side-toggle-handle span {
+  color: #fff;
+  font-size: 14px;
+  transition: transform 0.25s ease;
+}
+
+/* Mobile adjustments */
+@media (max-width: 768px) {
+  .side-toggle-handle {
+    top: calc(var(--header-height) + -56px) !important;
+    padding-left: 10px;
+    transform: none !important;
+  }
+}
+
+@media (min-width: 769px) {
+  .left-wrap.sidemenu.collapsed:hover {
+    transform: translateX(0);
+  }
+}

package/src/lib/containers/side-menu/side-menu.component.html

@@ -0,0 +1,126 @@
+<div class="left-wrap sidemenu" [class.collapsed]="isCollapsed"
+  [ngStyle]="{ 'z-index': !isCollapsed && isMobile ? 999999 : 'auto' }" #sideMenu>
+  <!-- Move toggle button OUTSIDE menu container -->
+  <div class="side-toggle-handle" id="toggle-id" (click)="toggleCollapsed()" [class.collapsed]="isCollapsed">
+    <span id="toggle-icon" nz-icon [nzType]="isCollapsed ? 'caret-right' : 'caret-left'"></span>
+  </div>
+  <div class="side-menu h-screen" id="sidemenuwrap" *ngIf="setLanguage"
+    [ngStyle]="{ width: (isMobile && isCollapsed) ? '1px' : isCollapsed ? '60px' : '' }">
+    <!-- user content -->
+    <ng-container *ngIf="loginedUserInfo && loginedUserInfo?.name">
+      <div class="user-profile" [class.collapsed]="isCollapsed">
+        <img class="avatar" [src]="loginedUserInfo?.image" alt="User" />
+        <div [class]="isMobile ? '' : 'details'" *ngIf="!isCollapsed">
+          <div class="name">{{ loginedUserInfo.name }}</div>
+          <div class="email">{{ loginedUserInfo?.email }}</div>
+          <div class="actions" *ngIf="loginedUserInfo?.actions?.length">
+            <button *ngFor="let action of loginedUserInfo?.actions" nz-button nzType="link" nzSize="small"
+              (click)="invokeNavigate(action)">
+              <span>{{ action?.label?.caption }}</span>
+              <span nz-icon [nzType]="action.icon"></span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </ng-container>
+    <!-- dynamic menu -->
+    <ul nz-menu nzMode="inline" nzTheme="dark" [nzInlineCollapsed]="isCollapsed">
+      <ng-container *ngFor="let item of menuItems">
+        <ng-container *ngIf="!item.submenu && item?.options?.action != 'logout'; else submenu">
+          <span
+            [class]="environment?.login?.type === 'oktaAuth' || environment?.login?.type === 'keycloak' ? item.options?.login === true ? loginedUserInfo?.name ? '' : 'hidden' : item.options?.login === false ? loginedUserInfo?.name ? 'hidden' : '' : '' : userInfo?.userId ? item.options?.login ? item.options.role ? item.options.role == userInfo.userRole ? '' : 'hidden' : '' : 'hidden'  : !item.options?.login ? '' : 'hidden' ">
+            <li (click)="invokeNavigate(item)" nz-menu-item nz-tooltip nzTooltipPlacement="right"
+              [nzTooltipTitle]="isCollapsed && !isMobile ? item?.label?.caption : ''">
+              <span nz-icon [nzType]="item.icon"></span>
+              <span>{{ item?.label?.caption }}</span>
+            </li>
+          </span>
+        </ng-container>
+        <ng-template #submenu>
+          <span
+            [class]="item.options?.login === true && (environment?.login?.type === 'oktaAuth' || environment?.login?.type === 'keycloak') ? loginedUserInfo?.name ? '' : 'hidden' : item.options?.login === false ?  loginedUserInfo?.name ? 'hidden' : '' : ''">
+            <li nz-submenu *ngIf="item?.options?.action != 'logout'" [nzTitle]="item?.label?.caption"
+              [nzIcon]="item.icon">
+              <ul>
+                <ng-container *ngFor="let child of item.submenu">
+                  <li (click)="invokeNavigate(child)" *ngIf="!child.submenu" nz-menu-item nz-tooltip
+                    nzTooltipPlacement="right" [nzTooltipTitle]="isCollapsed && !isMobile ? child?.label?.caption : ''">
+                    <span nz-icon [nzType]="child?.icon"></span>
+                    <span>{{ child?.label?.caption }}</span>
+                  </li>
+                  <ng-container *ngIf="child.submenu">
+                    <li nz-submenu [nzTitle]="child?.label?.caption" [nzIcon]="child?.icon">
+                      <ul>
+                        <ng-container *ngFor="let subChild of child.submenu">
+                          <li (click)="invokeNavigate(subChild)" nz-menu-item>
+                            <ng-container *ngIf="subChild?.options?.setImageUrl; else antIcon">
+                              <img *ngIf="isUrl(subChild?.icon)" [src]="subChild?.icon" alt="icon"
+                                style="width: 16px; height: 16px; margin-right: 8px;" />
+                            </ng-container>
+                            <ng-template #antIcon>
+                              <span nz-icon [nzType]="subChild?.icon"></span>
+                            </ng-template>
+                            <span>{{ subChild?.label?.caption }}</span>
+                          </li>
+                        </ng-container>
+                      </ul>
+                    </li>
+                  </ng-container>
+                </ng-container>
+              </ul>
+            </li>
+          </span>
+        </ng-template>
+      </ng-container>
+
+      <!-- separator -->
+      <li *ngIf="settingMenu.submenu" class="menu-separator"></li>
+
+      <!-- settings menu -->
+      <ng-container *ngIf="!settingMenu.submenu; else settingSubmenu" style="position: absolute; bottom: 0;">
+        <li (click)="invokeNavigate(settingMenu)" nz-menu-item nz-tooltip nzTooltipPlacement="right"
+          [nzTooltipTitle]="isCollapsed && !isMobile ? settingMenu?.label?.caption : ''">
+          <span nz-icon [nzType]="settingMenu.icon"></span>
+          <span>{{ settingMenu?.label?.caption }}</span>
+        </li>
+      </ng-container>
+      <ng-template #settingSubmenu>
+        <li nz-submenu [nzTitle]="settingMenu?.label?.caption" [nzIcon]="settingMenu.icon">
+          <ul>
+            <ng-container *ngFor="let child of settingMenu.submenu">
+              <li (click)="invokeNavigate(child)" *ngIf="!child.submenu" nz-menu-item nz-tooltip
+                nzTooltipPlacement="right" [nzTooltipTitle]="isCollapsed && !isMobile ? child?.label?.caption : ''">
+                <span nz-icon [nzType]="child?.icon"></span>
+                <span>{{ child?.label?.caption }}</span>
+              </li>
+              <ng-container *ngIf="child.submenu">
+                <li nz-submenu [nzTitle]="child?.label?.caption" [nzIcon]="child?.icon">
+                  <ul style="width: 260px;">
+                    <ng-container *ngFor="let subChild of child.submenu; let i = index">
+                      <li (click)="invokeNavigate(subChild, child)" nz-menu-item>
+                        <span [class]="child?.label?.caption === 'Languages' ? '' : 'menu-row'">
+                          <ng-container *ngIf="subChild?.options?.setImageUrl; else antIcon">
+                            <img *ngIf="isUrl(subChild?.icon)" [src]="subChild?.icon" alt="icon"
+                              style="width: 16px; height: 16px; margin-right: 8px;" />
+                          </ng-container>
+                          <ng-template #antIcon>
+                            <span nz-icon [nzType]="subChild?.icon"></span>
+                          </ng-template>
+                          <span>{{ subChild?.label?.caption }}</span>
+                          <!-- Delete icon (prevent click bubbling) -->
+                          <span *ngIf="child?.label?.caption != 'Languages'" nz-icon nzType="delete" class="delete-icon"
+                            style="padding-left: 5%;" (click)="deleteMenuItem(subChild, i, $event)"></span>
+                        </span>
+                      </li>
+                    </ng-container>
+                  </ul>
+                </li>
+              </ng-container>
+            </ng-container>
+          </ul>
+        </li>
+      </ng-template>
+
+    </ul>
+  </div>
+</div>