initial

apps/client/components/page/header.vue

@@ -0,0 +1,90 @@
+<template>
+  <header class="page-header">
+    <div class="page-header__title">
+      <UiButton
+        v-if="withBackButton"
+        icon="arrow-left"
+        color="secondary"
+        class="mr-24"
+        href="/projects"
+        type="outlined"
+      />
+
+      <h1>{{ title }}</h1>
+
+      <div
+        v-if="$slots.default"
+        class="page-header__default"
+      >
+        <slot />
+      </div>
+    </div>
+
+    <div class="page-header__right">
+      <slot name="right">
+        <div class="d-flex align-items-center" style="gap: 24px;">
+          <NotificationsDropdown />
+          <ProfileDropdown />
+        </div>
+      </slot>
+    </div>
+  </header>
+</template>
+
+<script setup>
+defineProps({
+  title: {
+    type: String,
+  },
+  withBackButton: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const notify = useNotify()
+</script>
+
+<style lang="scss">
+@use 'sass:color';
+
+.page-header {
+  position: sticky;
+  backdrop-filter: blur(4px);
+  background-size: 4px 4px;
+  background-image: radial-gradient(
+    color.change($clr-grey-100, $alpha: 0.7) 2px,
+    $clr-cyan-200
+  );
+  border-bottom: 1px solid #f4f6ff;
+  margin-inline: -16px;
+  padding-inline: 16px;
+  top: 0;
+  z-index: 6000;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  //margin-bottom: 32px;
+  padding-block: 32px;
+
+  &__title {
+    display: flex;
+    align-items: center;
+  }
+
+  &__default {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+    margin-left: 24px;
+  }
+
+  &__right {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+  }
+}
+</style>