From 87bad9b567e3d10b2ae576c4ab514b3591faeb42 Mon Sep 17 00:00:00 2001
From: mehmet-erim <bilgi@mehmeterim.com>
Date: Wed, 23 Oct 2019 09:58:43 +0300
Subject: [PATCH] feat(theme-basic): implement collapse animation to the user
 info nav element

---
 .../application-layout.component.html         | 23 +++++++++++++------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.html
index 047a96f8fb..69ded90ac2 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.html
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.html
@@ -175,7 +175,7 @@
 
 <ng-template #currentUser>
   <li *ngIf="(currentUser$ | async)?.isAuthenticated" class="nav-item">
-    <div ngbDropdown display="static">
+    <div ngbDropdown #currentUserDropdown="ngbDropdown" display="static">
       <a
         ngbDropdownToggle
         class="nav-link"
@@ -192,13 +192,22 @@
         ngbDropdownMenu
         class="dropdown-menu dropdown-menu-right border-0 shadow-sm"
         aria-labelledby="dropdownMenuLink"
+        [class.overflow-hidden]="smallScreen"
+        [class.d-block]="smallScreen"
       >
-        <a class="dropdown-item" routerLink="/account/manage-profile">{{
-          'AbpAccount::ManageYourProfile' | abpLocalization
-        }}</a>
-        <a class="dropdown-item" href="javascript:void(0)" (click)="logout()">{{
-          'AbpUi::Logout' | abpLocalization
-        }}</a>
+        <ng-container *ngTemplateOutlet="!smallScreen ? currentUserElements : null"></ng-container>
+        <ng-template #currentUserElements>
+          <a class="dropdown-item" routerLink="/account/manage-profile">{{
+            'AbpAccount::ManageYourProfile' | abpLocalization
+          }}</a>
+          <a class="dropdown-item" href="javascript:void(0)" (click)="logout()">{{
+            'AbpUi::Logout' | abpLocalization
+          }}</a>
+        </ng-template>
+
+        <div *ngIf="smallScreen" [@collapseWithMargin]="currentUserDropdown.isOpen() ? 'expanded' : 'collapsed'">
+          <ng-container *ngTemplateOutlet="currentUserElements"></ng-container>
+        </div>
       </div>
     </div>
   </li>