diff --git a/src/apps/experimental/components/AppToolbar/userViews/UserViewNav.tsx b/src/apps/experimental/components/AppToolbar/userViews/UserViewNav.tsx index dbc3274ca1..1c3a22ca20 100644 --- a/src/apps/experimental/components/AppToolbar/userViews/UserViewNav.tsx +++ b/src/apps/experimental/components/AppToolbar/userViews/UserViewNav.tsx @@ -3,6 +3,7 @@ import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collec import ArrowDropDown from '@mui/icons-material/ArrowDropDown'; import Favorite from '@mui/icons-material/Favorite'; import Button from '@mui/material/Button/Button'; +import Icon from '@mui/material/Icon'; import { Theme } from '@mui/material/styles'; import useMediaQuery from '@mui/material/useMediaQuery'; import React, { useCallback, useMemo, useState } from 'react'; @@ -15,6 +16,7 @@ import { appRouter } from 'components/router/appRouter'; import { useApi } from 'hooks/useApi'; import useCurrentTab from 'hooks/useCurrentTab'; import { useUserViews } from 'hooks/useUserViews'; +import { useWebConfig } from 'hooks/useWebConfig'; import globalize from 'lib/globalize'; import UserViewsMenu from './UserViewsMenu'; @@ -56,14 +58,19 @@ const UserViewNav = () => { const libraryId = searchParams.get('topParentId') || searchParams.get('parentId'); const collectionType = searchParams.get('collectionType'); const { activeTab } = useCurrentTab(); + const webConfig = useWebConfig(); const isExtraLargeScreen = useMediaQuery((t: Theme) => t.breakpoints.up('xl')); const isLargeScreen = useMediaQuery((t: Theme) => t.breakpoints.up('lg')); const maxViews = useMemo(() => { - if (isExtraLargeScreen) return MAX_USER_VIEWS_XL; - if (isLargeScreen) return MAX_USER_VIEWS_LG; - return MAX_USER_VIEWS_MD; - }, [ isExtraLargeScreen, isLargeScreen ]); + let _maxViews = MAX_USER_VIEWS_MD; + if (isExtraLargeScreen) _maxViews = MAX_USER_VIEWS_XL; + else if (isLargeScreen) _maxViews = MAX_USER_VIEWS_LG; + + const customLinks = (webConfig.menuLinks || []).length; + + return _maxViews - customLinks; + }, [ isExtraLargeScreen, isLargeScreen, webConfig.menuLinks ]); const { user } = useApi(); const { @@ -108,6 +115,21 @@ const UserViewNav = () => { {globalize.translate(MetaView.Favorites.Name)} + {webConfig.menuLinks?.map(link => ( + + ))} + {primaryViews?.map(view => (