CODEWITHSUNDEEP
javascripthtmlcssionic-framework
Ludwig
Ludwig

Reputation: 1811

Ionic side menu, how to place the link at the bottom of the side menu

I have a side menu in an ionic app, I need to have links in it, and the link for the logout should be at the bottom of the side menu, not sure how to achieve this, since the ion-list height is depended on the amount of links there are, and can't play with position of the link itself to place it at the bottom of the side menu.

This is the situation now:

enter image description here

And this is the html:

<ion-side-menu side="left" class="side-menu" scroll="false">
      <ion-content>
        <ion-list>
          <ion-item ui-sref="">
            Min Profil
          </ion-item>
          <ion-item ui-sref="main.logout" class="logout">
            Logg out
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-side-menu>

Update

I had to overwrite ionic default tags and classes, so this is what worked for me in the end.

Html:

<ion-side-menu side="left" class="side-menu" scroll="false">
      <ul class="menu">
        <div class="side-menu-header">
        </div>
        <div class="menu-main">
          <li>
            <a ui-sref="">Min Profil</a>
          </li>
        </div>
        <div class="menu-last">
          <li>
            <a ui-sref="main.logout">Logg out</a>
          </li>
        </div>
      </ul>
    </ion-side-menu>

CSS:

.menu {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

  ,a {
    background-color: $dark-background-color;
    color:$light;
    text-decoration: none;
    font-size: 1rem;
    }

    .side-menu-header {
      height: 60px;
    }

    .menu-main {
      position: absolute;
      top: 60px;
      margin: 15px;

      li {
        margin: 5px 0 5px 0;
      }
    }

    .menu-last {
      margin: 15px;
    }
}

Upvotes: 2

Views: 1076

Answers (1)

Antoine Neff
Antoine Neff

Reputation: 456

You could do this using flex css properties, you will need to add some classes.

<ion-list class="menu">
    <div class="menu-main">
        <ion-item ui-sref="">
            Min Profil
        </ion-item>
        <!-- Place other items here -->
    </div>
    <div class="menu-last">
        <ion-item ui-sref="main.logout" class="logout">
            Logg out
        </ion-item>
    </div>
</ion-list>

Here is the CSS :

.menu {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

Upvotes: 2

Related Questions