solid-panes 4.2.6 → 4.4.0

package/dist/index.js

@@ -20,7 +20,7 @@ exports.getOutliner = getOutliner;
 Object.defineProperty(exports, "initMainPage", {
   enumerable: true,
   get: function () {
-    return _mainPage.default;
+    return _mainPage.initMainPage;
   }
 });
 Object.defineProperty(exports, "list", {
@@ -41,12 +41,19 @@ Object.defineProperty(exports, "paneForPredicate", {
     return _paneRegistry.paneForPredicate;
   }
 });
+Object.defineProperty(exports, "refreshUI", {
+  enumerable: true,
+  get: function () {
+    return _mainPage.refreshUI;
+  }
+});
 Object.defineProperty(exports, "register", {
   enumerable: true,
   get: function () {
     return _paneRegistry.register;
   }
 });
+exports.updateEnvironment = updateEnvironment;
 Object.defineProperty(exports, "versionInfo", {
   enumerable: true,
   get: function () {
@@ -61,7 +68,7 @@ var _manager = _interopRequireDefault(require("./outline/manager.js"));
 var _registerPanes = require("./registerPanes.js");
 var _paneRegistry = require("pane-registry");
 var _context = require("./outline/context");
-var _mainPage = _interopRequireDefault(require("./mainPage"));
+var _mainPage = require("./mainPage");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /*                            SOLID PANES
@@ -76,7 +83,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  ** If it is relevant, then it returns a suitable tooltip for a control which selects the pane
  */
 
-function getOutliner(dom) {
+function getOutliner(dom, environment) {
   if (!dom.outlineManager) {
     const context = (0, _context.createContext)(dom, {
       list: _paneRegistry.list,
@@ -84,11 +91,19 @@ function getOutliner(dom) {
       paneForPredicate: _paneRegistry.paneForPredicate,
       register: _paneRegistry.register,
       byName: _paneRegistry.byName
-    }, _solidLogic.store, _solidLogic.solidLogicSingleton);
+    }, _solidLogic.store, _solidLogic.solidLogicSingleton, environment);
     dom.outlineManager = new _manager.default(context);
+  } else if (environment) {
+    dom.outlineManager.context = dom.outlineManager.context || {};
+    dom.outlineManager.context.environment = environment;
   }
   return dom.outlineManager;
 }
+function updateEnvironment(outliner, environment) {
+  if (!outliner) return;
+  outliner.context = outliner.context || {};
+  outliner.context.environment = environment;
+}
 if (typeof window !== 'undefined') {
   getOutliner(window.document);
 }

package/dist/internal/internalPane.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internalPane.d.ts","sourceRoot":"","sources":["../../src/internal/internalPane.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAE9C,QAAA,MAAM,IAAI,EAAE,cAwOX,CAAA;AAiBD,eAAe,IAAI,CAAA"}
+{"version":3,"file":"internalPane.d.ts","sourceRoot":"","sources":["../../src/internal/internalPane.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAE9C,QAAA,MAAM,IAAI,EAAE,cAyOX,CAAA;AAiBD,eAAe,IAAI,CAAA"}

package/dist/internal/internalPane.js

@@ -21,6 +21,7 @@ const pane = {
   },
   render: function (subject, context) {
     const dom = context.dom;
+    // @ts-ignore
     const store = context.session.store;
     const canonizedSubject = store.canon(subject);
     const types = store.findTypeURIs(canonizedSubject);

package/dist/mainPage/footer.d.ts

@@ -1,3 +1,15 @@
-import { LiveStore } from 'rdflib';
-export declare function createFooter(store: LiveStore): void;
+import 'solid-ui/components/footer';
+import type { LiveStore } from 'rdflib';
+declare module 'solid-ui/components/footer';
+import 'solid-ui/components/footer';
+type FooterElement = HTMLElement & {
+    store?: LiveStore | null;
+    position?: 'static' | 'absolute' | 'relative' | 'fixed' | 'sticky';
+    top?: string;
+    right?: string;
+    bottom?: string;
+    left?: string;
+};
+export declare function createFooter(store: LiveStore): FooterElement;
+export {};
 //# sourceMappingURL=footer.d.ts.map

package/dist/mainPage/footer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../src/mainPage/footer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AASlC,wBAAgB,YAAY,CAAE,KAAK,EAAE,SAAS,QAE7C"}
+{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../src/mainPage/footer.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAEvC,OAAO,QAAQ,4BAA4B,CAAA;AAC3C,OAAO,4BAA4B,CAAA;AAEnC,KAAK,aAAa,GAAG,WAAW,GAAG;IACjC,KAAK,CAAC,EAAE,SAAS,GAAG,IAAI,CAAA;IACxB,QAAQ,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAA;IAClE,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,wBAAgB,YAAY,CAAE,KAAK,EAAE,SAAS,iBAuB7C"}

package/dist/mainPage/footer.js

@@ -4,18 +4,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createFooter = createFooter;
-var _solidUi = require("solid-ui");
-/**
- * links in the footer
-*/
-const SOLID_PROJECT_URL = 'https://solidproject.org';
-const SOLID_PROJECT_NAME = 'solidproject.org';
+require("solid-ui/components/footer");
 function createFooter(store) {
-  (0, _solidUi.initFooter)(store, setFooterOptions());
-}
-function setFooterOptions() {
-  return {
-    solidProjectUrl: SOLID_PROJECT_URL,
-    solidProjectName: SOLID_PROJECT_NAME
-  };
+  let footer = document.querySelector('solid-ui-footer');
+  if (!footer) {
+    footer = document.createElement('solid-ui-footer');
+    footer.className = 'menu-footer';
+    footer.style.position = 'static';
+    footer.style.width = '100%';
+    const navMenu = document.getElementById('NavMenu');
+    if (navMenu) {
+      navMenu.appendChild(footer);
+    } else {
+      document.body.appendChild(footer);
+    }
+  } else {
+    const navMenu = document.getElementById('NavMenu');
+    if (navMenu && footer.parentElement !== navMenu) {
+      navMenu.appendChild(footer);
+    }
+  }
+  footer.store = store;
+  return footer;
 }

package/dist/mainPage/header.d.ts

@@ -1,2 +1,17 @@
-export declare function createHeader(store: any, outliner: any): Promise<void>;
+import 'solid-ui/components/header';
+import { Header } from 'solid-ui/components/header';
+import { OutlineManager } from '../outline/manager';
+import { LiveStore } from 'rdflib';
+export declare const HELP_MENU_LIST: {
+    label: string;
+    url: string;
+    target: string;
+}[];
+type ManagedHeader = Header & {
+    __solidPanesListenersAttached?: boolean;
+    __solidPanesOutliner?: OutlineManager;
+};
+export declare function createHeader(store: LiveStore, outliner: OutlineManager): Promise<ManagedHeader>;
+export declare function refreshHeader(outliner: OutlineManager, headerElement?: Header): Promise<Header | null>;
+export {};
 //# sourceMappingURL=header.d.ts.map

package/dist/mainPage/header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../src/mainPage/header.ts"],"names":[],"mappings":"AAuBA,wBAAsB,YAAY,CAAE,KAAK,KAAA,EAAE,QAAQ,KAAA,iBAElD"}
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../src/mainPage/header.ts"],"names":[],"mappings":"AAEA,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAA;AAEnD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AA4BlC,eAAO,MAAM,cAAc;;;;GAG1B,CAAA;AAID,KAAK,aAAa,GAAG,MAAM,GAAG;IAC5B,6BAA6B,CAAC,EAAE,OAAO,CAAA;IACvC,oBAAoB,CAAC,EAAE,cAAc,CAAA;CACtC,CAAA;AAcD,wBAAsB,YAAY,CAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,cAAc,0BA6B7E;AAoDD,wBAAsB,aAAa,CAAE,QAAQ,EAAE,cAAc,EAAE,aAAa,CAAC,EAAE,MAAM,0BAyBpF"}

package/dist/mainPage/header.js

@@ -3,83 +3,201 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.HELP_MENU_LIST = void 0;
 exports.createHeader = createHeader;
+exports.refreshHeader = refreshHeader;
 var _solidLogic = require("solid-logic");
 var _solidUi = require("solid-ui");
+require("solid-ui/components/header");
+var _help = _interopRequireDefault(require("../icons/help.svg?raw"));
+var _person = _interopRequireDefault(require("../icons/person.svg?raw"));
+var _signOut = _interopRequireDefault(require("../icons/signOut.svg?raw"));
+var _personInCircle = _interopRequireDefault(require("../icons/personInCircle.svg?raw"));
+var _downArrow = _interopRequireDefault(require("../icons/downArrow.svg?raw"));
+var _signup = _interopRequireDefault(require("../icons/signup.png"));
+var _iconHelper = require("../icons/iconHelper");
+var _menu = require("./menu");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * menu icons
 */
-const HELP_MENU_ICON = _solidUi.icons.iconBase + 'noun_help.svg';
+const HELP_MENU_ICON = (0, _iconHelper.createUiIcon)(_help.default, 'Help Icon', '#ffffff');
+const LOGIN_ICON = (0, _iconHelper.createUiIcon)(_person.default, 'LogIn Icon', '#ffffff');
+const SIGNUP_ICON = _signup.default;
+const LOGOUT_ICON = (0, _iconHelper.createUiIcon)(_signOut.default, 'LogOut Icon', '#000000');
+const DEFAULT_AVATAR_ICON = (0, _iconHelper.createUiIcon)(_personInCircle.default, 'Default Avatar Icon', '#6A7282');
+const DOWN_ARROW_ICON = (0, _iconHelper.createUiIcon)(_downArrow.default, 'Down Arrow Icon', '#ffffff');
 const SOLID_ICON_URL = 'https://solidproject.org/assets/img/solid-emblem.svg';
-
 /**
  * menu elements
 */
-const USER_GUIDE_MENU_ITEM = 'User guide';
-const REPORT_A_PROBLEM_MENU_ITEM = 'Report a problem';
-const SHOW_YOUR_PROFILE_MENU_ITEM = 'Show your profile';
-const LOG_OUT_MENU_ITEM = 'Log out';
-/**
- * URLS
- */
-const USER_GUIDE_MENU_URL = 'https://solidos.github.io/userguide/';
-const REPORT_A_PROBLEM_MENU_URL = 'https://github.com/solidos/solidos/issues';
+const SIGN_IN_MENU_ITEM = 'Log In';
+const SIGN_OUT_MENU_ITEM = 'Log Out';
+const SIGN_UP_MENU_ITEM = 'Sign Up';
+const SIGN_UP__MENU_LINK = 'https://solidproject.org/get_a_pod';
+
+// data structure extracted for solid-ui-header binding
+const HELP_MENU_LIST = exports.HELP_MENU_LIST = [{
+  label: 'User guide',
+  url: 'https://solidos.github.io/userguide/',
+  target: '_blank'
+}, {
+  label: 'Report a problem',
+  url: 'https://github.com/solidos/solidos/issues',
+  target: '_blank'
+}];
+const HEADER_MOBILE_STYLE_ID = 'solid-ui-header-mobile-style';
+function ensureMobileHeaderStyles() {
+  if (document.getElementById(HEADER_MOBILE_STYLE_ID)) return;
+  const style = document.createElement('style');
+  style.id = HEADER_MOBILE_STYLE_ID;
+  style.textContent = `
+    solid-ui-header[layout="mobile"]::part(logo) {
+      display: none !important;
+    }
+  `;
+  document.head.appendChild(style);
+}
 async function createHeader(store, outliner) {
-  (0, _solidUi.initHeader)(store, await setUserMenu(outliner), setHeaderOptions());
+  ensureMobileHeaderStyles();
+  const header = document.querySelector('solid-ui-header') || document.createElement('solid-ui-header');
+  const isNewHeader = !header.isConnected;
+  if (!header.id) {
+    header.id = 'mainSolidUiHeader';
+  }
+  header.__solidPanesOutliner = outliner;
+
+  // ensure it is in DOM (before MainContent for consistency)
+  const main = document.getElementById('MainContent');
+  if (!header.isConnected) {
+    if (main && main.parentNode) {
+      main.parentNode.insertBefore(header, main);
+    } else {
+      document.body.prepend(header);
+    }
+  }
+  await refreshHeader(outliner, header);
+  if (isNewHeader) {
+    header.__solidPanesListenersAttached = false;
+  }
+  attachHeaderListeners(header);
+  return header;
 }
-function setHeaderOptions() {
-  const helpMenuList = [{
-    label: USER_GUIDE_MENU_ITEM,
-    url: USER_GUIDE_MENU_URL,
-    target: '_blank'
-  }, {
-    label: REPORT_A_PROBLEM_MENU_ITEM,
-    url: REPORT_A_PROBLEM_MENU_URL,
-    target: '_blank'
-  }];
+function attachHeaderListeners(header) {
+  if (header.__solidPanesListenersAttached) return;
+  const refreshCurrentHeader = async () => {
+    const outliner = header.__solidPanesOutliner;
+    if (!outliner) return;
+    await refreshHeader(outliner, header);
+  };
+  _solidLogic.authSession.events.on('login', refreshCurrentHeader);
+  _solidLogic.authSession.events.on('logout', refreshCurrentHeader);
+  _solidLogic.authSession.events.on('sessionRestore', refreshCurrentHeader);
+  header.addEventListener('auth-action-select', async e => {
+    const outliner = header.__solidPanesOutliner;
+    if (!outliner) return;
+    const detail = e.detail;
+    if (detail?.role === 'login') {
+      await refreshCurrentHeader();
+      // Do not auto-open the profile pane after login.
+      // outliner.showDashboard({ pane: 'profile' })
+    }
+  });
+  header.addEventListener('signup-success', async () => {
+    // do nothing
+  });
+  header.addEventListener('account-menu-select', async e => {
+    const outliner = header.__solidPanesOutliner;
+    if (!outliner) return;
+    const detail = e.detail;
+    if (detail?.action === 'logout') {
+      await refreshCurrentHeader();
+      // Do not navigate to the profile after logout.
+    } else if (detail?.action === 'show-profile') {
+      // TODO see if this can be consolidated
+      const currentUser = _solidLogic.authn.currentUser();
+      if (currentUser) {
+        outliner.showDashboard(currentUser, {
+          pane: 'profile'
+        });
+        (0, _menu.setActiveMenuPane)('profile');
+      }
+    }
+  });
+  header.__solidPanesListenersAttached = true;
+}
+async function refreshHeader(outliner, headerElement) {
+  ensureMobileHeaderStyles();
+  const headerOptions = setHeaderOptions(outliner);
+  const header = headerElement || document.querySelector('solid-ui-header');
+  if (!header) return null;
+  header.theme = headerOptions.theme;
+  header.layout = headerOptions.layout;
+  header.brandLink = headerOptions.brandLink;
+  header.logo = headerOptions.layout === 'desktop' ? headerOptions.logo : '';
+  header.helpIcon = headerOptions.helpIcon;
+  header.helpMenuList = headerOptions.helpMenuList;
+  header.authState = headerOptions.authState;
+  header.loginAction = headerOptions.loginAction;
+  header.signUpAction = headerOptions.signUpAction;
+  header.accountMenu = await setUserMenu();
+  header.logoutLabel = headerOptions.logoutLabel;
+  header.accountIcon = headerOptions.accountIcon;
+  header.accountAvatar = headerOptions.accountAvatar;
+  header.accountAvatarFallback = headerOptions.accountAvatarFallback;
+  header.loginIcon = headerOptions.loginIcon;
+  header.signUpIcon = headerOptions.signUpIcon;
+  header.logoutIcon = headerOptions.logoutIcon;
+  return header;
+}
+function setHeaderOptions(outliner) {
+  const currentUser = _solidLogic.authn.currentUser();
+  const isAuthenticated = !!currentUser;
+  const authState = isAuthenticated ? 'logged-in' : 'logged-out';
+  const layout = outliner.context?.environment?.layout === 'mobile' ? 'mobile' : 'desktop';
+  const theme = outliner.context?.environment?.theme === 'dark' ? 'dark' : 'light';
   const headerOptions = {
     logo: SOLID_ICON_URL,
     helpIcon: HELP_MENU_ICON,
-    helpMenuList
+    helpMenuList: HELP_MENU_LIST,
+    layout,
+    theme,
+    brandLink: '/',
+    authState,
+    loginAction: {
+      label: SIGN_IN_MENU_ITEM
+    },
+    signUpAction: {
+      label: SIGN_UP_MENU_ITEM,
+      url: SIGN_UP__MENU_LINK
+    },
+    logoutLabel: SIGN_OUT_MENU_ITEM,
+    accountIcon: isAuthenticated ? DOWN_ARROW_ICON : '',
+    accountAvatar: isAuthenticated ? _solidUi.widgets.findImage(currentUser) : undefined,
+    accountAvatarFallback: DEFAULT_AVATAR_ICON,
+    loginIcon: LOGIN_ICON,
+    signUpIcon: SIGNUP_ICON,
+    logoutIcon: LOGOUT_ICON
   };
   return headerOptions;
 }
-async function setUserMenu(outliner) {
-  // @ts-ignore: showProfile is used conditionally
-  const showProfile = {
-    label: SHOW_YOUR_PROFILE_MENU_ITEM,
-    onclick: () => openUserProfile(outliner)
-  };
-  const logOut = {
-    label: LOG_OUT_MENU_ITEM,
-    onclick: () => {
-      _solidLogic.authSession.logout();
-    }
-  };
-
-  // the order of the menu is important here, show profile first and logout last
-  let userMenuList = []; // was [showProfile]
-  userMenuList = userMenuList.concat(await getMenuItems(outliner));
-  userMenuList.push(logOut);
-  return userMenuList;
-}
-
-// Does not work to jump to user profile,
-function openUserProfile(outliner) {
-  outliner.GotoSubject(_solidLogic.authn.currentUser(), true, undefined, true, undefined);
-  location.reload();
-}
-async function getMenuItems(outliner) {
-  const items = await outliner.getDashboardItems();
-  return items.map(element => {
-    return {
-      label: element.label,
-      onclick: () => openDashboardPane(outliner, element.tabName || element.paneName)
-    };
-  });
-}
-async function openDashboardPane(outliner, pane) {
-  outliner.showDashboard({
-    pane
-  });
+async function setUserMenu() {
+  const me = _solidLogic.authn.currentUser();
+  if (!me) {
+    return [];
+  }
+  try {
+    await _solidLogic.store.fetcher.load(me.doc());
+  } catch (err) {
+    console.error('Unable to load user profile', err);
+  }
+  const accountMenu = [{
+    label: _solidUi.utils.label(me),
+    avatar: _solidUi.widgets.findImage(me),
+    webid: me.value,
+    action: 'show-profile'
+  }
+  // TODO add all my available accounts
+  ];
+  return accountMenu;
 }

package/dist/mainPage/index.d.ts

@@ -1,3 +1,17 @@
 import { LiveStore, NamedNode } from 'rdflib';
-export default function initMainPage(store: LiveStore, uri?: string | NamedNode | null): Promise<[void, void]>;
+import { OutlineManager } from '../index';
+export { refreshMenu as updateMenuLayout } from './menu';
+export { refreshHeader } from './header';
+export declare function initMainPage(store: LiveStore, uri?: string | NamedNode | null, environment?: any): Promise<[import("solid-ui/components/header").Header & {
+    __solidPanesListenersAttached?: boolean;
+    __solidPanesOutliner?: OutlineManager;
+}, void, HTMLElement & {
+    store?: LiveStore | null;
+    position?: "static" | "absolute" | "relative" | "fixed" | "sticky";
+    top?: string;
+    right?: string;
+    bottom?: string;
+    left?: string;
+}]>;
+export declare function refreshUI(outliner: OutlineManager): Promise<void>;
 //# sourceMappingURL=index.d.ts.map

package/dist/mainPage/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/mainPage/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAK7C,wBAA8B,YAAY,CAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,yBAS5F"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/mainPage/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAe,cAAc,EAAE,MAAM,UAAU,CAAA;AAKtD,OAAO,EAAE,WAAW,IAAI,gBAAgB,EAAE,MAAM,QAAQ,CAAA;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAexC,wBAAsB,YAAY,CAChC,KAAK,EAAE,SAAS,EAChB,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,EAC/B,WAAW,CAAC,EAAE,GAAG;;;;;;;;;;IAYlB;AAED,wBAAsB,SAAS,CAAE,QAAQ,EAAE,cAAc,iBAGxD"}

package/dist/mainPage/index.js

@@ -3,22 +3,53 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = initMainPage;
+exports.initMainPage = initMainPage;
+Object.defineProperty(exports, "refreshHeader", {
+  enumerable: true,
+  get: function () {
+    return _header.refreshHeader;
+  }
+});
+exports.refreshUI = refreshUI;
+Object.defineProperty(exports, "updateMenuLayout", {
+  enumerable: true,
+  get: function () {
+    return _menu.refreshMenu;
+  }
+});
 var _index = require("../index");
 var _header = require("./header");
 var _footer = require("./footer");
+var _menu = require("./menu");
 /*   Main Page
  **
  **  This code is called in mashlib and renders the header and footer of the Databrowser.
  */
 
-async function initMainPage(store, uri) {
-  const outliner = (0, _index.getOutliner)(document);
+function ensureMainContent() {
+  let main = document.getElementById('MainContent');
+  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;
+}
+async function initMainPage(store, uri, environment) {
+  ensureMainContent();
+  const outliner = (0, _index.getOutliner)(document, environment);
   uri = uri || window.location.href;
-  let subject = uri;
-  if (typeof uri === 'string') subject = store.sym(uri);
+  const subject = typeof uri === 'string' ? store.sym(uri) : uri;
   outliner.GotoSubject(subject, true, undefined, true, undefined);
   const header = await (0, _header.createHeader)(store, outliner);
-  const footer = (0, _footer.createFooter)(store);
-  return Promise.all([header, footer]);
+  const menu = (0, _menu.createLeftSideMenu)(subject, outliner);
+  const footer = menu.then(() => (0, _footer.createFooter)(store));
+  return Promise.all([header, menu, footer]);
+}
+async function refreshUI(outliner) {
+  await (0, _header.refreshHeader)(outliner);
+  (0, _menu.refreshMenu)(outliner.context.environment?.layout === 'mobile' ? 'mobile' : 'desktop');
 }