feat: add toggle for media navigation link (#1007)

Author: KaneFreeman

packages/core/src/components/navbar/SidebarContent.tsx

@@ -9,6 +9,7 @@ import { getAdditionalLinks } from '@staticcms/core/lib/registry';
 import classNames from '@staticcms/core/lib/util/classNames.util';
 import { selectCollections } from '@staticcms/core/reducers/selectors/collections';
 import {
+  selectIsMediaLinkEnabled,
   selectIsSearchEnabled,
   selectUseWorkflow,
 } from '@staticcms/core/reducers/selectors/config';
@@ -33,6 +34,7 @@ const SidebarContent: FC<SidebarContentProps> = ({ isMobile = false }) => {
 
   const navigate = useNavigate();
   const isSearchEnabled = useAppSelector(selectIsSearchEnabled);
+  const isMediaLinkEnabled = useAppSelector(selectIsMediaLinkEnabled);
   const collections = useAppSelector(selectCollections);
   const useWorkflow = useAppSelector(selectUseWorkflow);
 
@@ -151,14 +153,16 @@ const SidebarContent: FC<SidebarContentProps> = ({ isMobile = false }) => {
         ) : null}
         {collectionLinks}
         {links}
-        <NavLink
-          key="Media"
-          to="/media"
-          icon={<PhotoIcon className={sidebarClasses['icon']} />}
-          data-testid={`${isMobile ? 'mobile-nav' : 'sidebar-nav'}-Media`}
-        >
-          {t('app.header.media')}
-        </NavLink>
+        {isMediaLinkEnabled ? (
+          <NavLink
+            key="Media"
+            to="/media"
+            icon={<PhotoIcon className={sidebarClasses['icon']} />}
+            data-testid={`${isMobile ? 'mobile-nav' : 'sidebar-nav'}-Media`}
+          >
+            {t('app.header.media')}
+          </NavLink>
+        ) : null}
       </ul>
     </div>
   );

packages/core/src/constants/configSchema.tsx

@@ -494,6 +494,7 @@ function getConfigSchema() {
       media_library: {
         type: 'object',
         properties: {
+          display_in_navigation: { type: 'boolean' },
           max_file_size: { type: 'number' },
           folder_support: { type: 'boolean' },
         },

packages/core/src/interface.ts

@@ -674,6 +674,10 @@ export interface MediaLibraryConfig {
   folder_support?: boolean;
 }
 
+export interface RootMediaLibraryConfig extends MediaLibraryConfig {
+  display_in_navigation?: boolean;
+}
+
 export type BackendType =
   | 'git-gateway'
   | 'github'
@@ -1046,7 +1050,7 @@ export interface Config<EF extends BaseField = UnknownField> {
   media_folder?: string;
   public_folder?: string;
   media_folder_relative?: boolean;
-  media_library?: MediaLibraryConfig;
+  media_library?: RootMediaLibraryConfig;
   publish_mode?: Workflow;
   slug?: Slug;
   i18n?: I18nInfo;

packages/core/src/reducers/selectors/config.ts

@@ -2,8 +2,8 @@ import { createSelector } from '@reduxjs/toolkit';
 
 import { EDITORIAL_WORKFLOW } from '@staticcms/core/constants/publishModes';
 
-import type { Workflow } from '@staticcms/core/constants/publishModes';
 import type { ConfigWithDefaults } from '@staticcms/core';
+import type { Workflow } from '@staticcms/core/constants/publishModes';
 import type { RootState } from '@staticcms/core/store';
 
 export function selectLocale(config?: ConfigWithDefaults) {
@@ -28,6 +28,17 @@ export const selectIsSearchEnabled = createSelector(
   },
 );
 
+export function selectMediaLinkEnabled(state: RootState) {
+  return state.config.config?.media_library?.display_in_navigation;
+}
+
+export const selectIsMediaLinkEnabled = createSelector(
+  [selectMediaLinkEnabled],
+  (display_in_navigation: boolean | undefined) => {
+    return display_in_navigation !== false;
+  },
+);
+
 export function selectDisplayUrl(state: RootState) {
   return state.config.config?.display_url;
 }

packages/docs/content/docs/configuration-options.mdx

@@ -138,10 +138,11 @@ The `media_library` settings allows customization of the media library.
 
 ### Options
 
-| Name           | Type    | Default  | Description                                                                            |
-| -------------- | ------- | -------- | -------------------------------------------------------------------------------------- |
-| max_file_size  | number  | `512000` | _Optional_. The max size, in bytes, of files that can be uploaded to the media library |
-| folder_support | boolean | `false`  | _Optional_. Enables directory navigation and folder creation in your media library     |
+| Name                  | Type    | Default  | Description                                                                            |
+| --------------------- | ------- | -------- | -------------------------------------------------------------------------------------- |
+| max_file_size         | number  | `512000` | _Optional_. The max size, in bytes, of files that can be uploaded to the media library |
+| folder_support        | boolean | `false`  | _Optional_. Enables directory navigation and folder creation in your media library     |
+| display_in_navigation | boolean | `true`   | _Optional_. Displays the "Media" link in the main navigation                           |
 
 ### Example