diff --git a/docusaurus/sidebars.js b/docusaurus/sidebars.js index 036d5a65e2..7185c39730 100644 --- a/docusaurus/sidebars.js +++ b/docusaurus/sidebars.js @@ -210,13 +210,151 @@ const sidebars = { collapsible: false, className: 'category-cms-configurations', items: [ + // Generic notice + { + 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", + 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', 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 1a948211c4..f5dae63e13 100644 --- a/docusaurus/src/scss/sidebar.scss +++ b/docusaurus/src/scss/sidebar.scss @@ -442,3 +442,263 @@ $selector-color-mode-toggle-wrapper: 'div[class*="ColorModeToggle"]'; } } } + +.sidebar-notice { + &-item { + padding: 0; + margin: 6px 0; + } + + & { + display: flex; + padding: 8px 10px; + 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 { + color: var(--strapi-neutral-600); + margin-right: 8px; + font-size: 12px; + flex-shrink: 0; + position: relative; + top: 2px; + } + + &-content { + font-size: 12px; + line-height: 16px; + color: var(--strapi-neutral-700); + } + + &-link { + color: var(--strapi-primary-600); + font-weight: 500; + font-size: 12px; + text-decoration: none; + margin-left: 4px; + display: inline; + + &:hover { + text-decoration: underline; + } + } + + &--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); + + .sidebar-notice-icon { + color: var(--strapi-primary-600); + } + } + + &--warning { + border-left-color: var(--strapi-warning-600); + background-color: var(--strapi-warning-100); + + .sidebar-notice-icon { + color: var(--strapi-warning-600); + } + } + + &--error { + border-left-color: var(--strapi-danger-600); + background-color: var(--strapi-danger-100); + + .sidebar-notice-icon { + color: var(--strapi-danger-600); + } + } + + &--success { + border-left-color: var(--strapi-success-600); + background-color: var(--strapi-success-100); + + .sidebar-notice-icon { + color: var(--strapi-success-600); + } + } + + &--moved { + border-left-color: var(--strapi-warning-600); + background-color: var(--strapi-warning-100); + + .sidebar-notice-icon { + color: var(--strapi-warning-600); + } + } +} + +@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); + + &-icon { + color: var(--strapi-neutral-400); + } + + &-content { + color: var(--strapi-neutral-400); + } + + &-link { + 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); + + .sidebar-notice-icon { + color: var(--strapi-primary-500); + } + } + + &--warning { + border-left-color: var(--strapi-warning-500); + + .sidebar-notice-icon { + color: var(--strapi-warning-500); + } + } + + &--error { + border-left-color: var(--strapi-danger-500); + + .sidebar-notice-icon { + color: var(--strapi-danger-500); + } + } + + &--success { + border-left-color: var(--strapi-success-500); + + .sidebar-notice-icon { + color: var(--strapi-success-500); + } + } + + &--moved { + border-left-color: var(--strapi-warning-500); + + .sidebar-notice-icon { + color: var(--strapi-warning-500); + } + } + } +} + +.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/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 ( +