Skip to content

M
myAppraisal
Commit 6a9576b0 by Ooh-Ao
Options

logo

parent 2e49948e
Showing with 83 additions and 72 deletions
src/app/shared/components/sidebar/sidebar.component.html
<!-- Start::app-sidebar --> <!-- Start::app-sidebar -->
<aside class="app-sidebar" [ngClass]="{ 'sticky-pin': scrolled }" id="sidebar"> <aside class="app-sidebar" [ngClass]="{ 'sticky-pin': scrolled }" id="sidebar" style="padding-top: 0;border-width: 0;">
<!-- Start::main-sidebar-header --> <!-- Start::main-sidebar-header -->
<div class="main-sidebar-header"> <div class="main-sidebar-header" style="background-color: white;padding-top: 0px;padding-bottom: 0px;">
<a routerLink="/dashboard/sales" class="header-logo"> <a routerLink="/dashboard/sales" class="header-logo">
<img src="./assets/img/brand-logos/desktop-logo.png" alt="logo" class="main-logo desktop-logo" /> <img src="./assets/img/brand-logos/logo.png" alt="logo" class="main-logo desktop-logo"
<img src="./assets/img/brand-logos/toggle-logo.png" alt="logo" class="main-logo toggle-logo" /> style="height: 100%;object-fit: contain;" />
<img src="./assets/img/brand-logos/desktop-dark.png" alt="logo" class="main-logo desktop-dark" /> <img src="./assets/img/brand-logos/logo.png" alt="logo" class="main-logo toggle-logo"
<img src="./assets/img/brand-logos/toggle-dark.png" alt="logo" class="main-logo toggle-dark" /> style="height: 100%;object-fit: contain;" />
<img src="./assets/img/brand-logos/logo.png" alt="logo" class="main-logo desktop-dark"
style="height: 100%;object-fit: contain;" />
<img src="./assets/img/brand-logos/logo.png" alt="logo" class="main-logo toggle-dark"
style="height: 100%;object-fit: contain;" />
</a> </a>
</div> </div>
<!-- End::main-sidebar-header --> <!-- End::main-sidebar-header -->
...@@ -24,82 +28,89 @@ ...@@ -24,82 +28,89 @@
<ul class="main-menu"> <ul class="main-menu">
<!-- 1st Level Menu --> <!-- 1st Level Menu -->
<ng-container *ngFor="let menuItem of menuItems"> <ng-container *ngFor="let menuItem of menuItems">
<li class="slide" #activeMenuItems <li class="slide" #activeMenuItems [ngClass]="{'slide__category':menuItem.headTitle,
[ngClass]="{'slide__category':menuItem.headTitle,
'slide has-sub':menuItem.title, 'slide has-sub':menuItem.title,
'open': menuItem.active, 'open': menuItem.active,
'active': menuItem.selected,}"> 'active': menuItem.selected,}">
<!-- head title --> <!-- head title -->
<span *ngIf="menuItem.headTitle" class="category-name">{{menuItem.headTitle}}</span> <span *ngIf="menuItem.headTitle" class="category-name">{{menuItem.headTitle}}</span>
<!-- has-Link --> <!-- has-Link -->
<a class="side-menu__item" [routerLink]="!menuItem.type ? null : [menuItem.path]" routerLinkActive="active" *ngIf="menuItem.type === 'link'" <a class="side-menu__item" [routerLink]="!menuItem.type ? null : [menuItem.path]"
(click)="setNavActive(menuItem)"> routerLinkActive="active" *ngIf="menuItem.type === 'link'" (click)="setNavActive(menuItem)">
<i *ngIf="menuItem.icon" class="side-menu__icon demoicon ri-{{menuItem.icon}}"></i> <i *ngIf="menuItem.icon" class="side-menu__icon demoicon ri-{{menuItem.icon}}"></i>
<span class="side-menu__label">{{menuItem.title}}</span> <span class="side-menu__label">{{menuItem.title}}</span>
</a> </a>
<!-- has-empty --> <!-- has-empty -->
<a class="side-menu__item" href="javascript:;" *ngIf="menuItem.type === 'empty'" (click)="setNavActive(menuItem)"> <a class="side-menu__item" href="javascript:;" *ngIf="menuItem.type === 'empty'"
<i *ngIf="menuItem.icon" class="side-menu__icon demoicon ri-{{menuItem.icon}}"></i> (click)="setNavActive(menuItem)">
<span class="side-menu__label">{{menuItem.title}}</span> <i *ngIf="menuItem.icon" class="side-menu__icon demoicon ri-{{menuItem.icon}}"></i>
</a> <span class="side-menu__label">{{menuItem.title}}</span>
<!-- has-Sub --> </a>
<a class="side-menu__item with-sub" [routerLink]="menuItem.type ? null: [menuItem.path]" [ngClass]="{active: menuItem.selected}" *ngIf="menuItem.type === 'sub'" <!-- has-Sub -->
(click)="toggleNavActive(menuItem)"> <a class="side-menu__item with-sub" [routerLink]="menuItem.type ? null: [menuItem.path]"
<i *ngIf="menuItem.icon" class="side-menu__icon demoicon ri-{{menuItem.icon}}"></i> [ngClass]="{active: menuItem.selected}" *ngIf="menuItem.type === 'sub'"
<span class="side-menu__label">{{menuItem.title}}</span> (click)="toggleNavActive(menuItem)">
<span class="badge {{menuItem.badgeClass}} side-badge" *ngIf="menuItem.badgeClass && menuItem.badgeValue"> <i *ngIf="menuItem.icon" class="side-menu__icon demoicon ri-{{menuItem.icon}}"></i>
{{menuItem.badgeValue}} <span class="side-menu__label">{{menuItem.title}}</span>
</span> <span class="badge {{menuItem.badgeClass}} side-badge"
<i class="ri ri-arrow-right-s-line side-menu__angle"></i> *ngIf="menuItem.badgeClass && menuItem.badgeValue">
</a> {{menuItem.badgeValue}}
</span>
<i class="ri ri-arrow-right-s-line side-menu__angle"></i>
</a>
<!-- 2nd Level menu --> <!-- 2nd Level menu -->
<ul class="slide-menu child1" *ngIf="menuItem.children" [ngStyle]="{ display: menuItem.active ? 'block' : 'none' }"> <ul class="slide-menu child1" *ngIf="menuItem.children"
<li class="slide side-menu__label1"><a href="javascript:void(0)">{{menuItem.title}}</a></li> [ngStyle]="{ display: menuItem.active ? 'block' : 'none' }">
<ng-container *ngFor="let childrenItem of menuItem.children"> <li class="slide side-menu__label1"><a href="javascript:void(0)">{{menuItem.title}}</a></li>
<li class="slide" activeMenuItems <ng-container *ngFor="let childrenItem of menuItem.children">
[ngClass]="{'is-expanded': childrenItem.active, active: childrenItem.active, 'sub-slide': childrenItem.type === 'sub'}"> <li class="slide" activeMenuItems
<!-- link --> [ngClass]="{'is-expanded': childrenItem.active, active: childrenItem.active, 'sub-slide': childrenItem.type === 'sub'}">
<a class="side-menu__item" [routerLink]="!childrenItem.type ? null : [childrenItem.path] " routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" <!-- link -->
*ngIf="childrenItem.type === 'link'" (click)="setNavActive(childrenItem)"> <a class="side-menu__item" [routerLink]="!childrenItem.type ? null : [childrenItem.path] "
{{childrenItem.title}} routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"
</a> *ngIf="childrenItem.type === 'link'" (click)="setNavActive(childrenItem)">
<!-- empty --> {{childrenItem.title}}
<a class="side-menu__item" href="javascript:;" *ngIf="childrenItem.type === 'empty' " (click)="setNavActive(childrenItem)"> </a>
{{childrenItem.title }} <!-- empty -->
</a> <a class="side-menu__item" href="javascript:;" *ngIf="childrenItem.type === 'empty' "
<!-- sub --> (click)="setNavActive(childrenItem)">
<a class="side-menu__item" [ngClass]="{active: childrenItem.selected}" [routerLink]="childrenItem.type ? null : [childrenItem.path]" {{childrenItem.title }}
*ngIf="childrenItem.type === 'sub'" (click)="toggleNavActive(childrenItem)"> </a>
<span class="">{{childrenItem.title}}</span> <!-- sub -->
<i class="ri ri-arrow-right-s-line side-menu__angle"></i> <a class="side-menu__item" [ngClass]="{active: childrenItem.selected}"
</a> [routerLink]="childrenItem.type ? null : [childrenItem.path]" *ngIf="childrenItem.type === 'sub'"
<!-- 3rd Level menu --> (click)="toggleNavActive(childrenItem)">
<ul class="slide-menu child2" [ngStyle]="{ <span class="">{{childrenItem.title}}</span>
<i class="ri ri-arrow-right-s-line side-menu__angle"></i>
</a>
<!-- 3rd Level menu -->
<ul class="slide-menu child2" [ngStyle]="{
display: childrenItem.active ? 'block' : 'none', display: childrenItem.active ? 'block' : 'none',
right: localdata['synto-dir'] == 'rtl' ? 'auto' : '', right: localdata['synto-dir'] == 'rtl' ? 'auto' : '',
left: localdata['synto-dir'] == 'rtl' ? '100%' : '' left: localdata['synto-dir'] == 'rtl' ? '100%' : ''
}" *ngIf="childrenItem.children" [ngClass]="{'open': childrenItem.active}"> }" *ngIf="childrenItem.children" [ngClass]="{'open': childrenItem.active}">
<ng-container *ngFor="let childrenSubItem of childrenItem.children"> <ng-container *ngFor="let childrenSubItem of childrenItem.children">
<li class="slide" activeMenuItems [ngClass]="{'is-expanded': childrenSubItem.active}"> <li class="slide" activeMenuItems [ngClass]="{'is-expanded': childrenSubItem.active}">
<!-- link --> <!-- link -->
<a class="side-menu__item" routerLinkActive="active" [routerLink]="!childrenSubItem.type ? null : [childrenSubItem.path]" <a class="side-menu__item" routerLinkActive="active"
*ngIf="childrenSubItem.type === 'link'" [routerLinkActiveOptions]="{exact : true}"> [routerLink]="!childrenSubItem.type ? null : [childrenSubItem.path]"
{{childrenSubItem.title}} {{localdata['synto-dir']}} *ngIf="childrenSubItem.type === 'link'" [routerLinkActiveOptions]="{exact : true}">
</a> {{childrenSubItem.title}} {{localdata['synto-dir']}}
<!-- empty --> </a>
<a class="side-menu__item" href="javascript:;" *ngIf="childrenSubItem.type === 'empty'"> <!-- empty -->
{{childrenSubItem.title}} <a class="side-menu__item" href="javascript:;" *ngIf="childrenSubItem.type === 'empty'">
</a> {{childrenSubItem.title}}
</li> </a>
</ng-container> </li>
</ul>
</li>
</ng-container> </ng-container>
</ul> </ul>
</li> </li>
</ng-container>
</ul>
</li>
</ng-container> </ng-container>
</ul> </ul>
<div class="slide-right" id="slide-right"> <div class="slide-right" id="slide-right">
<svg xmlns="http://www.w3.org/2000/svg" fill="#7b8191" width="24" height="24" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" fill="#7b8191" width="24" height="24" viewBox="0 0 24 24">
<path d="M10.707 17.707 16.414 12l-5.707-5.707-1.414 1.414L13.586 12l-4.293 4.293z"></path> <path d="M10.707 17.707 16.414 12l-5.707-5.707-1.414 1.414L13.586 12l-4.293 4.293z"></path>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment