Navbar with tabs and button (Map, Listing, Filter)

Ionic Framework ionic-v3
1

Hi there,

First of all, I’m a newbie so forgive me about any error about how I name the elements or I explain what I want to achieve.

Well, an image is better than thousand words, so here is what I am trying to code.

image
IMG_3461.jpg750×1334 253 KB

This I have taken from a comercial application. Basically the idea is that when you click on the first tab you go to a map with icons that represent geolocalized reports, and if you click on the second tab you go to a listing of those reports. The button is for filtering the reports. The only difference is that, on the left side of the navbar, instead of the back button I would like to have the side menu button.

So far what I was able to get the tabs (I know, I have not gone too far), but I was not able to put the tabs instead of the navbar, I was not able either to create three tabs in which the third one is smaller and has the button inside, and I was not able to include a custom icon in the third tab (this question I have seen it in other threads so I guess I will fix it).

This is what I have for now:

image
current.jpg818×1122 215 KB

For this, I simply typed the following code in the menu html page:

<ion-menu [content]="content" side="left" persistent="true" (ionOpen)="onOpen($event)"
(ionClose)="onClose($event)">

  <ion-content>
    <ion-list>   
        <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p.id)">{{p.title}}</button> 
    </ion-list>
  </ion-content>
 <ion-footer>
   <ion-toolbar color="primary">
    <button menuLogOut ion-button color="light" (click)="logOut()">Logout</button>
   </ion-toolbar>
  </ion-footer>
</ion-menu>

<ion-tabs tabsPlacement="top" primary>
        <ion-tab [root]="tab1Root" tabTitle="Mapa"></ion-tab>
        <ion-tab [root]="tab2Root" tabTitle="Listado"></ion-tab>
        <ion-tab [root]="MenuPage" tabsHideOnSubPages="true" tabIcon="customicon" tabTitle=""></ion-tab>
    </ion-tabs>

and this one in the menu ts:

import { Map } from '../Map/Map';
...
@Component({
  selector: 'page-menu',
  templateUrl: 'menu.html'
})
export class MenuPage {
 @ViewChild(Nav) nav: Nav;

  tab1Root = Map;
 ...

I am probably far from the solution, so any help in the good direction would be appreciated.