From 74c718c684bf9a82ff9a799e810ddcd2becd7e3a Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Wed, 13 Apr 2022 22:33:15 +0800
Subject: [PATCH] Sticky permissions overview header (#12704)

* Sticky permissions overview header

* refactor to script setup

* add header bar height as css variable
---
 app/src/layouts/calendar/calendar.vue               |  2 +-
 .../item/components/permissions-overview-header.vue | 13 +++++--------
 app/src/styles/_variables.scss                      |  1 +
 .../private/components/header-bar/header-bar.vue    |  2 +-
 4 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/app/src/layouts/calendar/calendar.vue b/app/src/layouts/calendar/calendar.vue
index c5bbc67fb7..ca13cffab6 100644
--- a/app/src/layouts/calendar/calendar.vue
+++ b/app/src/layouts/calendar/calendar.vue
@@ -40,7 +40,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .calendar-layout {
-	height: calc(100% - calc(61px + 2 * 24px));
+	height: calc(100% - calc(var(--header-bar-height) + 2 * 24px));
 	padding: var(--content-padding);
 	padding-top: 0;
 }
diff --git a/app/src/modules/settings/routes/roles/item/components/permissions-overview-header.vue b/app/src/modules/settings/routes/roles/item/components/permissions-overview-header.vue
index fc3285b029..2573e3cc23 100644
--- a/app/src/modules/settings/routes/roles/item/components/permissions-overview-header.vue
+++ b/app/src/modules/settings/routes/roles/item/components/permissions-overview-header.vue
@@ -9,22 +9,19 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { useI18n } from 'vue-i18n';
-import { defineComponent } from 'vue';
 
-export default defineComponent({
-	setup() {
-		const { t } = useI18n();
-		return { t };
-	},
-});
+const { t } = useI18n();
 </script>
 
 <style lang="scss" scoped>
 .permissions-overview-header {
 	--v-icon-color: var(--foreground-subdued);
 
+	position: sticky;
+	top: calc(var(--header-bar-height) - 1px); // minus 1px to avoid gaps
+	z-index: 4;
 	display: flex;
 	padding: 12px;
 	background-color: var(--background-input);
diff --git a/app/src/styles/_variables.scss b/app/src/styles/_variables.scss
index 4fb49f0f38..3af9100bfb 100644
--- a/app/src/styles/_variables.scss
+++ b/app/src/styles/_variables.scss
@@ -8,6 +8,7 @@
 	--fast: 125ms;
 	--medium: 200ms;
 	--slow: 300ms;
+	--header-bar-height: 61px;
 	--content-padding: 12px;
 	--border-width: 2px;
 	--border-radius-outline: 6px;
diff --git a/app/src/views/private/components/header-bar/header-bar.vue b/app/src/views/private/components/header-bar/header-bar.vue
index f2a12aa3cc..7de5f2586e 100644
--- a/app/src/views/private/components/header-bar/header-bar.vue
+++ b/app/src/views/private/components/header-bar/header-bar.vue
@@ -96,7 +96,7 @@ export default defineComponent({
 	align-items: center;
 	justify-content: flex-start;
 	width: 100%;
-	height: 61px;
+	height: var(--header-bar-height);
 	margin: 0;
 	padding: 0 10px;
 	background-color: var(--background-page);