Merge pull request #719 from SolidOS/newLayout

New layout according to new design

Author: timea-solid

README.md

@@ -91,34 +91,4 @@ We have added comments in the code to make it explicit which parts are 100% writ
 
 * Raptor mini: Update the code to use the new solid-ui-header component. Keep in mind the log in and sign up are wired in specific ways.
 
-* Auto: change the menu to fill up the menu items like in the code: async function getMenuItems (outliner: any) {
-const items = await outliner.getDashboardItems()
-return items.map((element) => {
-return {
-label: element.label,
-onclick: () => openDashboardPane(outliner, element.tabName || element.paneName)
-}
-})
-}
-
-* Auto: each #sym:MenuItem has an icon which i want displayed on the left side of each menu item when rendered
-
-* Auto: don't add each menu item in a button looking border. Simply list them.
-Upon hover apply background color e6dcff and selected or active to be background color: cbb9ff
-
-* Raptor mini: the menu dissapears when on mobile. That is great.
-I want the menu to have a tiny button on the bottom margin left with an arrow to the left or right for expanding the menu or for making it small. This is only for web. When we make it small it folds and only displays the icons of teh menu items, when it is expanded it should also add the labels to the menu items.
-
-* Raptor mini: i want to imporve the left side menu on mobile. When the menu is visible it should be higher, the top part should be on top of the header, folding out and in with the rest of the menu. It should have an x close button and it should say menu. The locor of that top line of the header should be the color of the header 332746
-
-* Raptor mini: the menu, on desktop, has a button to fold in or out. I want the same behavior to occur also when i simply click the folded in menu: it should expend. Not just when i click the dedicated button
-
-* Raprot mini: instead of this code (index.ts of footer), I want to make use of a new footer web component with the readme: # solid-ui-footer component
-
-* Raptor mini: The footer created should actually be part of the left side menu only. Should be displayed inside it and should collaps and expand as the menu.
-
-* Raptor mini: the footer should completely dissapear when menu folded up.
-
-* Raptor mini: Please always keep the footer at the bottom of the menu
-
 * GPT-5.4 Model: Add a compatibility shim in the form pane for mixed `ui:Group` plus field typing.

package-lock.json

@@ -68,11 +68,11 @@
     "meeting-pane": "3.0.3-1",
     "mime-types": "^3.0.2",
     "pane-registry": "3.1.2-2",
-    "profile-pane": "3.2.3-2",
+    "profile-pane": "3.2.3-3",
     "rdflib": "2.4.0",
     "solid-logic": "4.0.8-1",
     "solid-namespace": "^0.5.4",
-    "solid-ui": "3.1.3-12",
+    "solid-ui": "3.1.3-13",
     "source-pane": "3.1.1-4"
   },
   "overrides": {

package.json

@@ -1,11 +1,13 @@
 import { authn } from 'solid-logic'
 import { html, render } from 'lit-html'
 import type { AccountMenuItem } from 'solid-ui/components/account'
-
-import { setActiveMenuPane } from './menu'
 import type { OutlineManager } from '../outline/manager'
 
 import '~icons/lucide/user'
+import '~icons/lucide/users'
+import '~icons/lucide/folder-open'
+import '~icons/lucide/layout-dashboard'
+import '~icons/lucide/settings-2'
 import '../components/header'
 
 export async function createHeader (outliner: OutlineManager) {
@@ -25,10 +27,49 @@ export async function createHeader (outliner: OutlineManager) {
 
         if (currentUser) {
           outliner.showDashboard(currentUser, { pane: 'profile' })
-          setActiveMenuPane('profile')
         }
       }
-    }
+    },
+    {
+      label: html`<icon-lucide-users slot="left-icon"></icon-lucide-users> Friends`,
+      onSelected () {
+        const currentUser = authn.currentUser()
+
+        if (currentUser) {
+          outliner.showDashboard(currentUser, { pane: 'social' })
+        }
+      }
+    },
+    {
+      label: html`<icon-lucide-folder-open slot="left-icon"></icon-lucide-folder-open> Storage`,
+      onSelected () {
+        const currentUser = authn.currentUser()
+
+        if (currentUser) {
+          outliner.showDashboard(currentUser, { pane: 'folder' })
+        }
+      }
+    },
+    {
+      label: html`<icon-lucide-layout-dashboard slot="left-icon"></icon-lucide-layout-dashboard> Dashboard`,
+      onSelected () {
+        const currentUser = authn.currentUser()
+
+        if (currentUser) {
+          outliner.showDashboard(currentUser, { pane: 'home' })
+        }
+      }
+    },
+    {
+      label: html`<icon-lucide-settings-2 slot="left-icon"></icon-lucide-settings-2> Preferences`,
+      onSelected () {
+        const currentUser = authn.currentUser()
+
+        if (currentUser) {
+          outliner.showDashboard(currentUser, { pane: 'basicPreferences' })
+        }
+      }
+    },
   ]
 
   render(

src/mainPage/footer.ts

@@ -1,14 +1,12 @@
 /*   Main Page
  **
- **  This code is called in mashlib and renders the header and footer of the Databrowser.
+ **  This code is called in mashlib and renders the header and left side menu of the Databrowser.
  */
 
 import { LiveStore, NamedNode } from 'rdflib'
 import type { RenderEnvironment } from 'pane-registry'
 import { getOutliner, OutlineManager } from '../index'
 import { createHeader } from './header'
-import { createFooter } from './footer'
-import { createLeftSideMenu, refreshMenu } from './menu'
 
 // 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.
@@ -19,8 +17,6 @@ function renderEnvSignature (env?: RenderEnvironment): string {
   return [env.layout, env.theme, env.inputMode].join('|')
 }
 
-export { refreshMenu as updateMenuLayout } from './menu'
-
 function ensureMainContent () {
   let main = document.getElementById('MainContent') as HTMLElement | null
   if (!main) {
@@ -47,9 +43,7 @@ export async function initMainPage (
   outliner.GotoSubject(subject, true, undefined, true, undefined)
 
   const header = await createHeader(outliner)
-  const menu = createLeftSideMenu(subject, outliner)
-  const footer = menu.then(() => createFooter(store))
-  return Promise.all([header, menu, footer])
+  return Promise.all([header])
 }
 
 export async function refreshUI (outliner: OutlineManager) {
@@ -69,6 +63,4 @@ export async function refreshUI (outliner: OutlineManager) {
     outliner.GotoSubject(store.sym(subjectUri), true, pane, true, undefined)
     ;(outliner as any)[LAST_RENDER_ENV_KEY] = currentSignature
   }
-
-  refreshMenu(outliner.context.environment?.layout === 'mobile' ? 'mobile' : 'desktop')
 }