diff --git a/CHANGELOG.md b/CHANGELOG.md index 524d303e..cf5f4cb5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ### Fixed * [#1637](https://github.com/shlinkio/shlink-web-client/issues/1637) Fix brand color used in PWA +* [#1636](https://github.com/shlinkio/shlink-web-client/issues/1636) Make sure sidebar toggle is rendered only in sections where the sidebar exists. ## [4.5.0] - 2025-08-08 diff --git a/src/app/App.tsx b/src/app/App.tsx index 619784da..6ee98cad 100644 --- a/src/app/App.tsx +++ b/src/app/App.tsx @@ -1,5 +1,4 @@ import { changeThemeInMarkup, getSystemPreferredTheme } from '@shlinkio/shlink-frontend-kit'; -import { ShlinkSidebarToggleButton, ShlinkSidebarVisibilityProvider } from '@shlinkio/shlink-web-component'; import type { Settings } from '@shlinkio/shlink-web-component/settings'; import { clsx } from 'clsx'; import type { FC } from 'react'; @@ -63,8 +62,7 @@ const App: FCWithDeps = ( return (
- - + <>
@@ -94,7 +92,7 @@ const App: FCWithDeps = (
- + diff --git a/src/common/ShlinkWebComponentContainer.tsx b/src/common/ShlinkWebComponentContainer.tsx index cd437afa..ab82c7d0 100644 --- a/src/common/ShlinkWebComponentContainer.tsx +++ b/src/common/ShlinkWebComponentContainer.tsx @@ -1,4 +1,9 @@ -import type { ShlinkWebComponentProps, TagColorsStorage } from '@shlinkio/shlink-web-component'; +import type { TagColorsStorage } from '@shlinkio/shlink-web-component'; +import { + ShlinkSidebarToggleButton, + ShlinkSidebarVisibilityProvider, + ShlinkWebComponent, +} from '@shlinkio/shlink-web-component'; import type { Settings } from '@shlinkio/shlink-web-component/settings'; import type { FC } from 'react'; import { memo } from 'react'; @@ -17,7 +22,6 @@ type ShlinkWebComponentContainerProps = WithSelectedServerProps & { type ShlinkWebComponentContainerDeps = { buildShlinkApiClient: ShlinkApiClientBuilder, TagColorsStorage: TagColorsStorage, - ShlinkWebComponent: FC, ServerError: FC, }; @@ -32,7 +36,6 @@ const ShlinkWebComponentContainer: FCWithDeps< const { buildShlinkApiClient, TagColorsStorage: tagColorsStorage, - ShlinkWebComponent, ServerError, } = useDependencies(ShlinkWebComponentContainer); @@ -42,23 +45,25 @@ const ShlinkWebComponentContainer: FCWithDeps< const routesPrefix = `/server/${selectedServer.id}`; return ( - ( - List short URLs - )} - autoSidebarToggle={false} - /> + + + ( + List short URLs + )} + autoSidebarToggle={false} + /> + ); })); export const ShlinkWebComponentContainerFactory = componentFactory(ShlinkWebComponentContainer, [ 'buildShlinkApiClient', 'TagColorsStorage', - 'ShlinkWebComponent', 'ServerError', ]); diff --git a/src/common/services/provideServices.ts b/src/common/services/provideServices.ts index 003a7dc9..7e367137 100644 --- a/src/common/services/provideServices.ts +++ b/src/common/services/provideServices.ts @@ -1,5 +1,4 @@ import { FetchHttpClient } from '@shlinkio/shlink-js-sdk/fetch'; -import { ShlinkWebComponent } from '@shlinkio/shlink-web-component'; import type Bottle from 'bottlejs'; import type { ConnectDecorator } from '../../container/types'; import { withoutSelectedServer } from '../../servers/helpers/withoutSelectedServer'; @@ -26,7 +25,6 @@ export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => { bottle.decorator('Home', withoutSelectedServer); bottle.decorator('Home', connect(['servers'], ['resetSelectedServer'])); - bottle.serviceFactory('ShlinkWebComponent', () => ShlinkWebComponent); bottle.factory('ShlinkWebComponentContainer', ShlinkWebComponentContainerFactory); bottle.decorator('ShlinkWebComponentContainer', connect(['selectedServer', 'settings'], ['selectServer'])); diff --git a/test/common/ShlinkWebComponentContainer.test.tsx b/test/common/ShlinkWebComponentContainer.test.tsx index 61dade0d..d186a588 100644 --- a/test/common/ShlinkWebComponentContainer.test.tsx +++ b/test/common/ShlinkWebComponentContainer.test.tsx @@ -5,11 +5,16 @@ import type { NonReachableServer, NotFoundServer, SelectedServer } from '../../s import { checkAccessibility } from '../__helpers__/accessibility'; import { MemoryRouterWithParams } from '../__helpers__/MemoryRouterWithParams'; +vi.mock('@shlinkio/shlink-web-component', () => ({ + ShlinkSidebarVisibilityProvider: ({ children }: any) => children, + ShlinkSidebarToggleButton: ({ children }: any) => children, + ShlinkWebComponent: () => <>ShlinkWebComponent, +})); + describe('', () => { const ShlinkWebComponentContainer = ShlinkWebComponentContainerFactory(fromPartial({ buildShlinkApiClient: vi.fn().mockReturnValue(fromPartial({})), TagColorsStorage: fromPartial({}), - ShlinkWebComponent: () => <>ShlinkWebComponent, ServerError: () => <>ServerError, })); const setUp = (selectedServer: SelectedServer) => render(