feat(layout): Implement spx-app-bar class

Author: spuxx-dev

packages/browser-utils/src/styles/application.css

@@ -3,11 +3,10 @@ html.spx-app {
   color: var(--spx-color-on-background);
   height: 100svh;
   width: 100svw;
-  overflow-y: hidden;
+  overflow-y: auto;
   overflow-x: hidden;
-  font-family:
-    ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-    'Noto Color Emoji';
+  font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
 
   > body {
     margin: 0;
@@ -20,6 +19,19 @@ html.spx-app {
       padding: 1rem;
     }
   }
+
+  &:has(.spx-app-bar[spx-position='top']) {
+    scroll-margin: var(--spx-app-bar-height);
+    > body {
+      padding-top: var(--spx-app-bar-height);
+    }
+  }
+
+  &:has(.spx-app-bar[spx-position='bottom']) {
+    > body {
+      padding-bottom: var(--spx-app-bar-height);
+    }
+  }
 }
 
 @media only screen and (max-width: 600px) {

packages/browser-utils/src/styles/components.css

@@ -1,5 +1,6 @@
 @import './components/control/button.css';
 @import './components/control/input.css';
+@import './components/layout/app-bar.css';
 @import './components/layout/divider.css';
 @import './components/layout/container.css';
 @import './components/typography/heading.css';

packages/browser-utils/src/styles/components/layout/app-bar.css

@@ -0,0 +1,32 @@
+.spx-app-bar {
+  position: fixed;
+  z-index: var(--spx-z-app-bar);
+  height: var(--spx-app-bar-height);
+  width: 100svw;
+  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;
+  }
+
+  /* .spx-app-bar-left,
+  .spx-app-bar-right,
+  .spx-app-bar-center {
+    > .spx-button {
+      height: var(--spx-app-bar-height);
+      font-size: x-large;
+    }
+  } */
+}

packages/browser-utils/src/styles/layout.css

@@ -1,6 +1,7 @@
 :root {
   --spx-z-modal: 85;
   --spx-z-modal-overlay: 81;
+  --spx-z-app-bar: 51;
 }
 
 .spx[spx-size='auto'] {

packages/browser-utils/src/styles/modal.css

@@ -19,6 +19,7 @@
   border-radius: var(--spx-border-radius);
   width: fit-content;
   max-width: 80svw;
+  box-shadow: var(--spx-shadow-medium);
 }
 
 .spx-modal[data-open] {

packages/browser-utils/src/styles/variables.css

@@ -1,6 +1,7 @@
 :root {
   --spx-main-content-width: 1440px;
 
+  --spx-app-bar-height: 48px;
   --spx-control-height-default: 40px;
   --spx-input-height-default: 48px;