@1024pix/pix-ui 55.10.0 → 55.11.0

package/addon/components/pix-app-layout.hbs

@@ -1,5 +1,12 @@
 <div class={{this.classNames}} ...attributes>
-  {{yield to="navigation"}}
-  {{yield to="main"}}
-  {{yield to="footer"}}
+  <section
+    class="pix-app-layout__banner"
+    id="pix-layout-banner-container"
+    {{on-window-resize this.handleMarginContainerNavigation}}
+  >
+    {{yield to="banner"}}
+  </section>
+  <div class="pix-app-layout__navigation">{{yield to="navigation"}}</div>
+  <div class="pix-app-layout__main">{{yield to="main"}}</div>
+  <div class="pix-app-layout__footer">{{yield to="footer"}}</div>
 </div>

package/addon/components/pix-app-layout.js

@@ -1,8 +1,33 @@
 import { VARIANTS } from '@1024pix/pix-ui/helpers/variants';
 import { warn } from '@ember/debug';
+import { service } from '@ember/service';
 import Component from '@glimmer/component';
-
 export default class PixAppLayout extends Component {
+  @service elementHelper;
+
+  constructor(...args) {
+    super(...args);
+
+    this.elementHelper.waitForElement('pix-layout-banner-container').then((elementList) => {
+      this.#computeMarginTopElement(elementList);
+    });
+  }
+
+  #computeMarginTopElement(bannerContainer) {
+    const baseFontRemRatio = Number(
+      getComputedStyle(document.querySelector('html')).fontSize.match(/\d+(\.\d+)?/)[0],
+    );
+    const bannerHeight = bannerContainer.getBoundingClientRect().height;
+    const top = bannerHeight / baseFontRemRatio;
+
+    const layoutElement = document.querySelector('.pix-app-layout');
+    layoutElement.style.setProperty('--pix-app-layout-top', `${top}rem`);
+  }
+
+  handleMarginContainerNavigation = (element) => {
+    this.#computeMarginTopElement(element);
+  };
+
   get variant() {
     const value = this.args.variant ?? 'primary';
     warn(

package/addon/components/pix-navigation.js

@@ -8,6 +8,7 @@ export default class PixMNavigation extends Component {
     super(...args);
     this._navigationId = 'navigation-' + guidFor(this);
   }
+
   @tracked
   navigationMenuOpened = false;
 

package/addon/styles/_pix-app-layout.scss

@@ -3,30 +3,73 @@
 .pix-app-layout {
   display: grid;
   grid-template-areas:
-  "navigation main main"
-  "navigation footer  footer";
-  grid-template-rows: 1fr min-content;
+    "banner banner"
+    "navigation main"
+    "navigation footer";
+  grid-template-rows: min-content 1fr;
   grid-template-columns: min-content 1fr;
-  gap: var(--pix-spacing-6x);
   min-height: 100dvh;
-  padding: var(--pix-spacing-6x);
 
-  & > *:first-child {
+  @include breakpoints.device-is('mobile') {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__banner {
+    position: sticky;
+    top: 0;
+    z-index: 3;
+    grid-area: banner;
+  }
+
+  &__navigation {
+    position: sticky;
+    bottom: var(--pix-spacing-6x);
+    z-index: 1;
     grid-area: navigation;
+    min-height: calc(100vh - var(--pix-spacing-6x));
+    margin: auto 0 0;
+    padding: calc(var(--pix-app-layout-top) + var(--pix-spacing-6x)) 0 0 var(--pix-spacing-6x);
+
+    @include breakpoints.device-is('mobile') {
+      position: unset;
+      z-index: auto;
+      min-height: auto;
+      padding: var(--pix-spacing-2x) var(--pix-spacing-2x) 0 var(--pix-spacing-2x);
+    }
+  }
+
+  &__main, &__footer {
+    width: 100%;
+    max-width: 93rem;
+    margin: 0 auto;
+    padding: 0 var(--pix-spacing-6x);
+
+    @include breakpoints.device-is('mobile') {
+      padding: 0 var(--pix-spacing-2x);
+    }
   }
 
-  & > *:nth-child(2) {
+  &__main {
     grid-area: main;
+    padding-top: var(--pix-spacing-6x);
+
+    @include breakpoints.device-is('mobile') {
+      padding-top: var(--pix-spacing-2x);
+    }
   }
 
-  & > *:nth-child(3) {
+  &__footer {
     grid-area: footer;
-  }
+    padding-bottom: var(--pix-spacing-6x);
 
-  @include breakpoints.device-is('mobile') {
-    display: block
+    @include breakpoints.device-is('mobile') {
+      padding-bottom: var(--pix-spacing-2x);
+    }
   }
 
+
+
   &--admin {
     background-color: var(--pix-primary-10);
 

package/addon/styles/_pix-navigation.scss

@@ -6,34 +6,25 @@
   --bg-color-active: rgb(var(--pix-neutral-100-inline), 30%);
   --pix-navigation-width:  15rem;
 
-  position: sticky;
-  bottom: var(--pix-spacing-6x);
-  z-index: 1;
   display: flex;
   flex-direction: column;
   gap:var(--pix-spacing-6x);
   align-items: stretch;
   justify-content: space-between;
   width: var(--pix-navigation-width);
-  height: auto;
-  min-height: calc(100vh - var(--pix-spacing-6x) * 2);
-
-  // using a margin top / bottom allow user to discover rapidly
-  // the part of sidebar that is above the fold
-  margin-top: auto;
+  min-height: calc(100vh - var(--pix-app-layout-top) - 2 * var(--pix-spacing-6x));
   padding: var(--pix-spacing-6x) var(--pix-spacing-4x);
   color: var(--pix-navigation-text-color);
   background-color: var(--pix-navigation-color);
   border-radius: var(--pix-spacing-6x);
 
-
   @include breakpoints.device-is('mobile') {
-    position: static;
     flex-direction: column;
     align-items: stretch;
     width: 100%;
     max-width: none;
     min-height: auto;
+    margin-top: 0;
     padding: 0;
 
     &--opened {
@@ -49,7 +40,6 @@
 
     img {
       display: block;
-      width: 132px;
       height: 48px;
       margin:0 auto;
     }

package/app/modifiers/on-window-resize.js

@@ -0,0 +1,12 @@
+import { modifier } from 'ember-modifier';
+
+export default modifier(function onWindowResize(element, [action]) {
+  const actionWithElement = () => action(element);
+
+  window.addEventListener('resize', actionWithElement);
+  actionWithElement();
+
+  return () => {
+    window.removeEventListener('resize', actionWithElement);
+  };
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "55.10.0",
+  "version": "55.11.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"