fix(Template - nextjs-app): fix assets import & ThemeProvider position (#5273)

This PR also adds a theme-switch popover to the shellbar.

Author: Lukas742

examples/nextjs-app/app/components/AppShell.tsx

@@ -1,30 +1,19 @@
 'use client';
 
-import navBackIcon from '@ui5/webcomponents-icons/dist/nav-back.js';
-import { Button, ShellBar } from '@ui5/webcomponents-react';
 import '@ui5/webcomponents-react/dist/Assets.js';
-import { usePathname, useRouter } from 'next/navigation';
+import { AppShellBar } from '@/app/components/AppShellBar';
+import { ThemeProvider } from '@ui5/webcomponents-react';
+import { ReactNode } from 'react';
 
-export function AppShell() {
-  const router = useRouter();
-  const pathname = usePathname();
+interface AppShellProps {
+  children?: ReactNode | ReactNode[];
+}
 
+export function AppShell({ children }: AppShellProps) {
   return (
-    <>
-      <ShellBar
-        primaryTitle={'UI5 Web Components for React Examples'}
-        secondaryTitle={'NextJS - App Router'}
-        startButton={
-          pathname !== '/' && (
-            <Button
-              icon={navBackIcon}
-              onClick={() => {
-                router.back();
-              }}
-            />
-          )
-        }
-      />
-    </>
+    <ThemeProvider>
+      <AppShellBar />
+      <div className="appScrollContainer">{children}</div>
+    </ThemeProvider>
   );
 }

examples/nextjs-app/app/components/AppShellBar.module.css

@@ -0,0 +1,5 @@
+.popover {
+}
+.popover::part(content) {
+  padding: 0;
+}

examples/nextjs-app/app/components/AppShellBar.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import navBackIcon from '@ui5/webcomponents-icons/dist/nav-back.js';
+import paletteIcon from '@ui5/webcomponents-icons/dist/palette.js';
+import {
+  Button,
+  List,
+  ListMode,
+  ListPropTypes,
+  ResponsivePopover,
+  ResponsivePopoverDomRef,
+  ShellBar,
+  ShellBarItem,
+  ShellBarItemPropTypes,
+  StandardListItem
+} from '@ui5/webcomponents-react';
+import { usePathname, useRouter } from 'next/navigation';
+import { useRef, useState } from 'react';
+import classes from './AppShellBar.module.css';
+import { getTheme, setTheme } from '@ui5/webcomponents-base/dist/config/Theme.js';
+
+const THEMES = [
+  { key: 'sap_horizon', value: 'Morning Horizon (Light)' },
+  { key: 'sap_horizon_dark', value: 'Evening Horizon (Dark)' },
+  { key: 'sap_horizon_hcb', value: 'Horizon High Contrast Black' },
+  { key: 'sap_horizon_hcw', value: 'Horizon High Contrast White' }
+];
+
+export function AppShellBar() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const popoverRef = useRef<ResponsivePopoverDomRef | null>(null);
+  const [currentTheme, setCurrentTheme] = useState(getTheme);
+
+  const handleThemeSwitchItemClick: ShellBarItemPropTypes['onClick'] = (e) => {
+    popoverRef.current?.showAt(e.detail.targetRef);
+  };
+  const handleThemeSwitch: ListPropTypes['onSelectionChange'] = (e) => {
+    const { targetItem } = e.detail;
+    setTheme(targetItem.dataset.key!);
+    setCurrentTheme(targetItem.dataset.key!);
+  };
+
+  return (
+    <>
+      <ShellBar
+        primaryTitle={'UI5 Web Components for React Examples'}
+        secondaryTitle={'NextJS - App Router'}
+        startButton={
+          pathname !== '/' && (
+            <Button
+              icon={navBackIcon}
+              onClick={() => {
+                router.back();
+              }}
+            />
+          )
+        }
+      >
+        <ShellBarItem icon={paletteIcon} text="Change Theme" onClick={handleThemeSwitchItemClick} />
+      </ShellBar>
+      <ResponsivePopover ref={popoverRef} className={classes.popover}>
+        <List onSelectionChange={handleThemeSwitch} headerText="Change Theme" mode={ListMode.SingleSelect}>
+          {THEMES.map((theme) => (
+            <StandardListItem key={theme.key} selected={currentTheme === theme.key} data-key={theme.key}>
+              {theme.value}
+            </StandardListItem>
+          ))}
+        </List>
+      </ResponsivePopover>
+    </>
+  );
+}

examples/nextjs-app/app/layout.tsx

@@ -1,7 +1,6 @@
+import './globals.css';
 import { AppShell } from '@/app/components/AppShell';
 import { CssRegistry } from '@/app/CssRegistry';
-import { ThemeProvider } from '@ui5/webcomponents-react';
-import './globals.css';
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
@@ -20,10 +19,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       <body>
         <div className="appShell">
           <CssRegistry>
-            <ThemeProvider>
-              <AppShell />
-              <div className="appScrollContainer">{children}</div>
-            </ThemeProvider>
+            <AppShell>{children}</AppShell>
           </CssRegistry>
         </div>
       </body>

examples/nextjs-app/app/todos/[id]/page.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { Todo, todos } from '@/app/mockData/todos';
 import {
   DatePicker,