feat: Update articles page UI (#13049)

app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue

@@ -14,6 +14,14 @@ defineProps({
     type: Number,
     default: 1,
   },
+  headerTitle: {
+    type: String,
+    default: '',
+  },
+  createButtonLabel: {
+    type: String,
+    default: '',
+  },
   totalItems: {
     type: Number,
     default: 100,
@@ -32,7 +40,7 @@ defineProps({
   },
 });
 
-const emit = defineEmits(['update:currentPage']);
+const emit = defineEmits(['update:currentPage', 'create']);
 
 const route = useRoute();
 
@@ -55,48 +63,75 @@ const updateCurrentPage = page => {
 const togglePortalSwitcher = () => {
   showPortalSwitcher.value = !showPortalSwitcher.value;
 };
+
+const onClickCreateButton = () => {
+  emit('create');
+};
 </script>
 
 <template>
   <section class="flex flex-col w-full h-full overflow-hidden bg-n-surface-1">
-    <header class="sticky top-0 z-10 px-6 pb-3 lg:px-0">
-      <div class="w-full max-w-[60rem] mx-auto lg:px-6">
-        <div
-          v-if="showHeaderTitle"
-          class="flex items-center justify-start h-20 gap-2"
-        >
-          <span
-            v-if="activePortalName"
-            class="text-xl font-medium text-n-slate-12"
+    <header
+      class="sticky top-0 z-10 px-6 pb-3 lg:px-0 after:absolute after:inset-x-0 after:-bottom-4 after:bg-gradient-to-b after:from-n-surface-1 after:from-10% after:dark:from-0% after:to-transparent after:h-4 after:pointer-events-none"
+    >
+      <div class="w-full max-w-5xl mx-auto lg:px-6">
+        <div class="flex items-center justify-between gap-3">
+          <div
+            v-if="showHeaderTitle"
+            class="flex items-center justify-start h-20 gap-1"
           >
-            {{ activePortalName }}
-          </span>
-          <div v-if="activePortalName" class="relative group">
-            <OnClickOutside @trigger="showPortalSwitcher = false">
-              <Button
-                icon="i-lucide-chevron-down"
-                variant="ghost"
-                color="slate"
-                size="xs"
-                class="rounded-md group-hover:bg-n-slate-3 hover:bg-n-slate-3"
-                @click="togglePortalSwitcher"
-              />
+            <span
+              v-if="activePortalName"
+              class="text-lg font-520 text-n-slate-12 ltr:mr-1 rtl:ml-1"
+            >
+              {{ activePortalName }}
+            </span>
+            <div v-if="activePortalName" class="relative group">
+              <OnClickOutside @trigger="showPortalSwitcher = false">
+                <Button
+                  icon="i-lucide-chevron-down"
+                  variant="ghost"
+                  color="slate"
+                  size="xs"
+                  class="rounded-md group-hover:bg-n-slate-3 hover:bg-n-slate-3 [&>span]:size-4"
+                  @click="togglePortalSwitcher"
+                />
 
-              <PortalSwitcher
-                v-if="showPortalSwitcher"
-                class="absolute ltr:left-0 rtl:right-0 top-9"
-                @close="showPortalSwitcher = false"
-                @create-portal="createPortalDialogRef.dialogRef.open()"
+                <PortalSwitcher
+                  v-if="showPortalSwitcher"
+                  class="absolute ltr:left-0 rtl:right-0 top-9"
+                  @close="showPortalSwitcher = false"
+                  @create-portal="createPortalDialogRef.dialogRef.open()"
+                />
+              </OnClickOutside>
+              <CreatePortalDialog ref="createPortalDialogRef" />
+            </div>
+            <div
+              v-if="activePortalName && headerTitle"
+              class="flex items-center gap-1"
+            >
+              <div
+                v-if="activePortalName"
+                class="w-px h-3 rounded-2xl bg-n-strong ltr:ml-2 ltr:mr-3 rtl:mr-2 rtl:ml-3"
               />
-            </OnClickOutside>
-            <CreatePortalDialog ref="createPortalDialogRef" />
+              <span v-if="headerTitle" class="text-sm font-420 text-n-slate-12">
+                {{ headerTitle }}
+              </span>
+            </div>
           </div>
+          <Button
+            v-if="createButtonLabel"
+            :label="createButtonLabel"
+            icon="i-lucide-plus"
+            size="sm"
+            @click="onClickCreateButton"
+          />
         </div>
         <slot name="header-actions" />
       </div>
     </header>
     <main class="flex-1 px-6 overflow-y-auto lg:px-0">
-      <div class="w-full max-w-[60rem] mx-auto py-3 lg:px-6">
+      <div class="w-full max-w-5xl mx-auto py-3 lg:px-6">
         <slot name="content" />
       </div>
     </main>
@@ -105,6 +140,7 @@ const togglePortalSwitcher = () => {
         :current-page="currentPage"
         :total-items="totalItems"
         :items-per-page="itemsPerPage"
+        class="max-w-5xl"
         @update:current-page="updateCurrentPage"
       />
     </footer>