building left side menu with getDashboardItems

Author: timea-solid

README.md

@@ -99,4 +99,9 @@ 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

src/mainPage/menu.css

@@ -5,21 +5,40 @@
 }
 
 .menu-item {
-  display: block;
-  border: 1px solid var(--color-border);
-  border-radius: 0.35rem;
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  border: 0;
+  border-radius: 0;
   padding: 0.5rem 0.75rem;
-  background: var(--color-background);
+  background: transparent;
   color: var(--color-text);
   text-decoration: none;
   width: 100%;
   text-align: left;
   cursor: pointer;
 }
 
+.menu-item-icon {
+  width: 1rem;
+  height: 1rem;
+  flex: 0 0 1rem;
+  object-fit: contain;
+}
+
+.menu-item-label {
+  min-width: 0;
+}
+
 .menu-item:hover,
 .menu-item:focus {
-  background: var(--color-highlight-bg);
+  background: #e6dcff;
+}
+
+.menu-item-active,
+.menu-item-active:hover,
+.menu-item-active:focus {
+  background: #cbb9ff;
 }
 
 .menu-toggle {

src/mainPage/menu.ts

@@ -1,9 +1,11 @@
 import './menu.css'
 import { OutlineManager } from '../outline/manager'
-import { authSession, authn } from 'solid-logic'
+import { authSession } from 'solid-logic'
 
 type MenuItem = {
   id?: string
+  icon?: string
+  paneName?: string
   label: string
   onclick: () => void | Promise<void>
 }
@@ -57,6 +59,8 @@ const getMenuItems = async (outliner: any): Promise<MenuItem[]> => {
     const items = await outliner.getDashboardItems()
     return items.map((element) => {
       return {
+        icon: element.icon,
+        paneName: element.tabName || element.paneName,
         label: element.label,
         onclick: () => openDashboardPane(outliner, element.tabName || element.paneName)
       }
@@ -71,7 +75,23 @@ const createMenuButton = (item: MenuItem) => {
   const button = document.createElement('button')
   button.className = 'menu-item'
   button.type = 'button'
-  button.textContent = item.label
+  if (item.paneName) {
+    button.dataset.paneName = item.paneName
+  }
+
+  if (item.icon) {
+    const icon = document.createElement('img')
+    icon.className = 'menu-item-icon'
+    icon.src = item.icon
+    icon.alt = ''
+    icon.setAttribute('aria-hidden', 'true')
+    button.appendChild(icon)
+  }
+
+  const label = document.createElement('span')
+  label.className = 'menu-item-label'
+  label.textContent = item.label
+  button.appendChild(label)
 
   if (item.id) {
     button.id = item.id
@@ -84,21 +104,38 @@ const createMenuButton = (item: MenuItem) => {
   return button
 }
 
-const renderMenuItems = async (outliner: OutlineManager, container: HTMLElement) => {
-  const me = authn.currentUser()
-  const menuItems = me ? await getMenuItems(outliner) : []
-
-  if (me) {
-    menuItems.push({
-      id: 'MenuLogoutItem',
-      label: 'Logout',
-      onclick: async () => {
-        await authSession.logout()
-      }
-    })
+const setActiveMenuItem = (container: HTMLElement, paneName?: string) => {
+  const menuItems = Array.from(container.querySelectorAll<HTMLButtonElement>('.menu-item'))
+  let activeItem: HTMLButtonElement | undefined
+
+  menuItems.forEach((item) => {
+    const isActive = Boolean(paneName) && item.dataset.paneName === paneName
+    item.classList.toggle('menu-item-active', isActive)
+    if (isActive) {
+      item.setAttribute('aria-current', 'page')
+      activeItem = item
+    } else {
+      item.removeAttribute('aria-current')
+    }
+  })
+
+  if (!activeItem && menuItems[0]) {
+    menuItems[0].classList.add('menu-item-active')
+    menuItems[0].setAttribute('aria-current', 'page')
+    container.dataset.activePaneName = menuItems[0].dataset.paneName || ''
+    return
+  }
+
+  if (paneName) {
+    container.dataset.activePaneName = paneName
   }
+}
+
+const renderMenuItems = async (outliner: OutlineManager, container: HTMLElement) => {
+  const menuItems = await getMenuItems(outliner)
 
   container.replaceChildren(...menuItems.map(createMenuButton))
+  setActiveMenuItem(container, container.dataset.activePaneName)
 }
 
 export const refreshMenu = (layout: 'mobile' | 'desktop') => {
@@ -178,6 +215,9 @@ export const createLeftSideMenu = async (outliner: OutlineManager) => {
 
     navMenuContent.addEventListener('click', (event) => {
       const item = (event.target as HTMLElement).closest('.menu-item')
+      if (item instanceof HTMLButtonElement) {
+        setActiveMenuItem(navMenuContent, item.dataset.paneName)
+      }
       const isMobile = outliner.context?.environment?.layout === 'mobile'
       if (item && isMobile) {
         closeMobileMenu()
@@ -187,7 +227,6 @@ export const createLeftSideMenu = async (outliner: OutlineManager) => {
 }
 
 async function openDashboardPane (outliner: any, pane: string): Promise<void> {
-  console.log('-----Opening profile pane')
   outliner.showDashboard({
     pane
   })

src/outline/manager.js

@@ -353,32 +353,47 @@ export default function (context) {
 
   async function getDashboardItems () {
     const me = authn.currentUser()
-    if (!me) return []
-    const div = dom.createElement('div')
-    const [pods] = await Promise.all([getPods()])
-    return [
+    const panes = [
       {
         paneName: 'home',
-        label: 'Your stuff',
+        label: 'Dashboard',
         icon: UI.icons.iconBase + 'noun_547570.svg'
       },
-      {
-        paneName: 'basicPreferences',
-        label: 'Preferences',
-        icon: UI.icons.iconBase + 'noun_Sliders_341315_00000.svg'
-      },
       {
         paneName: 'profile',
-        label: 'Your Profile',
+        label: 'Profile',
         icon: UI.icons.iconBase + 'noun_15059.svg'
       },
+      {
+        paneName: 'socialPane',
+        label: 'Friends',
+        icon: UI.icons.originalIconBase + 'foaf/foafTiny.gif'
+      }
+    ]
+
+    if (!me) {
+      return panes
+    }
+
+    const [pods] = await Promise.all([getPods()])
+    panes.push(
+      /* not in use since redesign of profile-pane
       {
         paneName: 'editProfile',
         label: 'Edit your Profile',
         icon: UI.icons.iconBase + 'noun_492246.svg'
+      },
+      */
+      {
+        paneName: 'basicPreferences',
+        label: 'Preferences',
+        icon: UI.icons.iconBase + 'noun_Sliders_341315_00000.svg'
       }
-    ]
-      .concat(pods)
+    )
+
+    panes.push(...pods)
+
+    return panes
 
     async function getPods () {
       async function addPodStorage (pod) { // namedNode
@@ -444,25 +459,6 @@ export default function (context) {
         }
       })
     }
-
-    async function getAddressBooks () {
-      try {
-        const context = await UI.login.findAppInstances(
-          { me, div, dom },
-          ns.vcard('AddressBook')
-        )
-        return (context.instances || []).map((book, index) => ({
-          paneName: 'contact',
-          tabName: `contact-${index}`,
-          label: 'Contacts',
-          subject: book,
-          icon: UI.icons.iconBase + 'noun_15695.svg'
-        }))
-      } catch (err) {
-        console.error('oops in globalAppTabs AddressBook')
-      }
-      return []
-    }
   }
   this.getDashboardItems = getDashboardItems