app-bar.css

.spx-app-bar {
  position: fixed;
  z-index: var(--spx-z-app-bar);
  height: var(--spx-app-bar-height);
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  background: var(--spx-color-app-bar);
  color: var(--spx-color-on-app-bar);
  padding: 4px;
  box-shadow: var(--spx-shadow-medium);

  &[spx-position='top'] {
    top: 0;
  }

  &[spx-position='bottom'] {
    bottom: 0;
  }

  &:has(.spx-app-bar-section:only-child) {
    justify-content: center;
  }
}

@media only screen and (min-width: 960px) {
  html.spx-app {
    > body {
      .spx-app-bar {
        transition-property: width;
        transition-timing-function: var(--spx-sidebar-transition-timing-function);
        transition-duration: var(--spx-sidebar-transition-duration);
      }

      &:has(.spx-sidebar[data-open]:not([data-closing])) {
        .spx-app-bar {
          width: calc(100% - var(--spx-sidebar-width-full));
        }
      }
    }
  }
}