From 1ac40cff987852e8600e62b8962ddd01caf857b5 Mon Sep 17 00:00:00 2001 From: Pierre Wizla Date: Wed, 7 May 2025 18:16:37 +0200 Subject: [PATCH 1/5] Test new custom prop for sidebar "notices" (HTML sidebar type) --- docusaurus/sidebars.js | 51 ++++++ docusaurus/src/scss/sidebar.scss | 145 ++++++++++++++++++ .../src/theme/DocSidebarItem/Html/index.js | 40 ++++- 3 files changed, 235 insertions(+), 1 deletion(-) diff --git a/docusaurus/sidebars.js b/docusaurus/sidebars.js index 036d5a65e2..b9a61badf4 100644 --- a/docusaurus/sidebars.js +++ b/docusaurus/sidebars.js @@ -210,6 +210,57 @@ const sidebars = { collapsible: false, className: 'category-cms-configurations', items: [ + // Migration notice (original case) + { + type: 'html', + value: "Admin panel configuration has been moved to customization", + customProps: { + noticeType: 'moved', + noticeIcon: 'arrow-bend-up-right', + noticeLink: "/cms/customization/admin-panel", + noticeLinkText: "customization", + } + }, + // Information notice without link + { + type: 'html', + value: "This section is being updated", + customProps: { + noticeType: 'info', + noticeIcon: 'info', + } + }, + // Warning notice with link + { + type: 'html', + value: "This API is deprecated", + customProps: { + noticeType: 'warning', + noticeIcon: 'warning', + noticeLink: "/cms/api/new-api", + noticeLinkText: "See the new API", + } + }, + // Success notice + { + type: 'html', + value: "New feature available!", + customProps: { + noticeType: 'success', + noticeIcon: 'check-circle', + noticeLink: "/cms/features/new-feature", + noticeLinkText: "Learn more", + } + }, + // Error notice + { + type: 'html', + value: "This page contains known issues", + customProps: { + noticeType: 'error', + noticeIcon: 'warning-circle', + } + }, { type: 'doc', label: 'Configurations introduction', diff --git a/docusaurus/src/scss/sidebar.scss b/docusaurus/src/scss/sidebar.scss index 1a948211c4..6699d85b5b 100644 --- a/docusaurus/src/scss/sidebar.scss +++ b/docusaurus/src/scss/sidebar.scss @@ -442,3 +442,148 @@ $selector-color-mode-toggle-wrapper: 'div[class*="ColorModeToggle"]'; } } } + +/* Styles pour les notices dans la sidebar */ +.sidebar-notice-item { + padding: 0; + margin: 6px 0; +} + +.sidebar-notice { + display: flex; + padding: 8px 10px; + margin: 0 8px; + background-color: var(--strapi-neutral-100); + border-radius: 4px; + border-left: 2px solid var(--strapi-neutral-400); + box-shadow: 0 1px 2px rgba(33, 33, 52, 0.06); +} + +.sidebar-notice-icon { + color: var(--strapi-neutral-600); + margin-right: 8px; + font-size: 12px; + flex-shrink: 0; + position: relative; + top: 2px; +} + +.sidebar-notice-content { + font-size: 12px; + line-height: 16px; + color: var(--strapi-neutral-700); +} + +.sidebar-notice-link { + color: var(--strapi-primary-600); + font-weight: 500; + font-size: 12px; + text-decoration: none; + margin-left: 4px; + display: inline; +} + +.sidebar-notice-link:hover { + text-decoration: underline; +} + +/* Variantes par type */ +.sidebar-notice--info { + border-left-color: var(--strapi-primary-600); +} + +.sidebar-notice--info .sidebar-notice-icon { + color: var(--strapi-primary-600); +} + +.sidebar-notice--warning { + border-left-color: var(--strapi-warning-600); +} + +.sidebar-notice--warning .sidebar-notice-icon { + color: var(--strapi-warning-600); +} + +.sidebar-notice--error { + border-left-color: var(--strapi-danger-600); +} + +.sidebar-notice--error .sidebar-notice-icon { + color: var(--strapi-danger-600); +} + +.sidebar-notice--success { + border-left-color: var(--strapi-success-600); +} + +.sidebar-notice--success .sidebar-notice-icon { + color: var(--strapi-success-600); +} + +.sidebar-notice--moved { + border-left-color: var(--strapi-warning-600); +} + +.sidebar-notice--moved .sidebar-notice-icon { + color: var(--strapi-warning-600); +} + +/* Mode sombre */ +html[data-theme='dark'] .sidebar-notice { + background-color: var(--strapi-neutral-0); + border-left-color: var(--strapi-neutral-400); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); +} + +html[data-theme='dark'] .sidebar-notice-icon { + color: var(--strapi-neutral-400); +} + +html[data-theme='dark'] .sidebar-notice-content { + color: var(--strapi-neutral-400); +} + +html[data-theme='dark'] .sidebar-notice-link { + color: var(--strapi-primary-500); +} + +/* Variantes mode sombre */ +html[data-theme='dark'] .sidebar-notice--info { + border-left-color: var(--strapi-primary-500); +} + +html[data-theme='dark'] .sidebar-notice--info .sidebar-notice-icon { + color: var(--strapi-primary-500); +} + +html[data-theme='dark'] .sidebar-notice--warning { + border-left-color: var(--strapi-warning-500); +} + +html[data-theme='dark'] .sidebar-notice--warning .sidebar-notice-icon { + color: var(--strapi-warning-500); +} + +html[data-theme='dark'] .sidebar-notice--error { + border-left-color: var(--strapi-danger-500); +} + +html[data-theme='dark'] .sidebar-notice--error .sidebar-notice-icon { + color: var(--strapi-danger-500); +} + +html[data-theme='dark'] .sidebar-notice--success { + border-left-color: var(--strapi-success-500); +} + +html[data-theme='dark'] .sidebar-notice--success .sidebar-notice-icon { + color: var(--strapi-success-500); +} + +html[data-theme='dark'] .sidebar-notice--moved { + border-left-color: var(--strapi-warning-500); +} + +html[data-theme='dark'] .sidebar-notice--moved .sidebar-notice-icon { + color: var(--strapi-warning-500); +} \ No newline at end of file diff --git a/docusaurus/src/theme/DocSidebarItem/Html/index.js b/docusaurus/src/theme/DocSidebarItem/Html/index.js index e612e4ee7c..d0385439eb 100644 --- a/docusaurus/src/theme/DocSidebarItem/Html/index.js +++ b/docusaurus/src/theme/DocSidebarItem/Html/index.js @@ -3,8 +3,46 @@ import clsx from 'clsx'; import {ThemeClassNames} from '@docusaurus/theme-common'; import styles from './styles.module.css'; import { NewBadge, UpdatedBadge } from '../../../components/Badge'; + export default function DocSidebarItemHtml({item, level, index}) { const {value, defaultStyle, className, customProps} = item; + + // Gestion des notices (renommé de migration à notice) + if (customProps?.noticeType) { + return ( +
  • +
    + +
    + {value} {customProps.noticeLink && ( + + {customProps.noticeLinkText || 'Voir ici'} + + )} +
    +
    + {customProps?.new && } + {customProps?.updated && } +
    • + ); + } + + // Comportement original pour les items HTML standards return (
  • }
    • ); -} +} \ No newline at end of file From 16c72eb63635f7a4c8b1dd54e9c587cbb84b7ac0 Mon Sep 17 00:00:00 2001 From: Pierre Wizla Date: Wed, 7 May 2025 18:24:19 +0200 Subject: [PATCH 2/5] Refactor CSS --- docusaurus/src/scss/sidebar.scss | 233 ++++++++++++++++--------------- 1 file changed, 121 insertions(+), 112 deletions(-) diff --git a/docusaurus/src/scss/sidebar.scss b/docusaurus/src/scss/sidebar.scss index 6699d85b5b..4925764aab 100644 --- a/docusaurus/src/scss/sidebar.scss +++ b/docusaurus/src/scss/sidebar.scss @@ -444,146 +444,155 @@ $selector-color-mode-toggle-wrapper: 'div[class*="ColorModeToggle"]'; } /* Styles pour les notices dans la sidebar */ -.sidebar-notice-item { - padding: 0; - margin: 6px 0; -} - .sidebar-notice { - display: flex; - padding: 8px 10px; - margin: 0 8px; - background-color: var(--strapi-neutral-100); - border-radius: 4px; - border-left: 2px solid var(--strapi-neutral-400); - box-shadow: 0 1px 2px rgba(33, 33, 52, 0.06); -} + &-item { + padding: 0; + margin: 6px 0; + } -.sidebar-notice-icon { - color: var(--strapi-neutral-600); - margin-right: 8px; - font-size: 12px; - flex-shrink: 0; - position: relative; - top: 2px; -} + /* Style de base de la notice - toutes les propriétés regroupées ici */ + & { + display: flex; + padding: 8px 10px; + margin: 0 8px; + background-color: var(--strapi-neutral-100); + border-radius: 4px; + border-left: 2px solid var(--strapi-neutral-400); + box-shadow: 0 1px 2px rgba(33, 33, 52, 0.06); + } -.sidebar-notice-content { - font-size: 12px; - line-height: 16px; - color: var(--strapi-neutral-700); -} + &-icon { + color: var(--strapi-neutral-600); + margin-right: 8px; + font-size: 12px; + flex-shrink: 0; + position: relative; + top: 2px; + } -.sidebar-notice-link { - color: var(--strapi-primary-600); - font-weight: 500; - font-size: 12px; - text-decoration: none; - margin-left: 4px; - display: inline; -} + &-content { + font-size: 12px; + line-height: 16px; + color: var(--strapi-neutral-700); + } -.sidebar-notice-link:hover { - text-decoration: underline; -} + &-link { + color: var(--strapi-primary-600); + font-weight: 500; + font-size: 12px; + text-decoration: none; + margin-left: 4px; + display: inline; -/* Variantes par type */ -.sidebar-notice--info { - border-left-color: var(--strapi-primary-600); -} + &:hover { + text-decoration: underline; + } + } -.sidebar-notice--info .sidebar-notice-icon { - color: var(--strapi-primary-600); -} + /* Variantes par type */ + &--info { + border-left-color: var(--strapi-primary-600); + background-color: var(--strapi-primary-100); -.sidebar-notice--warning { - border-left-color: var(--strapi-warning-600); -} + .sidebar-notice-icon { + color: var(--strapi-primary-600); + } + } -.sidebar-notice--warning .sidebar-notice-icon { - color: var(--strapi-warning-600); -} + &--warning { + border-left-color: var(--strapi-warning-600); + background-color: var(--strapi-warning-100); -.sidebar-notice--error { - border-left-color: var(--strapi-danger-600); -} + .sidebar-notice-icon { + color: var(--strapi-warning-600); + } + } -.sidebar-notice--error .sidebar-notice-icon { - color: var(--strapi-danger-600); -} + &--error { + border-left-color: var(--strapi-danger-600); + background-color: var(--strapi-danger-100); -.sidebar-notice--success { - border-left-color: var(--strapi-success-600); -} + .sidebar-notice-icon { + color: var(--strapi-danger-600); + } + } -.sidebar-notice--success .sidebar-notice-icon { - color: var(--strapi-success-600); -} + &--success { + border-left-color: var(--strapi-success-600); + background-color: var(--strapi-success-100); -.sidebar-notice--moved { - border-left-color: var(--strapi-warning-600); -} + .sidebar-notice-icon { + color: var(--strapi-success-600); + } + } -.sidebar-notice--moved .sidebar-notice-icon { - color: var(--strapi-warning-600); -} + &--moved { + border-left-color: var(--strapi-warning-600); + background-color: var(--strapi-warning-100); -/* Mode sombre */ -html[data-theme='dark'] .sidebar-notice { - background-color: var(--strapi-neutral-0); - border-left-color: var(--strapi-neutral-400); - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); + .sidebar-notice-icon { + color: var(--strapi-warning-600); + } + } } -html[data-theme='dark'] .sidebar-notice-icon { - color: var(--strapi-neutral-400); -} + /* Mode sombre */ +@include dark { + .sidebar-notice { + background-color: var(--strapi-neutral-0) !important; + border-left-color: var(--strapi-neutral-400); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -html[data-theme='dark'] .sidebar-notice-content { - color: var(--strapi-neutral-400); -} + &-icon { + color: var(--strapi-neutral-400); + } -html[data-theme='dark'] .sidebar-notice-link { - color: var(--strapi-primary-500); -} + &-content { + color: var(--strapi-neutral-400); + } -/* Variantes mode sombre */ -html[data-theme='dark'] .sidebar-notice--info { - border-left-color: var(--strapi-primary-500); -} + &-link { + color: var(--strapi-primary-500); + } -html[data-theme='dark'] .sidebar-notice--info .sidebar-notice-icon { - color: var(--strapi-primary-500); -} + &--info { + border-left-color: var(--strapi-primary-500); -html[data-theme='dark'] .sidebar-notice--warning { - border-left-color: var(--strapi-warning-500); -} + .sidebar-notice-icon { + color: var(--strapi-primary-500); + } + } -html[data-theme='dark'] .sidebar-notice--warning .sidebar-notice-icon { - color: var(--strapi-warning-500); -} + &--warning { + border-left-color: var(--strapi-warning-500); -html[data-theme='dark'] .sidebar-notice--error { - border-left-color: var(--strapi-danger-500); -} + .sidebar-notice-icon { + color: var(--strapi-warning-500); + } + } -html[data-theme='dark'] .sidebar-notice--error .sidebar-notice-icon { - color: var(--strapi-danger-500); -} + &--error { + border-left-color: var(--strapi-danger-500); -html[data-theme='dark'] .sidebar-notice--success { - border-left-color: var(--strapi-success-500); -} + .sidebar-notice-icon { + color: var(--strapi-danger-500); + } + } -html[data-theme='dark'] .sidebar-notice--success .sidebar-notice-icon { - color: var(--strapi-success-500); -} + &--success { + border-left-color: var(--strapi-success-500); -html[data-theme='dark'] .sidebar-notice--moved { - border-left-color: var(--strapi-warning-500); -} + .sidebar-notice-icon { + color: var(--strapi-success-500); + } + } -html[data-theme='dark'] .sidebar-notice--moved .sidebar-notice-icon { - color: var(--strapi-warning-500); + &--moved { + border-left-color: var(--strapi-warning-500); + + .sidebar-notice-icon { + color: var(--strapi-warning-500); + } + } + } } \ No newline at end of file From 9b1c05c843d6961d0aa2502bdcbbce50435b8aad Mon Sep 17 00:00:00 2001 From: Pierre Wizla Date: Wed, 7 May 2025 18:24:58 +0200 Subject: [PATCH 3/5] Update dark background color so it can be seen --- docusaurus/src/scss/sidebar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docusaurus/src/scss/sidebar.scss b/docusaurus/src/scss/sidebar.scss index 4925764aab..7a6ff19df2 100644 --- a/docusaurus/src/scss/sidebar.scss +++ b/docusaurus/src/scss/sidebar.scss @@ -539,7 +539,7 @@ $selector-color-mode-toggle-wrapper: 'div[class*="ColorModeToggle"]'; /* Mode sombre */ @include dark { .sidebar-notice { - background-color: var(--strapi-neutral-0) !important; + background-color: var(--strapi-neutral-100) !important; border-left-color: var(--strapi-neutral-400); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); From 165e6ce639c9b5ad6fd118ed468a136dcfebe378 Mon Sep 17 00:00:00 2001 From: Pierre Wizla Date: Wed, 7 May 2025 18:30:36 +0200 Subject: [PATCH 4/5] Add a default notice style --- docusaurus/sidebars.js | 11 ++++++++++- docusaurus/src/scss/sidebar.scss | 23 ++++++++++++++++++----- 2 files changed, 28 insertions(+), 6 deletions(-) diff --git a/docusaurus/sidebars.js b/docusaurus/sidebars.js index b9a61badf4..c3fe2f3448 100644 --- a/docusaurus/sidebars.js +++ b/docusaurus/sidebars.js @@ -210,10 +210,19 @@ const sidebars = { collapsible: false, className: 'category-cms-configurations', items: [ + // Generic notce + { + type: 'html', + value: "This is a general information notice", + customProps: { + noticeType: 'default', + noticeIcon: 'info', + } + }, // Migration notice (original case) { type: 'html', - value: "Admin panel configuration has been moved to customization", + value: "Admin panel configuration has been moved to", customProps: { noticeType: 'moved', noticeIcon: 'arrow-bend-up-right', diff --git a/docusaurus/src/scss/sidebar.scss b/docusaurus/src/scss/sidebar.scss index 7a6ff19df2..896401fa73 100644 --- a/docusaurus/src/scss/sidebar.scss +++ b/docusaurus/src/scss/sidebar.scss @@ -443,14 +443,12 @@ $selector-color-mode-toggle-wrapper: 'div[class*="ColorModeToggle"]'; } } -/* Styles pour les notices dans la sidebar */ .sidebar-notice { &-item { padding: 0; margin: 6px 0; } - /* Style de base de la notice - toutes les propriétés regroupées ici */ & { display: flex; padding: 8px 10px; @@ -489,7 +487,15 @@ $selector-color-mode-toggle-wrapper: 'div[class*="ColorModeToggle"]'; } } - /* Variantes par type */ + &--default { + border-left-color: var(--strapi-neutral-400); + background-color: var(--strapi-neutral-100); + + .sidebar-notice-icon { + color: var(--strapi-neutral-600); + } + } + &--info { border-left-color: var(--strapi-primary-600); background-color: var(--strapi-primary-100); @@ -536,10 +542,9 @@ $selector-color-mode-toggle-wrapper: 'div[class*="ColorModeToggle"]'; } } - /* Mode sombre */ @include dark { .sidebar-notice { - background-color: var(--strapi-neutral-100) !important; + background-color: var(--strapi-neutral-0) !important; border-left-color: var(--strapi-neutral-400); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); @@ -555,6 +560,14 @@ $selector-color-mode-toggle-wrapper: 'div[class*="ColorModeToggle"]'; color: var(--strapi-primary-500); } + &--default { + border-left-color: var(--strapi-neutral-400); + + .sidebar-notice-icon { + color: var(--strapi-neutral-500); + } + } + &--info { border-left-color: var(--strapi-primary-500); From bbfff6431b94ab323841e3c5b823475589c16aee Mon Sep 17 00:00:00 2001 From: Pierre Wizla Date: Wed, 7 May 2025 19:01:40 +0200 Subject: [PATCH 5/5] WIP: Experiment with notice types for "type: 'doc'" --- docusaurus/sidebars.js | 82 +++++++++++++++- docusaurus/src/scss/sidebar.scss | 95 ++++++++++++++++++- .../src/theme/DocSidebarItem/Link/index.js | 84 +++++++++++++++- 3 files changed, 257 insertions(+), 4 deletions(-) diff --git a/docusaurus/sidebars.js b/docusaurus/sidebars.js index c3fe2f3448..7185c39730 100644 --- a/docusaurus/sidebars.js +++ b/docusaurus/sidebars.js @@ -210,7 +210,7 @@ const sidebars = { collapsible: false, className: 'category-cms-configurations', items: [ - // Generic notce + // Generic notice { type: 'html', value: "This is a general information notice", @@ -276,7 +276,85 @@ const sidebars = { id: 'cms/configurations', }, 'cms/configurations/admin-panel', - 'cms/configurations/api', + { + type: 'doc', + label: 'Admin Panel', + id: 'cms/configurations/admin-panel', + customProps: { + noticeType: 'moved', + noticeIcon: 'arrow-bend-up-right', + noticeText: "Admin panel configuration has been moved to", + noticeLink: "/cms/customization/admin-panel", + noticeLinkText: "customization" + } + }, + + // { + // type: 'doc', + // label: 'Admin Panel', + // id: 'cms/configurations/admin-panel', + // customProps: { + // noticeType: 'moved', + // noticeIcon: 'arrow-bend-up-right', + // noticeLink: "/cms/customization/admin-panel", + // noticeText: "Admin panel configuration has been moved to", + // noticeLinkText: "customization", + // } + // }, + // { + // type: 'doc', + // label: 'Admin Panel', + // id: 'cms/configurations/admin-panel', + // customProps: { + // noticeType: 'info', + // noticeIcon: 'info', + // noticeText: "This section is being updated", + // } + // }, + // { + // type: 'doc', + // label: 'Admin Panel', + // id: 'cms/configurations/admin-panel', + // customProps: { + // noticeType: 'warning', + // noticeIcon: 'warning', + // noticeLink: "/cms/api/new-api", + // noticeLinkText: "See the new API", + // noticeText: "This API is deprecated", + // } + // }, + // { + // type: 'doc', + // label: 'Admin Panel', + // id: 'cms/configurations/admin-panel', + // customProps: { + // noticeType: 'success', + // noticeIcon: 'check-circle', + // noticeLink: "/cms/features/new-feature", + // noticeLinkText: "Learn more", + // noticeText: "New feature available!", + // } + // }, + // { + // type: 'doc', + // label: 'Admin Panel', + // id: 'cms/configurations/admin-panel', + // customProps: { + // noticeType: 'error', + // noticeText: "This page contains known issues", + // noticeIcon: 'warning-circle', + // } + // }, + { + type: 'doc', + label: 'API', + id: 'cms/configurations/api', + customProps: { + noticeType: 'default', + noticeIcon: 'info', + noticeText: "This is a general information notice", + } + }, 'cms/configurations/cron', 'cms/configurations/database', 'cms/configurations/environment', diff --git a/docusaurus/src/scss/sidebar.scss b/docusaurus/src/scss/sidebar.scss index 896401fa73..f5dae63e13 100644 --- a/docusaurus/src/scss/sidebar.scss +++ b/docusaurus/src/scss/sidebar.scss @@ -452,11 +452,13 @@ $selector-color-mode-toggle-wrapper: 'div[class*="ColorModeToggle"]'; & { display: flex; padding: 8px 10px; - margin: 0 8px; + margin: 4px 0; + margin-left: 12px; background-color: var(--strapi-neutral-100); border-radius: 4px; border-left: 2px solid var(--strapi-neutral-400); box-shadow: 0 1px 2px rgba(33, 33, 52, 0.06); + font-size: 12px; } &-icon { @@ -608,4 +610,95 @@ $selector-color-mode-toggle-wrapper: 'div[class*="ColorModeToggle"]'; } } } +} + +.menu__link.sidebar-notice { + display: flex; + flex-direction: row; + align-items: flex-start; + margin: 0; + padding: 8px 10px; + height: auto; + min-height: unset; + color: var(--strapi-neutral-700); + background-color: var(--strapi-neutral-100); + border-radius: 4px; + border-left: 2px solid var(--strapi-neutral-400); + box-shadow: 0 1px 2px rgba(33, 33, 52, 0.06); + + &:hover { + text-decoration: none; + background-color: var(--strapi-neutral-150); + } + + &.menu__link--active { + background-color: var(--strapi-primary-100); + color: var(--strapi-primary-600); + border-left-color: var(--strapi-primary-600); + + .sidebar-notice-icon { + color: var(--strapi-primary-600); + } + } + + &.sidebar-notice--info { + &.menu__link--active { + background-color: var(--strapi-primary-100); + } + } + + &.sidebar-notice--warning { + &.menu__link--active { + background-color: var(--strapi-warning-100); + color: var(--strapi-warning-600); + border-left-color: var(--strapi-warning-600); + + .sidebar-notice-icon { + color: var(--strapi-warning-600); + } + } + } + + &.sidebar-notice--error { + &.menu__link--active { + background-color: var(--strapi-danger-100); + color: var(--strapi-danger-600); + border-left-color: var(--strapi-danger-600); + + .sidebar-notice-icon { + color: var(--strapi-danger-600); + } + } + } + + &.sidebar-notice--success { + &.menu__link--active { + background-color: var(--strapi-success-100); + color: var(--strapi-success-600); + border-left-color: var(--strapi-success-600); + + .sidebar-notice-icon { + color: var(--strapi-success-600); + } + } + } +} + +@include dark { + .menu__link.sidebar-notice { + background-color: var(--strapi-neutral-0); + color: var(--strapi-neutral-400); + + &:hover { + background-color: var(--strapi-neutral-100); + } + + &.menu__link--active { + color: var(--strapi-primary-500); + + .sidebar-notice-icon { + color: var(--strapi-primary-500); + } + } + } } \ No newline at end of file diff --git a/docusaurus/src/theme/DocSidebarItem/Link/index.js b/docusaurus/src/theme/DocSidebarItem/Link/index.js index 3ca0f127dc..ef984e2aeb 100644 --- a/docusaurus/src/theme/DocSidebarItem/Link/index.js +++ b/docusaurus/src/theme/DocSidebarItem/Link/index.js @@ -18,6 +18,88 @@ export default function DocSidebarItemLink({ const {href, label, className, autoAddBaseUrl, customProps} = item; const isActive = isActiveSidebarItem(item, activePath); const isInternalLink = isInternalUrl(href); + + // Si l'élément contient noticeType mais n'est pas destiné à être cliquable + if (customProps?.noticeType && customProps?.noticeNoLink) { + return ( +
  • +
    + +
    + {customProps.noticeText || label} {customProps.noticeLink && ( + + {customProps.noticeLinkText || 'Voir ici'} + + )} +
    +
    + {customProps?.new && } + {customProps?.updated && } +
    • + ); + } + + // Si l'élément est une notice mais aussi un lien + if (customProps?.noticeType) { + return ( +
  • + onItemClick(item) : undefined, + })} + {...props}> + +
    + {customProps.noticeText || label} +
    + {!isInternalLink && } + + {customProps?.new && } + {customProps?.updated && } +
    • + ); + } + + // Comportement normal pour les éléments 'doc' standards return (
    • ); -} +} \ No newline at end of file