Decouple shlink-web-component from NotFound component

src/app/App.tsx

@@ -2,10 +2,10 @@ import classNames from 'classnames';
 import type { FC } from 'react';
 import { useEffect } from 'react';
 import { Route, Routes, useLocation } from 'react-router-dom';
+import type { Settings } from '../../shlink-web-component';
 import { AppUpdateBanner } from '../common/AppUpdateBanner';
 import { NotFound } from '../common/NotFound';
 import type { ServersMap } from '../servers/data';
-import type { Settings } from '../settings/reducers/settings';
 import { forceUpdate } from '../utils/helpers/sw';
 import { changeThemeInMarkup } from '../utils/theme';
 import './App.scss';

src/common/MenuLayout.tsx

@@ -5,6 +5,7 @@ import { ShlinkWebComponent } from '../../shlink-web-component';
 import type { ShlinkApiClientBuilder } from '../api/services/ShlinkApiClientBuilder';
 import { isReachableServer } from '../servers/data';
 import { withSelectedServer } from '../servers/helpers/withSelectedServer';
+import { NotFound } from './NotFound';
 import './MenuLayout.scss';
 
 interface MenuLayoutProps {
@@ -19,6 +20,7 @@ export const MenuLayout = (
   ServerError: FC,
 ) => withSelectedServer<MenuLayoutProps>(({ selectedServer, sidebarNotPresent, sidebarPresent, settings }) => {
   const showContent = isReachableServer(selectedServer);
+  const routesPrefix = showContent ? `/server/${selectedServer.id}` : '';
 
   useEffect(() => {
     showContent && sidebarPresent();
@@ -34,7 +36,10 @@ export const MenuLayout = (
       serverVersion={selectedServer.version}
       apiClient={buildShlinkApiClient(selectedServer)}
       settings={settings}
-      routesPrefix={`/server/${selectedServer.id}`}
+      routesPrefix={routesPrefix}
+      createNotFound={(nonPrefixedHomePath) => (
+        <NotFound to={`${routesPrefix}${nonPrefixedHomePath}`}>List short URLs</NotFound>
+      )}
     />
   );
 }, ServerError);