<div class="wrapper">
<div class="sidebar">
<div class="logo">
<a href="https://www.creative-tim.com?ref=bda-auth-layout-sidebar-logo" class="simple-text logo-mini">
<div class="logo-img">
<img src="./assets/img/angular2-logo-white.png" />
</div>
</a>
<a href="https://www.creative-tim.com?ref=bda-auth-layout-sidebar-logo" class="simple-text logo-normal">
الإبداعية تيم
</a>
</div>
<div class="sidebar-wrapper">
<ul class="nav">
<li
routerLinkActive="active"
*ngFor="let menuItem of menuItems"
class="{{ menuItem.class }} nav-item"
>
<a [routerLink]="[menuItem.path]">
<i class="tim-icons {{ menuItem.icon }}"></i>
<p>{{ menuItem.rtlTitle }}</p>
</a>
</li>
</ul>
</div>
</div>
<div class="main-panel">
<nav class=" navbar navbar-expand-lg navbar-absolute navbar-transparent">
<div class=" container-fluid">
<div class=" navbar-wrapper">
<div class=" navbar-toggle d-inline">
<button class=" navbar-toggler" type="button" (click)="sidebarToggle()">
<span class=" navbar-toggler-bar bar1"> </span>
<span class=" navbar-toggler-bar bar2"> </span>
<span class=" navbar-toggler-bar bar3"> </span>
</button>
</div>
<a class=" navbar-brand" href="javascript:void(0)"> ار تي ال </a>
</div>
<button
aria-label="Toggle navigation"
class=" navbar-toggler"
(click)="collapse()"
[attr.aria-expanded]="!isCollapsed"
aria-controls="collapseExample"
id="navigation"
type="button"
>
<span class=" navbar-toggler-bar navbar-kebab"> </span>
<span class=" navbar-toggler-bar navbar-kebab"> </span>
<span class=" navbar-toggler-bar navbar-kebab"> </span>
</button>
<div class=" navbar-collapse" [ngbCollapse]="isCollapsed" id="navigation">
<ul class=" navbar-nav mr-auto">
<li class=" search-bar input-group">
<button
class=" btn btn-link"
data-target="#searchModal"
data-toggle="modal"
(click)="open(content)"
id="search-button"
>
<i class=" tim-icons icon-zoom-split"> </i>
<span class=" d-lg-none d-md-block"> بحث </span>
</button>
</li>
<li class=" nav-item" ngbDropdown>
<a
class=" nav-link"
data-toggle="dropdown"
ngbDropdownToggle
>
<div class=" notification d-none d-lg-block d-xl-block"></div>
<i class=" tim-icons icon-sound-wave"> </i>
<p class=" d-lg-none">إخطارات</p>
</a>
<ul class=" dropdown-menu-right dropdown-navbar" ngbDropdownMenu>
<li class=" nav-link">
<a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
ورد مايك جون على بريدك الإلكتروني
</a>
</li>
<li class=" nav-link">
<a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
لديك 5 مهام أخرى
</a>
</li>
<li class=" nav-link">
<a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
صديقك مايكل في المدينة
</a>
</li>
<li class=" nav-link">
<a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
إشعار آخر
</a>
</li>
<li class=" nav-link">
<a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
واحدة أخرى
</a>
</li>
</ul>
</li>
<li class=" nav-item" ngbDropdown>
<a
class=" nav-link"
data-toggle="dropdown"
ngbDropdownToggle
>
<div class=" photo">
<img alt="Profile Photo" src="assets/img/anime3.png" />
</div>
<b class=" caret d-none d-lg-block d-xl-block"> </b>
<p class=" d-lg-none">الخروج</p>
</a>
<ul class=" dropdown-navbar" ngbDropdownMenu>
<li class=" nav-link">
<a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
الملف الشخصي
</a>
</li>
<li class=" nav-link">
<a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
الإعدادات
</a>
</li>
<li class=" dropdown-divider"></li>
<li class=" nav-link">
<a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
الخروج
</a>
</li>
</ul>
</li>
<li class=" separator d-lg-none"></li>
</ul>
</div>
</div>
</nav>
<router-outlet></router-outlet>
<footer class=" footer">
<div class=" container-fluid">
<ul class=" nav">
<li class=" nav-item">
<a class=" nav-link" href="https://www.creative-tim.com?ref=bda-auth-layout-footer">
تيم الإبداعية
</a>
</li>
<li class=" nav-item">
<a class=" nav-link" href="https://www.creative-tim.com/about-us?ref=bda-auth-layout-footer">
معلومات عنا
</a>
</li>
<li class=" nav-item">
<a class=" nav-link" href="http://blog.creative-tim.com?ref=bda-auth-layout-footer"> مدونة </a>
</li>
</ul>
<div class=" copyright">
© {{ test | date: "yyyy" }} مصنوع من
<i class=" tim-icons icon-heart-2"> </i> بواسطة
<a href="https://www.creative-tim.com?ref=bda-auth-layout-footer" target="_blank"> تيم الإبداعية </a>
من أجل شبكة أفضل.
</div>
</div>
</footer>
</div>
</div>
<div class=" fixed-plugin">
<div class=" show-dropdown" ngbDropdown>
<a data-toggle="dropdown" ngbDropdownToggle>
<i class=" fa fa-cog fa-2x"> </i>
</a>
<ul ngbDropdownMenu>
<li class=" header-title">خلفية الشريط الجانبي</li>
<li class=" adjustments-line">
<a class=" switch-trigger background-color" href="javascript:void(0)">
<div class=" badge-colors text-center">
<span
class=" badge filter badge-danger"
[ngClass]="{'active':sidebarColor==='red'}" (click)="changeSidebarColor('red')"
>
</span>
<span
class=" badge filter badge-primary"
data-color="primary"
[ngClass]="{'active':sidebarColor==='primary'}" (click)="changeSidebarColor('primary')"
>
</span>
<span class=" badge filter badge-info" [ngClass]="{'active':sidebarColor==='blue'}" (click)="changeSidebarColor('blue')"> </span>
<span class=" badge filter badge-success" [ngClass]="{'active':sidebarColor==='green'}" (click)="changeSidebarColor('green')">
</span>
</div>
<div class=" clearfix"></div>
</a>
</li>
<li class=" adjustments-line text-center color-change">
<span class=" color-label"> وضع الضوء </span>
<span class=" badge light-badge mr-2" (click)="changeDashboardColor('white-content')"> </span>
<span class=" badge dark-badge ml-2" (click)="changeDashboardColor('black-content')"> </span>
<span class=" color-label"> وضع الظلام</span>
</li>
<li class=" button-container">
<a
class=" btn btn-primary btn-block btn-round"
href="https://www.creative-tim.com/product/black-dashboard-angular?ref=bda-auth-layout-fixed-plugin"
target="_blank"
>
التحميل الان
</a>
<a
class=" btn btn-default btn-block btn-round"
href="https://demos.creative-tim.com/black-dashboard-angular/#/documentation/tutorial?ref=bda-auth-layout-fixed-plugin"
target="_blank"
>
كابل بيانات
</a>
</li>
<li class=" header-title">شكرا لك على 95 سهم!</li>
<li class=" button-container text-center">
<button class=" btn btn-round btn-info" id="twitter">
<i class=" fab fa-twitter"> </i> · 45
</button>
<button class=" btn btn-round btn-info" id="facebook">
<i class=" fab fa-facebook-f"> </i> · 50
</button>
<br />
<br />
<a
aria-label="Star ntkme/github-buttons on GitHub"
class=" github-button"
data-icon="octicon-star"
data-show-count="true"
data-size="large"
href="https://github.com/creativetimofficial/black-dashboard-angular?ref=bda-auth-layout-fixed-plugin"
>
نجمة
</a>
</li>
</ul>
</div>
</div>
<ng-template #content let-modal>
<div class=" modal-header">
<input
class=" form-control"
id="inlineFormInputGroup"
placeholder="بحث"
type="text"
/>
<button
aria-label="Close"
class=" close"
data-dismiss="modal"
type="button"
(click)="modal.dismiss('Cross click')"
>
<i class=" tim-icons icon-simple-remove"> </i>
</button>
</div>
</ng-template>