Merge pull request #1384 from owncloud/15062021_sticky-appsidebar-header

Make OcAppSideBar header sticky & cleanup component
owncloud · Jun 16, 2021 · 242ff94 · 242ff94
2 parents 1935d20 + 1d06358
commit 242ff94
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 24 deletions.
diff --git a/changelog/unreleased/bugfix-sticky-appsidebar-header b/changelog/unreleased/bugfix-sticky-appsidebar-header
@@ -0,0 +1,6 @@
+Bugfix: Sticky OcAppSideBar Header
+
+The OcAppSideBar Header is now sticky so the user always sees the filename and most important info.
+UX is also improved since he now can always close the appsidebar on mobile without having to scroll back to the top.
+
+https://github.com/owncloud/owncloud-design-system/pull/1384
diff --git a/src/components/OcAppSideBar.vue b/src/components/OcAppSideBar.vue
@@ -1,31 +1,25 @@
 <template>
   <div class="oc-app-side-bar">
-    <div class="sidebar-container">
-      <div class="header primary">
-        <div v-if="!disableAction" class="action">
-          <slot name="action">
-            <oc-button
-              class="uk-float-right"
-              :aria-label="closeButtonLabel"
-              @click="$emit('close')"
-            >
-              <oc-icon name="close" />
-            </oc-button>
-          </slot>
-        </div>
-        <div class="sidebar-title">
-          <slot name="title">
-            <span class="oc-text-lead">{{ headingText }}</span>
-          </slot>
-        </div>
+    <div class="oc-app-side-bar-header oc-py-s">
+      <div v-if="!disableAction" class="action">
+        <slot name="action">
+          <oc-button class="uk-float-right" :aria-label="closeButtonLabel" @click="$emit('close')">
+            <oc-icon name="close" />
+          </oc-button>
+        </slot>
       </div>
-      <div class="content">
-        <slot name="content"></slot>
-      </div>
-      <div class="footer">
-        <slot name="footer"></slot>
+      <div class="sidebar-title">
+        <slot name="title">
+          <span class="oc-text-lead">{{ headingText }}</span>
+        </slot>
       </div>
     </div>
+    <div class="content">
+      <slot name="content" />
+    </div>
+    <div class="footer">
+      <slot name="footer" />
+    </div>
   </div>
 </template>
 
@@ -36,7 +30,7 @@
  */
 export default {
   name: "OcAppSideBar",
-  status: "prototype",
+  status: "ready",
   release: "1.0.0",
   props: {
     disableAction: {
@@ -64,6 +58,13 @@ export default {
 .oc-app-side-bar {
   height: 100vh;
 }
+
+.oc-app-side-bar-header {
+  background-color: var(--oc-color-background-default);
+  position: sticky;
+  top: 0px;
+  z-index: 1;
+}
 </style>
 
 <docs>