Nav-Bar AND Side Menu

ionic-v1
1

Maybe I’m missing something obvious? It doesn’t seem possible to have a SideMenu that works properly with a NavBar.

If you have a NavBar, then the SideMenu doesn’t have it’s own header. So, when you open the SideMenu, the NavBar stays in place. So, the whole SideMenu effect is kind of lost.

If you toss the NavBar to get the great SideMenu, then you lose the back button functionality.

Anyone know how to deal with this properly?

1 Like
2

Maybe I haven’t completely understand you. NavBar and SideMenu works fine for me.
Open it and click on links :slight_smile:

What are you trying to do?
A NavBar in the SideMenu?

3

Wow. That works really nicely. I don’t see how you came up with that. It’s a significant departure from the sample.

I’m trying to pick through the generated code, but not having much luck. Angular / Ionic decorate it so much on page load. Could you share the raw index.html that shows how you setup the main wrapper?

4

Actually, I found it under Sources in Chrome. Let me play with this a bit and see what I can make of it.

Thanks for the sample.

5

@xAlien95 I’ve put this together in a Plunker for everyone else to be able to see.

Thanks so much for this. I wasn’t smart enough to figure out putting the nav-router inside the <side-menu>

1 Like
6

Glad you got it figured out! Hopefully we can make this more clear in the future.

7

Guys, the plunker by @Calendee is broken as it uses the nightly builds of ionic, Did any one managed to use both the new Views and Navigations system with the slide menu integrating UI-Router?

I am having troubles to wrap my my mind around what is the best practice to integrate both.

8

Here’s a working version based on 0.9.19.

1 Like
9

Hmmm, the “back button” arrow shouldn’t be showing in the headers. I don’t know if this is on Ionic’s side or yours, but the side menu links should interact similarly to tabs (you don’t use a back button to go back to the previous tab).

At any rate, I’ll bring it up with @max or @adam.

1 Like
10

Ben,

This is pretty old and only resurfaced because someone asked about the Plunker. @xAlien95 helped me work this all aout. So, I don’t think there is anything to investigate.

11

Sounds good, thanks Justin.

12

Hi Ben,

I bumped into the issue you describe above with the back button showing in the nav bar when flipping between links in the side menu. Do you have any idea in how I would go about fixing that?

Thanks!

Mik

13

If you are using latest build then in view use hide-back-button=“true”

<nav-bar class="nav-title-slide-ios7" type="bar-positive" back-button-type="button" back-button-icon="icon ion-ios7-arrow-back"></nav-bar>

<!-- where the content of each page will be rendered -->
<nav-view animation="slide-left-right"></nav-view>

<script type="text/ng-template" id="/Login.html">
     <view hide-back-button="true">
      ...
     </view>
</script>
14

That is outstanding. Seems like there are tons of these “magic attributes” that do exactly what I need :smile:

Thanks!

15

Documentation will improve before 1.0 release :- )

16

i use this:

<side-menus >
        <pane side-menu-content>
              <nav-bar type="bar-orange">
              </nav-bar>
              <nav-view name="menuContent"></nav-view>
        </pane>

        <side-menu side="left" id="menu">
          <header  class="bar bar-header bar-ligth" style="height:80px;">
            <div id="menu-header" class="title"></div>
          </header>
          <content has-header="true" id="menu">
            <ul class="list" ng-click="toggleLeft()" style="margin-top: 35px;">
             <a href="#/tab/one" class="item" id="menu">one</a>
             <a href="#/tab/two" class="item" id="menu">two</a>
             <a href="#/tab/x" class="item" id="menu">x</a>
            </ul>
          </content>
        </side-menu>
    </side-menus>

need to look about nav-router maybe is better, the current documentation of ionic is really bad

17

you need to remove the back-button-type=“button-icon” back-button-icon="ion-arrow-left-c
otherwise there will appear a back button and a menu button

18

Anyone have any updates to this for version 1.3.2? Plunkr doesn’t work with 1.3.2.