solid-panes 4.2.6 → 4.4.1-test.0

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.svg?raw"));
+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 = (0, _iconHelper.createUiIcon)(_signUp.default, 'SignUp Icon', '#ffffff');
+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,18 @@
 import { LiveStore, NamedNode } from 'rdflib';
-export default function initMainPage(store: LiveStore, uri?: string | NamedNode | null): Promise<[void, void]>;
+import type { RenderEnvironment } from 'pane-registry';
+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?: RenderEnvironment): 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,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAe,cAAc,EAAE,MAAM,UAAU,CAAA;AActD,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,iBAAiB;;;;;;;;;;IAahC;AAED,wBAAsB,SAAS,CAAE,QAAQ,EAAE,cAAc,iBAoBxD"}

package/dist/mainPage/index.js

@@ -3,22 +3,76 @@
 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);
+// Symbol used to stash the last render-relevant env snapshot on the outliner
+// so refreshUI can skip a full GotoSubject re-render when nothing changed.
+const LAST_RENDER_ENV_KEY = '__lastRenderEnvSignature';
+function renderEnvSignature(env) {
+  if (!env) return '';
+  return [env.layout, env.theme, env.inputMode].join('|');
+}
+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);
+  outliner[LAST_RENDER_ENV_KEY] = renderEnvSignature(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) {
+  const store = outliner?.context?.session?.store;
+  const paneRegistry = outliner?.context?.session?.paneRegistry;
+  const subjectUri = window.document.location.href;
+  const paneName = window.history.state?.paneName;
+  const pane = paneName ? paneRegistry?.byName?.(paneName) : undefined;
+
+  // Only re-run GotoSubject (full pane re-render) when render-relevant
+  // environment fields actually changed since the last render.
+  const currentSignature = renderEnvSignature(outliner?.context?.environment);
+  const previousSignature = outliner?.[LAST_RENDER_ENV_KEY] ?? '';
+  const envChanged = currentSignature !== previousSignature;
+  if (envChanged && store && typeof outliner?.GotoSubject === 'function') {
+    outliner.GotoSubject(store.sym(subjectUri), true, pane, true, undefined);
+    outliner[LAST_RENDER_ENV_KEY] = currentSignature;
+  }
+  await (0, _header.refreshHeader)(outliner);
+  (0, _menu.refreshMenu)(outliner.context.environment?.layout === 'mobile' ? 'mobile' : 'desktop');
 }

package/dist/mainPage/menu.css

@@ -0,0 +1,243 @@
+.menu-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.app-nav.mobile-hidden .menu-content,
+.app-nav.mobile-visible .menu-content {
+  padding-top: 0.75rem;
+}
+
+.menu-footer {
+  width: 100%;
+  padding: 1rem;
+  border-top: 1px solid var(--color-border, #d1d1d1);
+  font-size: 0.875rem;
+  color: var(--color-text-muted, #555);
+  line-height: 1.4;
+  background: inherit;
+}
+
+.app-nav.collapsed .menu-footer {
+  display: none;
+  text-align: center;
+  padding: 0.75rem 0;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2xs, 0.625rem);
+  border: 0;
+  border-radius: var(--border-radius-sm, 0.2rem);
+  padding: 0.5rem var(--spacing-xs, 0.75rem);
+  background: transparent;
+  color: var(--color-text-heading, #000000);
+  text-decoration: none;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+}
+
+.menu-toggle-icon {
+  width: 30px;
+  height: 30px;
+}
+
+.menu-item-icon {
+  width: var(--icon-xxs, 1rem);
+  height: var(--icon-xxs, 1rem);
+  flex: 0 0 var(--icon-xxs, 1rem);
+  object-fit: contain;
+}
+
+.menu-item-label {
+  min-width: 0;
+}
+
+.menu-item:hover,
+.menu-item:focus {
+  background: var(--color-header-menu-item-hover, #e6dcff);
+}
+
+.menu-item-active,
+.menu-item-active:hover,
+.menu-item-active:focus {
+  background: var(--color-header-menu-item-selected, #cbb9ff);
+  color: var(--color-header-menu-item-text-selected, #7c4cff);
+}
+
+.menu-toggle {
+  position: fixed;
+  top: 0.5rem;
+  left: 1rem;
+  z-index: 300;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  min-width: var(--icon-md, 2.5rem);
+  height: var(--icon-md, 2.5rem);
+  padding: 0 0.625rem;
+  border: 1px solid var(--color-border);
+  background: var(--color-menu-bg, #ffffff);
+  color: var(--color-text);
+  border-radius: var(--border-radius-sm, 0.2rem);
+  margin: 0;
+}
+
+.menu-toggle-label {
+  font-size: 1.2rem;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 10rem;
+}
+
+.menu-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.35);
+  z-index: 100;
+}
+
+.app-nav {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: min(18rem, 320px);
+  display: grid;
+  grid-template-rows: 1fr auto;
+  overflow: hidden;
+  background: var(--color-menu-bg, #ffffff);
+  border-right: 1px solid var(--color-border);
+  z-index: 10;
+}
+
+.app-nav.mobile-hidden,
+.app-nav.mobile-visible {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: min(80vw, 320px);
+  height: 100vh;
+  min-height: 100vh;
+  transform: translateX(-100%);
+  transition: transform 0.25s ease-in-out;
+  z-index: 999;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-menu-bg, #ffffff);
+  border-right: none;
+  box-shadow: none;
+  overflow: hidden;
+  padding-top: 3.75rem;
+}
+
+.app-nav.mobile-hidden .menu-content,
+.app-nav.mobile-visible .menu-content {
+  flex: 1;
+  min-height: 0;
+}
+
+.app-nav.mobile-visible {
+  transform: translateX(0);
+  visibility: visible;
+  background: var(--color-menu-bg, #ffffff);
+}
+
+.menu-header {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  align-items: center;
+  justify-content: flex-start;
+  background-color: #42345a !important;
+  color: #ffffff;
+  font-weight: 600;
+  min-height: 3.75rem;
+  height: 3.75rem;
+  box-sizing: border-box;
+  width: 100%;
+  z-index: 1000;
+  border-right: none;
+  box-shadow: none;
+}
+
+.app-nav.mobile-hidden .menu-header,
+.app-nav.mobile-visible .menu-header {
+  display: flex;
+}
+
+.menu-header-title {
+  font-size: 1.25rem;
+  color: #ffffff;
+}
+
+.menu-close {
+  border: none;
+  background: transparent;
+  color: #ffffff;
+  font-size: 1.25rem;
+  cursor: pointer;
+  padding-left: 1.25rem;
+  line-height: 1;
+}
+
+.menu-close:hover,
+.menu-close:focus {
+  opacity: 0.85;
+}
+
+.app-nav.collapsed {
+  width: 4.5rem;
+  min-width: 4.5rem;
+}
+
+.app-nav.collapsed .menu-content {
+  gap: 0.25rem;
+  align-items: center;
+}
+
+.app-nav.collapsed .menu-item {
+  justify-content: center;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.app-nav.collapsed .menu-item-label {
+  display: none;
+}
+
+.menu-collapse {
+  position: fixed;
+  left: 3rem;
+  bottom: 8rem;
+  z-index: 320;
+  width: 1.25rem;
+  height: 1.25rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
+  color: var(--color-text);
+  font-size: 1.3rem;
+  line-height: 1;
+  cursor: pointer;
+  box-shadow: 0 1px 4px rgba(124,77,255,0.12);
+}
+
+@media (max-width: 768px) {
+  .menu-collapse {
+    display: none;
+  }
+}

package/dist/mainPage/menu.d.ts

@@ -0,0 +1,7 @@
+import './menu.css';
+import { OutlineManager } from '../outline/manager';
+import { NamedNode } from 'rdflib';
+export declare const setActiveMenuPane: (paneName?: string) => void;
+export declare const refreshMenu: (layout: "mobile" | "desktop") => void;
+export declare const createLeftSideMenu: (subject: NamedNode, outliner: OutlineManager) => Promise<void>;
+//# sourceMappingURL=menu.d.ts.map