wired in environement in context and added left side menu

Author: timea-solid

README.md

@@ -86,3 +86,5 @@ We have added comments in the code to make it explicit which parts are 100% writ
 
 ### Prompt usage hitory:
 * Model Claude Opus 4.6: Initially solid-panes is loaded into a HTML shell form mashlib that looks like ... Also, an iFrame is rendered inside the <div class="TabulatorOutline" id="DummyUUID"> for “isolated pane rendering”. Analize the solid-panes code for what it uses from this HTML and suggest a new HTML structure which is mobile and accessibility friendly. Lets go ahead and make chnages in this code as suggested to accommodate the new databwroser HTML.
+
+* Raptor mini: take a look how I wired the environement from mashlib into solid-panes. It is not quite right, can you suggest fixes?

package-lock.json

@@ -70,7 +70,7 @@
     "pane-registry": "^3.0.1",
     "profile-pane": "^3.1.2",
     "solid-namespace": "^0.5.4",
-    "solid-ui": "^3.0.4",
+    "solid-ui": "^3.0.5",
     "source-pane": "^3.0.1"
   },
   "overrides": {
@@ -105,10 +105,10 @@
     "node-polyfill-webpack-plugin": "^4.1.0",
     "path-browserify": "^1.0.1",
     "raw-loader": "^4.0.2",
-    "rdflib": "^2.3.5",
+    "rdflib": "^2.3.6",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "solid-logic": "^4.0.3",
+    "solid-logic": "^4.0.6",
     "style-loader": "^4.0.0",
     "terser-webpack-plugin": "^5.3.16",
     "ts-jest": "^29.4.6",

package.json

@@ -21,24 +21,36 @@ import {
   paneForIcon,
   paneForPredicate,
   register,
-  byName
+  byName,
+  RenderEnvironment
 } from 'pane-registry'
 import { createContext } from './outline/context'
-import initMainPage from './mainPage'
+import { initMainPage, updateMenuLayout } from './mainPage'
 
-function getOutliner (dom) {
+function getOutliner (dom, environment?: RenderEnvironment): OutlineManager {
   if (!dom.outlineManager) {
     const context = createContext(
       dom,
       { list, paneForIcon, paneForPredicate, register, byName },
       store as LiveStore,
-      solidLogicSingleton
+      solidLogicSingleton,
+      environment
     )
     dom.outlineManager = new OutlineManager(context)
+  } else if (environment) {
+    dom.outlineManager.context = dom.outlineManager.context || {}
+    dom.outlineManager.context.environment = environment
   }
   return dom.outlineManager
 }
 
+function updateEnvironment(outliner: OutlineManager, environment: RenderEnvironment) {
+  if (!outliner) return
+  outliner.context = outliner.context || {}
+  outliner.context.environment = environment
+}
+
+
 if (typeof window !== 'undefined') {
   getOutliner(window.document)
 }
@@ -53,9 +65,11 @@ registerPanes((cjsOrEsModule: any) => register(cjsOrEsModule.default || cjsOrEsM
 export {
   OutlineManager,
   getOutliner,
+  updateEnvironment,
   UI,
   versionInfo,
   initMainPage,
+  updateMenuLayout,
   list, // from paneRegistry
   paneForIcon, // from paneRegistry
   paneForPredicate, // from paneRegistry

src/index.ts

@@ -1,5 +1,7 @@
 import { authSession, authn } from 'solid-logic'
 import { icons, initHeader } from 'solid-ui'
+import { OutlineManager } from '../outline/manager'
+import { LiveStore } from 'rdflib'
 /**
  * menu icons
 */
@@ -21,7 +23,7 @@ type UserMenuItem = { label: string; onclick: () => void }
 const USER_GUIDE_MENU_URL = 'https://solidos.github.io/userguide/'
 const REPORT_A_PROBLEM_MENU_URL = 'https://github.com/solidos/solidos/issues'
 
-export async function createHeader (store, outliner) {
+export async function createHeader (store: LiveStore, outliner: OutlineManager) {
   initHeader(store, await setUserMenu(outliner), setHeaderOptions())
 }
 
@@ -35,7 +37,7 @@ function setHeaderOptions () {
   return headerOptions
 }
 
-async function setUserMenu (outliner: any) {
+async function setUserMenu (outliner: OutlineManager) {
   // @ts-ignore: showProfile is used conditionally
   const showProfile = {
     label: SHOW_YOUR_PROFILE_MENU_ITEM,
@@ -58,12 +60,12 @@ async function setUserMenu (outliner: any) {
 }
 
 // Does not work to jump to user profile,
-function openUserProfile (outliner: any) {
+function openUserProfile (outliner: OutlineManager) {
   outliner.GotoSubject(authn.currentUser(), true, undefined, true, undefined)
   location.reload()
 }
 
-async function getMenuItems (outliner: any) {
+async function getMenuItems (outliner: OutlineManager) {
   const items = await outliner.getDashboardItems()
   return items.map((element) => {
     return {
@@ -73,7 +75,7 @@ async function getMenuItems (outliner: any) {
   })
 }
 
-async function openDashboardPane (outliner: any, pane: string): Promise<void> {
+async function openDashboardPane (outliner: OutlineManager, pane: string): Promise<void> {
   outliner.showDashboard({
     pane
   })

src/mainPage/header.ts

@@ -7,14 +7,37 @@ import { LiveStore, NamedNode } from 'rdflib'
 import { getOutliner } from '../index'
 import { createHeader } from './header'
 import { createFooter } from './footer'
+import { initResponsiveMenu } from './menu'
 
-export default async function initMainPage (store: LiveStore, uri?: string | NamedNode | null) {
-  const outliner = getOutliner(document)
+export { updateMenuLayout } from './menu'
+
+function ensureMainContent() {
+  let main = document.getElementById('MainContent') as HTMLElement | null
+  if (!main) {
+    main = document.createElement('main')
+    main.id = 'MainContent'
+    main.setAttribute('role', 'main')
+    main.setAttribute('tabindex', '-1')
+    main.setAttribute('aria-live', 'polite')
+    document.body.appendChild(main)
+  }
+  return main
+}
+
+export async function initMainPage (
+  store: LiveStore,
+  uri?: string | NamedNode | null,
+  environment?: any
+) {
+  ensureMainContent()
+  const outliner = getOutliner(document, environment)
   uri = uri || window.location.href
   let subject = uri
   if (typeof uri === 'string') subject = store.sym(uri)
   outliner.GotoSubject(subject, true, undefined, true, undefined)
+
   const header = await createHeader(store, outliner)
+  const menu = initResponsiveMenu(outliner)
   const footer = createFooter(store)
-  return Promise.all([header, footer])
+  return Promise.all([header, menu, footer])
 }

src/mainPage/index.ts

@@ -0,0 +1,59 @@
+.menu-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.menu-item {
+  display: block;
+  border: 1px solid var(--color-border);
+  border-radius: 0.35rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--color-background);
+  color: var(--color-text);
+  text-decoration: none;
+}
+
+.menu-item:hover,
+.menu-item:focus {
+  background: var(--color-highlight-bg);
+}
+
+.menu-toggle {
+  position: fixed;
+  top: 1.75rem;
+  left: 2.75rem;
+  z-index: 300;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 1px solid var(--color-border);
+  background: var(--color-background);
+  color: var(--color-text);
+  border-radius: 0.4rem;
+  margin: 0;
+}
+
+.menu-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.35);
+  z-index: 100;
+}
+
+.app-nav.mobile-hidden {
+  transform: translateX(-100%);
+  transition: transform 0.25s ease-in-out;
+  position: fixed;
+  left: 0;
+  top: 4.5rem;
+  bottom: 0;
+  z-index: 110;
+  width: min(80vw, 320px);
+}
+
+.app-nav.mobile-visible {
+  transform: translateX(0);
+}