Make sure sidebar toggle is rendered only when the sidebar exists

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

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<AppProps, AppDeps> = (
 
   return (
     <div className="h-full">
-      <ShlinkSidebarVisibilityProvider>
+      <>
-        <ShlinkSidebarToggleButton className="fixed top-3.5 left-3 z-901" />
         <MainHeader />
 
         <div className="h-full pt-(--header-height)">
@@ -94,7 +92,7 @@ const App: FCWithDeps<AppProps, AppDeps> = (
             <ShlinkVersionsContainer />
           </div>
         </div>
-      </ShlinkSidebarVisibilityProvider>
+      </>
 
       <AppUpdateBanner isOpen={appUpdated} onClose={resetAppUpdate} forceUpdate={forceUpdate} />
     </div>

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<ShlinkWebComponentProps>,
   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 (
-    <ShlinkWebComponent
+    <ShlinkSidebarVisibilityProvider>
-      serverVersion={selectedServer.version}
+      <ShlinkSidebarToggleButton className="fixed top-3.5 left-3 z-901" />
-      apiClient={buildShlinkApiClient(selectedServer)}
+      <ShlinkWebComponent
-      settings={settings}
+        serverVersion={selectedServer.version}
-      routesPrefix={routesPrefix}
+        apiClient={buildShlinkApiClient(selectedServer)}
-      tagColorsStorage={tagColorsStorage}
+        settings={settings}
-      createNotFound={(nonPrefixedHomePath) => (
+        routesPrefix={routesPrefix}
-        <NotFound to={`${routesPrefix}${nonPrefixedHomePath}`}>List short URLs</NotFound>
+        tagColorsStorage={tagColorsStorage}
-      )}
+        createNotFound={(nonPrefixedHomePath: string) => (
-      autoSidebarToggle={false}
+          <NotFound to={`${routesPrefix}${nonPrefixedHomePath}`}>List short URLs</NotFound>
-    />
+        )}
+        autoSidebarToggle={false}
+      />
+    </ShlinkSidebarVisibilityProvider>
   );
 }));
 
 export const ShlinkWebComponentContainerFactory = componentFactory(ShlinkWebComponentContainer, [
   'buildShlinkApiClient',
   'TagColorsStorage',
-  'ShlinkWebComponent',
   'ServerError',
 ]);

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']));
 

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('<ShlinkWebComponentContainer />', () => {
   const ShlinkWebComponentContainer = ShlinkWebComponentContainerFactory(fromPartial({
     buildShlinkApiClient: vi.fn().mockReturnValue(fromPartial({})),
     TagColorsStorage: fromPartial({}),
-    ShlinkWebComponent: () => <>ShlinkWebComponent</>,
     ServerError: () => <>ServerError</>,
   }));
   const setUp = (selectedServer: SelectedServer) => render(