feat: add OnyxNavBar component (#1070)

Relates to #867

- Add basic navigation bar component without mobile behaviour
- add navigation bar to alpha test app

Note on the "2xs" screenshots: For now we accept the "broken" visuals
until we implement the mobile behaviour of the nav bar in #1073

.changeset/lucky-pigs-fly.md

@@ -0,0 +1,7 @@
+---
+"sit-onyx": minor
+---
+
+feat: add `OnyxNavBar` component
+
+If you used one of the `onyx-grid-max-md`, `onyx-grid-max-lg` or `onyx-grid-center` CSS classes which are not placed on the application root, move them to the application root element. See [grid docs](https://onyx.schwarz/development/grid.html#example) for further information

.changeset/tall-hounds-count.md

@@ -0,0 +1,25 @@
+---
+"sit-onyx": major
+---
+
+rename SCSS breakpoint mixin
+
+Old:
+
+```scss
+@use "sit-onyx/breakpoints.scss" as onyx;
+
+@include onyx.breakpoint(max, md) {
+  // your styles
+}
+```
+
+New:
+
+```scss
+@use "sit-onyx/breakpoints.scss";
+
+@include breakpoints.screen(max, md) {
+  // your styles
+}
+```

apps/alpha-test-app/package.json

@@ -10,8 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "sit-onyx": "workspace:^",
     "@sit-onyx/icons": "workspace:^",
+    "sit-onyx": "workspace:^",
     "vue": "^3.4.27",
     "vue-i18n": "^9.13.1",
     "vue-router": "^4.3.2"

apps/alpha-test-app/src/App.vue

@@ -1,7 +1,60 @@
 <script setup lang="ts">
-import { RouterView } from "vue-router";
+import logout from "@sit-onyx/icons/logout.svg?raw";
+import settings from "@sit-onyx/icons/settings.svg?raw";
+import {
+  OnyxAppLayout,
+  OnyxNavBar,
+  OnyxNavItem,
+  OnyxUserMenu,
+  type ListboxOption,
+  type OnyxNavItemProps,
+} from "sit-onyx";
+import { RouterView, useRouter } from "vue-router";
+import onyxLogo from "./assets/onyx-logo.svg";
+
+const router = useRouter();
+
+const navItems = [
+  { label: "Home", href: "/" },
+  { label: "Form Demo", href: "/form-demo" },
+  { label: "Layout Demo", href: "/layout-demo" },
+] satisfies OnyxNavItemProps[];
+
+const userMenuOptions = [
+  { value: "/settings", label: "Settings", icon: settings },
+  { value: "logout", label: "Logout", icon: logout, color: "danger" },
+] satisfies ListboxOption[];
 </script>
 
 <template>
-  <RouterView />
+  <OnyxAppLayout>
+    <template #navBar>
+      <OnyxNavBar
+        app-name="Alpha Test App"
+        :logo-url="onyxLogo"
+        show-back-button
+        @back-button-click="router.back"
+        @app-area-click="router.push('/')"
+      >
+        <OnyxNavItem
+          v-for="item in navItems"
+          :key="item.href"
+          v-bind="item"
+          :active="item.href === router.currentRoute.value.path"
+          @click="router.push"
+        />
+
+        <template #contextArea>
+          <OnyxUserMenu username="John Doe" :options="userMenuOptions">
+            <template #footer>
+              App Version
+              <span class="onyx-text--monospace">0.0.0</span>
+            </template>
+          </OnyxUserMenu>
+        </template>
+      </OnyxNavBar>
+    </template>
+
+    <RouterView />
+  </OnyxAppLayout>
 </template>

apps/alpha-test-app/src/views/FormDemoView.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { OnyxAppLayout, OnyxHeadline, OnyxPageLayout } from "sit-onyx";
+import { OnyxHeadline, OnyxPageLayout } from "sit-onyx";
 import { ref } from "vue";
 import { useI18n } from "vue-i18n";
 import LanguageSelection from "../components/LanguageSelection.vue";
@@ -26,29 +26,27 @@ const invalidFormData = ref<FormData>({
 </script>
 
 <template>
-  <OnyxAppLayout>
-    <OnyxPageLayout>
-      <template #sidebar>
-        <div class="sidebar">
-          <LanguageSelection v-model="locale" />
+  <OnyxPageLayout>
+    <template #sidebar>
+      <div class="sidebar">
+        <LanguageSelection v-model="locale" />
 
-          <p>"{{ t("message") }}" in {{ locale }}</p>
-        </div>
-      </template>
+        <p>"{{ t("message") }}" in {{ locale }}</p>
+      </div>
+    </template>
 
-      <div class="page">
-        <OnyxHeadline is="h1" element="h1">Initially Invalid example</OnyxHeadline>
-        <FormDemo v-model="invalidFormData" />
-        <pre class="state">State: {{ invalidFormData }}</pre>
+    <div class="page">
+      <OnyxHeadline is="h1" element="h1">Initially Invalid example</OnyxHeadline>
+      <FormDemo v-model="invalidFormData" />
+      <pre class="state">State: {{ invalidFormData }}</pre>
 
-        <hr />
+      <hr />
 
-        <OnyxHeadline is="h1" element="h1">Initially Valid example</OnyxHeadline>
-        <FormDemo v-model="validFormData" />
-        <pre class="state">State: {{ validFormData }}</pre>
-      </div>
-    </OnyxPageLayout>
-  </OnyxAppLayout>
+      <OnyxHeadline is="h1" element="h1">Initially Valid example</OnyxHeadline>
+      <FormDemo v-model="validFormData" />
+      <pre class="state">State: {{ validFormData }}</pre>
+    </div>
+  </OnyxPageLayout>
 </template>
 
 <style lang="scss" scoped>