[Solved] Left side panel not full screen height

Left side panel not full screen height when on a iphone device with a notch.

Correct, because top part is Statusbar https://framework7.io/docs/statusbar.html

Yeah, but no native app works that way. They all extend through the status bar. LinkedIn, Lyft, Uber, PersonalCapital, etc

Lot of native apps works that way. If you need such behavior, it can be easily tweaked by adding few custom styles, something like:

.panel-cover {
  top: 0;
  z-index: 10100;
  height: 100%;
  --f7-page-content-extra-padding-top: var(--f7-statusbar-height);
}
.panel-cover .navbar {
  height: calc(var(--f7-navbar-height) + var(--f7-statusbar-height));
}
.panel-cover .navbar-inner {
  top: var(--f7-statusbar-height);
}
.panel-backdrop {
  z-index: 10050;
  top: 0;
  height: 100%;
}

Thanks! It looks awesome now!

(I had tried playing with zindex and padding, but didn’t know about the extra padding var)

Oddly, this fix does not work for reveal (after I change the class names in your code). The z-index: 10100; line added to .panel-cover breaks the animation.