Add example in the demo app

SchwarzIT · Dec 27, 2024 · e73a7c7 · e73a7c7
1 parent d564957
commit e73a7c7
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/apps/demo-app/src/views/HomeView.vue b/apps/demo-app/src/views/HomeView.vue
@@ -5,6 +5,7 @@ import {
   DENSITIES,
   OnyxAvatar,
   OnyxBadge,
+  OnyxBottomBar,
   OnyxButton,
   OnyxCheckboxGroup,
   OnyxDatePicker,
@@ -321,6 +322,14 @@ const selectedDate = ref<DateValue>();
         <!-- Add new components alphabetically. -->
       </div>
     </div>
+    <template #footer>
+      <OnyxBottomBar>
+        <template #right>
+          <OnyxButton label="Button" mode="plain" color="neutral"></OnyxButton>
+          <OnyxButton label="Button"></OnyxButton>
+        </template>
+      </OnyxBottomBar>
+    </template>
   </OnyxPageLayout>
 </template>
 

diff --git a/packages/sit-onyx/src/components/OnyxBottomBar/OnyxBottomBar.vue b/packages/sit-onyx/src/components/OnyxBottomBar/OnyxBottomBar.vue
@@ -43,7 +43,7 @@ const { densityClass } = useDensity(props);
 
 .onyx-bottom-bar {
   @include layers.component() {
-    position: fixed;
+    position: sticky;
     bottom: 0;
     width: 100%;
     margin-inline: var(--onyx-grid-margin-inline);