Updated sidebar navigation in AdminX Settings

refs. https://github.com/TryGhost/Team/issues/3150

ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroup.tsx

@@ -6,6 +6,7 @@ import {IButton} from '../global/Button';
 export type TSettingGroupStates = 'view' | 'edit' | 'unsaved';
 
 interface SettingGroupProps {
+    navid?:string;
     title?: string;
     description?: React.ReactNode;
     state?: TSettingGroupStates;
@@ -22,6 +23,7 @@ interface SettingGroupProps {
 }
 
 const SettingGroup: React.FC<SettingGroupProps> = ({
+    navid,
     title,
     description,
     state,
@@ -93,7 +95,7 @@ const SettingGroup: React.FC<SettingGroupProps> = ({
     }
 
     return (
-        <div className={`flex flex-col gap-6 rounded border p-5 md:p-7 ${styles}`}>
+        <div className={`flex flex-col gap-6 rounded border p-5 md:p-7 ${styles}`} id={navid && navid}>
             {customHeader ? customHeader :
                 <SettingGroupHeader description={description} title={title!}>
                     {customButtons ? customButtons : 

ghost/admin-x-settings/src/admin-x-ds/settings/SettingNavItem.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 
 interface Props {
-    title: string;
+    title: React.ReactNode;
+    href?: string;
 }
 
-const SettingNavItem: React.FC<Props> = ({title}) => {
+const SettingNavItem: React.FC<Props> = ({title, href}) => {
     return (
-        <li><a className="block px-0 py-1 text-sm" href="_blank">{title}</a></li>
+        <li><a className="block px-0 py-1 text-sm" href={href}>{title}</a></li>
     );
 };
 

ghost/admin-x-settings/src/components/Sidebar.tsx

@@ -6,7 +6,7 @@ const Sidebar: React.FC = () => {
     return (
         <div className="hidden md:!visible md:!block md:h-[calc(100vh-8vmin-84px)] md:w-[300px] md:overflow-y-scroll md:pt-[32px]">
             <SettingNavSection title="General">
-                <SettingNavItem title="Title and description" />
+                <SettingNavItem href="#title-and-description" title="Title and description" />
                 <SettingNavItem title="Timezone" />
                 <SettingNavItem title="Publication language" />
                 <SettingNavItem title="Meta data" />

ghost/admin-x-settings/src/components/settings/general/TitleAndDescription.tsx

@@ -66,6 +66,7 @@ const TitleAndDescription: React.FC = () => {
     return (
         <SettingGroup
             description='The details used to identify your publication around the web'
+            navid='title-and-description'
             state={currentState}
             title='Title & description'
             onCancel={handleCancel}