Add CurrentSubjectContext with errors

browser/create-template/templates/nextjs-site/src/app/context/CurrentSubjectContext.tsx

@@ -0,0 +1,39 @@
+import { env } from '@/env';
+import { createContext, useContext, useState } from 'react';
+
+interface CurrentSubjectContextType {
+  currentSubject: string;
+  setCurrentSubject: (newSubject: string) => void;
+}
+
+const CurrentSubjectContext = createContext<
+  CurrentSubjectContextType | undefined
+>(undefined);
+
+export const CurrentSubjectProvider = ({
+  children,
+}: {
+  children: Readonly<React.ReactNode>;
+}) => {
+  const [currentSubject, setCurrentSubject] = useState<string>(
+    env.NEXT_PUBLIC_WEBSITE_RESOURCE,
+  );
+  return (
+    <CurrentSubjectContext.Provider
+      value={{
+        currentSubject,
+        setCurrentSubject,
+      }}
+    >
+      {children}
+    </CurrentSubjectContext.Provider>
+  );
+};
+
+export const useCurrentSubject = () => {
+  const context = useContext(CurrentSubjectContext);
+  if (!context) {
+    throw new Error('useSubject must be used within a SubjectProvider');
+  }
+  return context;
+};

browser/create-template/templates/nextjs-site/src/components/ProviderWrapper.tsx

@@ -4,6 +4,7 @@ import { Store } from '@tomic/lib';
 import { StoreContext } from '@tomic/react';
 import { env } from '@/env';
 import { initOntologies } from '@/ontologies';
+import { CurrentSubjectProvider } from '@/app/context/CurrentSubjectContext';
 
 const ProviderWrapper = ({
   children,
@@ -17,7 +18,9 @@ const ProviderWrapper = ({
   initOntologies();
 
   return (
-    <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
+    <StoreContext.Provider value={store}>
+      <CurrentSubjectProvider>{children}</CurrentSubjectProvider>
+    </StoreContext.Provider>
   );
 };
 

browser/create-template/templates/nextjs-site/src/views/FullPage/FullPageView.tsx

@@ -1,24 +1,28 @@
-"use client";
+'use client';
 
-import { website } from "@/ontologies/website";
-import PageFullPage from "./PageFullPage";
-import BlogIndexPageFullPage from "./BlogIndexPageFullPage";
-import BlogpostFullPage from "./BlogpostFullPage";
-import DefaultFullPage from "./DefaultFullPage";
-import { useResource } from "@tomic/react";
+import { website } from '@/ontologies/website';
+import PageFullPage from './PageFullPage';
+import BlogIndexPageFullPage from './BlogIndexPageFullPage';
+import BlogpostFullPage from './BlogpostFullPage';
+import DefaultFullPage from './DefaultFullPage';
+import { useResource } from '@tomic/react';
+import { useCurrentSubject } from '@/app/context/CurrentSubjectContext';
 
 const FullPageView = ({ subject }: { subject: string }) => {
   const resource = useResource(subject);
+  const { setCurrentSubject } = useCurrentSubject();
 
   const Component = resource.matchClass(
     {
       [website.classes.page]: PageFullPage,
       [website.classes.blogIndexPage]: BlogIndexPageFullPage,
       [website.classes.blogpost]: BlogpostFullPage,
     },
-    DefaultFullPage
+    DefaultFullPage,
   );
 
+  setCurrentSubject(subject);
+
   return <Component resource={resource} />;
 };
 

browser/create-template/templates/nextjs-site/src/views/MenuItem/MenuItem.tsx

@@ -2,32 +2,33 @@ import type { MenuItem } from '@/ontologies/website';
 import { unknownSubject, useResource } from '@tomic/react';
 import MenuItemLink from './MenuItemLink';
 import styles from './MenuItem.module.css';
+import { useCurrentSubject } from '@/app/context/CurrentSubjectContext';
 
 const MenuItem = ({ subject }: { subject: string }) => {
   const menuItem = useResource<MenuItem>(subject ?? unknownSubject);
 
-  const currentSubject = '';
+  const { currentSubject } = useCurrentSubject();
 
   const id = (Math.random().toString(36) + '00000000000000000').slice(2, 10);
 
   return menuItem.props.subItems && menuItem.props.subItems.length > 0 ? (
     <>
       <button
         className={styles.button}
-        popoverTarget={id}
-        popoverTargetAction='toggle'
+        popovertarget={id}
+        popovertargetaction='toggle'
       >
         {menuItem.title}
       </button>
 
       <div id={id} className={styles.submenu} popover='auto'>
-        {menuItem.props.subItems?.map((subItem: string, index: number) => (
-          <ul className={styles.ul}>
+        <ul className={styles.ul}>
+          {menuItem.props.subItems?.map((subItem: string, index: number) => (
             <li key={index}>
               <MenuItem subject={subItem} />
             </li>
-          </ul>
-        ))}
+          ))}
+        </ul>
       </div>
     </>
   ) : (