Sonca 45 initial page scaffolding and layout

package.json

@@ -11,9 +11,12 @@
   },
   "dependencies": {
     "@aws-amplify/ui-react": "^6.5.5",
+    "@saffron/core-components": "^3.10.0",
+    "@saffron/core-styles": "^3.6.0",
     "aws-amplify": "^6.6.6",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^7.9.1"
   },
   "devDependencies": {
     "@aws-amplify/backend": "^1.5.0",

src/App.tsx

@@ -1,24 +1,32 @@
 import { useEffect, useState } from "react";
 import type { Schema } from "../amplify/data/resource";
 import { generateClient } from "aws-amplify/data";
+import NavBar from "./components/NavBar/NavBar.tsx";
+import SideNav from "./components/SideNav/SideNav.tsx";
 
-const client = generateClient<Schema>();
+// const client = generateClient<Schema>();
 
 function App() {
   const [todos, setTodos] = useState<Array<Schema["Todo"]["type"]>>([]);
 
   useEffect(() => {
-    client.models.Todo.observeQuery().subscribe({
-      next: (data) => setTodos([...data.items]),
-    });
+    // client.models.Todo.observeQuery().subscribe({
+    //   next: (data) => setTodos([...data.items]),
+    // });
   }, []);
 
   function createTodo() {
-    client.models.Todo.create({ content: window.prompt("Todo content") });
+    // client.models.Todo.create({ content: window.prompt("Todo content") });
   }
 
+
+
   return (
-    <main>
+    <>
+    <NavBar />
+    <SideNav />
+      <div className="app-shell">
+        <main>
       <h1>My todos</h1>
       <button onClick={createTodo}>+ new</button>
       <ul>
@@ -34,6 +42,8 @@ function App() {
         </a>
       </div>
     </main>
+    </div>
+    </>
   );
 }
 

src/components/NavBar/NavBar.tsx

@@ -0,0 +1,26 @@
+import { Link } from "react-router-dom";
+import { SafProductHeader, SafProductHeaderItem } from '@saffron/core-components/react';
+
+
+export default function NavBar() {
+  return (
+    <SafProductHeader>
+      <a slot="logo" href="/">
+        <img src="/logo.png" alt="SONCA Logo" className="sonca-logo" style={{ height: 32 }} />
+      Home
+      </a>
+      <SafProductHeaderItem slot="tasks">
+        <Link to="/projects-and-assessments">Projects & Assessments</Link>
+      </SafProductHeaderItem>
+      <SafProductHeaderItem slot="tasks">
+        <Link to="/users-and-organisations">Users & Organisations</Link>
+      </SafProductHeaderItem>
+      <SafProductHeaderItem slot="tasks">
+        <Link to="/framework-management">Framework Management</Link>
+      </SafProductHeaderItem>
+      <SafProductHeaderItem slot="global">
+        <Link to="/notifications">Notifications</Link>
+      </SafProductHeaderItem>
+    </SafProductHeader>
+  );
+}

src/components/SideNav/SideNav.tsx

@@ -0,0 +1,29 @@
+import React, { Suspense } from "react";
+
+const SideNavContent = React.lazy(() => import("./SideNavContent"));
+
+// Create a loading component
+const LoadingNav = () => (
+  <div style={{
+    width: '220px',
+    height: '100vh',
+    backgroundColor: '#f5f5f5',
+    borderRight: '1px solid #e0e0e0'
+  }}>
+    <div style={{
+      padding: '16px',
+      color: '#666',
+      fontSize: '14px'
+    }}>
+      Loading navigation...
+    </div>
+  </div>
+);
+
+export default function SideNav() {
+  return (
+    <Suspense fallback={<LoadingNav />}>
+      <SideNavContent />
+    </Suspense>
+  );
+}