ionic5 menu submenu functionality

-
<ion-app>
  <ion-split-pane contentId="main-content">
    <ion-menu contentId="main-content" type="overlay">
      <ion-header>
        <ion-toolbar>
          <ion-grid style="background-image: linear-gradient(45deg, #165997, #144e8d);
          color: #fff;">
            <ion-row>
              <ion-col size="3">
                <ion-avatar>
                    <img src="http://207.38.84.105/Nakhas/public/images/fromserver/sidelogo.png" alt="" class="imagehead" style="width:100%;">
         
                </ion-avatar>
                
              </ion-col>
              <ion-col>
                  <p style="font-size:18px;font-weight:bold;margin-top: 27px;" class="imagetext">NAKHAS</p>
                </ion-col>
            </ion-row>
          </ion-grid>
         
        
        </ion-toolbar>
      </ion-header>
      <ion-content>

<div *ngFor = "let p of appPages">
    <ion-menu-toggle auto-hide="false" *ngIf="p.url">
        <ion-item style="border: none;" routerDirection="root" [routerLink]="[p.url]" routerLinkActive="active">
            <ion-icon slot="start" [name]="p.icon" color="secondary"></ion-icon>
            <ion-label color="secondary">
              {{p.title}}
            </ion-label>  
          </ion-item>
    </ion-menu-toggle>
    <ion-item button *ngIf="p.children?.length > 0" (click)="p.open = !p.open" [class.active-parent]="p.open" detail="false">
      <ion-icon  slot="start" name="caret-forward-outline" color="secondary" *ngIf ="!p.open"></ion-icon>
      <ion-icon slot="start" name="caret-down-outline" color="secondary" *ngIf ="p.open"></ion-icon>
      <ion-label color="secondary">
            {{p.title}}
          </ion-label>  
    </ion-item>
    <ion-list *ngIf="p.open">
      <ion-menu-toggle auto-hide="false" >
        <ion-item style="margin-left: 50px;" *ngFor="let sub of p.children" routerDirection="root" [routerLink]="sub.url" routerLinkActive="active">
          <ion-icon slot="start" [name]="sub.icon" color="secondary"></ion-icon>
          <ion-label color="secondary">
            {{sub.title}}
          </ion-label>
        </ion-item>
      </ion-menu-toggle>
    </ion-list>
  </div>   
     
      </ion-content>
    
    </ion-menu>
    <ion-router-outlet id="main-content"></ion-router-outlet>
    
  </ion-split-pane>

</ion-app>

public appPages = [
    {
      title: 'Home',
      url: '/',
      icon: 'home'
    },
    // {
    //   title: 'About',
    //   url: '/aboutus',
    //   icon: 'home'
    // },
    {
      title: "About Us",
      icon: 'home',
      children: [
        {
          title: "Over View",
          url: '/over-view',
          image:'/assets/images/about/view.png',
          // icon: 'home'
        },
        {
          title: "Mission",
          url: '/mission',
          image:'/assets/images/about/mission.png',
          // icon: 'add-circle'
        },
        {
          title: "Vision",
          url: '/vision',
          image:'/assets/images/about/vission.png',
          // icon: 'logo-vimeo'
        },
      
        {
          title: "Approach",
          url: '/approach',
          image:'/assets/images/about/apporach.png',
          // icon: 'home'
        }
      ]
    },
    {
      title: 'Our Work',
      url: '/ourwork',
      icon: 'briefcase'
    },
    {
      title: 'Campaigns',
      url: '/services',
      icon: 'microphone'
    },
    {
      title:'Get Involved',
      url: '/services',
      icon: 'information-circle-outline'
    },
    {
      title:'Media Centre',
      url: '/gallery',
      icon: 'film'
    },
    
    {
      title: 'Events',
      url: '/events',
      icon: 'trophy'
    },
  
    {
      title: 'Gallery',
      url: '/gallery',
      icon: 'images'
    },
    {
      title: 'Contact Us',
      url: '/contactus',
      icon: 'contact'
    },
  ];

Comments

Post a Comment

Popular posts from this blog

how to split array as per fixed length, and ionic two dates differences in min,seconds,hours

-
this . forsasi -->array var perChunk = 5 // items per chunk var inputArray = this . forsasi ; this . result = inputArray . reduce (( resultArray , item , index ) => { const chunkIndex = Math . floor ( index / perChunk ); if (! resultArray [ chunkIndex ]) { resultArray [ chunkIndex ] = [] // start a new chunk } resultArray [ chunkIndex ]. push ( item ); return resultArray }, []) console . log ( this . result ); this . d1 = JSON . parse ( localStorage . getItem ( "starttime" )); var d2 = new Date ( this . d1 ); console . log ( d2 ) var date1 = new Date (); var Str1 = ( "00" + ( date1 . getMonth () + 1 )). slice (- 2 ) + "/" + ( "00" + date1 . getDate ()). slice (- 2 ) + "/" + date1 . getFullYear () + " " + ( "00" + date1 . getHours ()). slice (- 2 ) + ":" + ( "00" + date1 . getMinutes ()). slice (- 2 ) + "...
Read more

How to Add Firebase Analytics to Your NativeScript Mobile App

-
Image
tns plugin add nativescript-plugin-firebase reference links: https://github.com/EddyVerbruggen/nativescript-plugin-firebase . https://github.com/EddyVerbruggen/nativescript-plugin-firebase/issues/1171 . https://dzone.com/articles/how-to-add-firebase-analytics-to-your-nativescript . Prerequisites Before starting, you need to create a new Firebase application using your Google account. This happens with just a few clicks. Firebase provides a free tier which covers entirely all Analytics services, so you don't need to take out your credit card. Navigate to  https://firebase.google.com , authenticate with your Google credentials and follow the "Add project" wizard. In general, you don't need to change any of the default options in "Step 3," unless you have specific requirements related to services other than "Analytics." In your newly created project, you have to navigate to the project settings and add iOS and Android applicatio...
Read more