Different ion-split-pane depending on screen size like modern sidemenus with dock state

Ionic Framework
1

Hi, I’m using the default ion-split-pane from the starter template.
It’s perfect for small and large screens, but not really good middle screens. Can I show a smaller/thinner ion-split-pane on middle screens? Something like when="(min-width: 300px) and (max-width: 500px)"
So it would be:
small: burger menu
middle: thin sidemenu only icon
large: full sidemenu icon and text

something like this:
capture_001_08042022_230511

2

Hi

There is a css custom property defining the width. I’d try to use a media query to change this and also to disable the labels in the menu

But haven’t tried it yet

Would be nice to know how though

3

I got you @basti
ive been wondering about this for a while as well

  • in addition to what @Tommertom mentioned with split-pane, ionic has a CSS utility class ion-hide-{breakpoint}-{direction}
    CSS Utilities - Element Display

  • Use this on the icon and label child elements of the menu links. I had to create 3 instances since it seems you cannot apply an up AND down utility class to 1 element. to implement the custom width breakpoints, either alter them in the global styles, or use a media query on the specific ion-icons and labels, and adjust the split-pane/menu css

  • Finally, add the previously referenced css for the ion-spilt-pane and ion-menu.

You could potentially look at creating a custom component that contains this template/css but aside from that, let me know if this yields the correct results for you or if you find something simpler

app.component.html – modify the ion-item as follows:

<!-- Icon and label for hamburger menu at xs breakpoint -->
<ion-icon class="ion-hide-sm-up" slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
<ion-label class="ion-hide-sm-up">{{ p.title }}</ion-label>

<!-- icon only for sm 'modern' style -->
<ion-icon class="ion-hide-sm-down ion-hide-md-up" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>

<!-- icon and label again for full size menu -->
<ion-icon class="ion-hide-md-down" slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
<ion-label class="ion-hide-md-down">{{ p.title }}</ion-label>

and then in app.component.css add:

ion-split-pane {
    --side-width: 270px !important;
    --side-max-width: 270px !important;
    ion-menu {
        --width: 270px !important;
        --max-width: 270px !important;
    }
}

@media screen and (max-width: 768px) {
    ion-split-pane {
        --side-width: 68px !important;
        --side-max-width: 68px !important;
        --side-min-width: 68px !important;
        ion-menu {
            --width: 68px !important;
            --max-width: 68px !important;
            --min-width: 68px !important;
        }
    }
}

@media screen and (min-width: 768px) {
    ion-split-pane {
        --side-width: 270px !important;
        --side-max-width: 270px !important;
        ion-menu {
            --width: 270px !important;
            --max-width: 270px !important;
        }
    }
}
3 Likes
4

Thanks for your answer! It sounds very great and I copied it, but I think the behaviour ist not like you mentioned it:

Unbenannt

Or is it the way you thought?

5

Shoot looks like I missed the minimum breakpoint being the full width, just gotta adjust the css I think

6

Ok, thanks again, I think I have it so far :wink: :

I had to add when="(min-width: 576px)" to the splitpane:
<ion-split-pane when="(min-width: 576px)" contentId="main-content">

and and (min-width: 576px) in the css:

ion-split-pane {
  --side-width: 270px !important;
  --side-max-width: 270px !important;
  ion-menu {
    --width: 270px !important;
    --max-width: 270px !important;
  }
}

@media screen and (min-width: 576px) and (max-width: 992px) {
  ion-split-pane {
    --side-width: 68px !important;
    --side-max-width: 68px !important;
    --side-min-width: 68px !important;
    ion-menu {
      --width: 68px !important;
      --max-width: 68px !important;
      --min-width: 68px !important;
    }
  }
}

@media screen and (min-width: 992px) {
  ion-split-pane {
    --side-width: 270px !important;
    --side-max-width: 270px !important;
    ion-menu {
      --width: 270px !important;
      --max-width: 270px !important;
    }
  }
}

Last question:
In the icon only version, the label is just missing. This has the consequence that the icons are on the same place (left) and on the right remains empty space. Any change to center them? With margin and padding I’d no chance.

2 Likes
7

Could you provide a stackblitz example with ionic v7?

8

@angelospillos I’ll give it a shot this weekend

9

took me a while to find some free time but i think ive got an even more succinct iteration of all this.

  • i used new angular signals :sunglasses:
  • I know its not 100% but id say its definitely something to get you started
  • Ill gladly take any feedback as well if you can max out any improvements
    angular 16 ionic 7 modern “metro menu”

getting everything set up on stackblitz was kind of tricky:

  • i could not get ionicons to implement correctly, copied all my dependenices so id recommend running it locally, but seems like a stackblitz issue :crossed_fingers:
  • so if anyone has a solution that would be great, seems like there was a problem with ionic 4 and loading in the icons to stackblitz but idk how that compares to now