Search in navbar

ionic-v1
1

Hi…
I’m creating an app based on the sidemenu. I wonder how do I put a search input in the navbar and keep the opening of the side menu icon, for example, spotify.

example:

image
image.png416×741 133 KB

Thank a lot for any help

2

Can’t you simply put this in the header?

3

My sidemenu:

    <ion-nav-bar class="bar-stable">
        <ion-nav-back-button>
        </ion-nav-back-button>

        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
            </button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>

<ion-side-menu side="left">
    <ion-content>

        <div class="box-logo">
            <div class="logo2"></div>
        </div>

        <ion-list class="item-list">
            <ion-item nav-clear menu-close menu-selected href="#/app/search"">
                <div class="box-icon">
                    <i class="icon ion-ios-search-strong"></i>
                </div>
                <span class="box-label str-to-capitalize">{{ "search" | translate }}</span>
            </ion-item>

            <ion-item class="active" nav-clear menu-close menu-selected href="#/app/browse">
                <div class="box-icon">
                    <i class="icon ion-ios-browsers"></i>
                </div>
                <span class="box-label str-to-capitalize">{{ "browse" | translate }}</span>
            </ion-item>

            <ion-item nav-clear menu-close menu-selected href="#/app/favorites">
                <div class="box-icon">
                    <i class="icon ion-ios-heart"></i>
                </div>
                <span class="box-label str-to-capitalize">{{ "favorites" | translate }}</span>
            </ion-item>

            <ion-item nav-clear menu-close menu-selected href="#/app/orders">
                <div class="box-icon">
                    <i class="icon ion-android-notifications"></i>
                </div>
                <span class="box-label str-to-capitalize">{{ "orders" | translate }}</span>
            </ion-item>

            <ion-item nav-clear menu-close menu-selected href="#/app/settings">
                <div class="box-icon">
                    <i class="icon ion-gear-a"></i>
                </div>
                <span class="box-label str-to-capitalize">{{ "settings" | translate }}</span>
            </ion-item>
        </ion-list>



    </ion-content>

    <div class="home-bg"></div>

    <div class="bar bar-footer">
        <div class="avatar">
            <img alt="" class="avatar" src="./img/avatar/avatar-default.png">
        </div>
        <div class="title">
            <h3>Marília Gabriela</h3>
            <h5>mari@sbt.com.br</h5>
        </div>
    </div>

</ion-side-menu>

The “search” option in my draws my search.html view that will display your search. But when I called the view, the header is set by the menu.html (sidemenu) which has a title, how would I do to replace the title by the search input?

4

was adding in my view search.html

<ion-nav-title>
    <div class="item item-input-inset">
        <label class="item-input-wrapper">
            <i class="icon ion-ios-search placeholder-icon"></i>
            <input class="str-to-capitalize" type="search" placeholder="{{ 'find_a_product' | translate }}">
        </label>
    </div>
</ion-nav-title>


<ion-content>
    content
</ion-content>

thanks

5

Hi valdinei, official directives related to ion-nav-bar and its children are made to show title and button shifting effects (and more I believe in the future).

According to your desired usage,I suggest you to write your own css to make it happen (at least for this view). Ionic official documentation has an example of head search bar but with a cancel button on the right, you may adjust that a little bit. Ionic CSS Doc

6

thank for reply windht!