<ion-app>
    <ion-split-pane>
        <ion-menu>
            <ion-content>
                <div class="side_menu_wrapper">
                    <ion-menu-toggle *ngIf="userData">
                        <div class="top_banner">
                            <div class="top_image">
                                <img [src]="userData.profilePhoto" onerror="this.src='./../assets/asset_avatar.png'" />
                            </div>
                            <div class="top_detail">
                                <h4>{{ userData.name }}</h4>
                                <p>{{ userData.emailId }}</p>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </ion-menu-toggle>
                    <div class="sidemenu_list">
                        <ul>
                            <ion-menu-toggle>
                                <li (click)="vieworder('home')">Shop</li>
                            </ion-menu-toggle>
                            <!-- <li>About us</li> -->
                            <ion-menu-toggle>
                                <li (click)="vieworder('myorder')">View Order</li>
                            </ion-menu-toggle>

                            <div class="sub_menu">
                                <ul *ngIf="categoryService.activecategories">
                                    <ion-menu-toggle>
                                        <li *ngFor="let category of categoryService.activecategories"
                                            (click)="goToPage('catstorelist', category)">
                                            {{ category.catName }}
                                        </li>
                                    </ion-menu-toggle>
                                    <!-- <li>Women's Fashion</li>
                                    <li>Features</li>
                                    <li>Bags</li>
                                    <li>Shoes</li>
                                    <li>Electronics</li> -->
                                </ul>
                            </div>
                            <ion-menu-toggle>
                                <li (click)="vieworder('feedback')">Complaints & Feedback</li>
                            </ion-menu-toggle>
                            <li>
                                <span class="floatLeft" (click)="authService.SignOut()">Logout</span>
                                <span class="floatRight version">Version 0.1.0.2</span>
                                <div class="clear"></div>
                            </li>
                        </ul>
                    </div>
                </div>
            </ion-content>
        </ion-menu>
        <ion-router-outlet main></ion-router-outlet>
    </ion-split-pane>
</ion-app>

<div class="common_tab" [hidden]="fetchCase() === true" *ngIf="!isSearchOpen">
    <!-- <button (click)="istoggle()"></button> -->
    <ul>
        <li (click)="goToPage('home')">
            <div class="icon_sec m1_icon" [class.m1_icon_act]="sec_active1" (click)="setActive1()"></div>
        </li>
        <li (click)="goToPage('catagory')">
            <div class="icon_sec m2_icon" [class.m2_icon_act]="sec_active2" (click)="setActive2()"></div>
        </li>
        <li (click)="goToPage('searchmodal')">
            <div class="icon_sec m3_icon" [class.m3_icon_act]="sec_active3" (click)="setActive3()"></div>
        </li>
        <li (click)="goToPage('cart')">
            <div class="icon_sec m4_icon" [class.m4_icon_act]="sec_active4" (click)="setActive4()"></div>
        </li>
        <li (click)="goToPage('myorder')">
            <div class="icon_sec m5_icon" [class.m5_icon_act]="sec_active5" (click)="setActive5()"></div>
        </li>
        <li (click)="goToPage('profile')">
            <div class="icon_sec m6_icon" [class.m6_icon_act]="sec_active6" (click)="setActive6()" menuClose></div>
        </li>
    </ul>
</div>


<div class="common-pop-wrapper" *ngIf="isShow" [@slideInOut]>
    <div class="pop_inner">
        <div class="img-wrapper">
            <img src="../assets/basket.png" alt="Product">
        </div>
        <div class="content">
            <h1>{{service.popupSub}}</h1>
            <p *ngIf="orderId">Order ID {{orderId}}, {{service.popupMsg}}</p>
        </div>

        <span (click)="istoggle();"><img src="../assets/close.png" alt="Close"></span>
    </div>
</div>