improved footer according to new design

Author: timea-solid

README.md

@@ -111,4 +111,12 @@ I want the menu to have a tiny button on the bottom margin left with an arrow to
 
 * 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
+* 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 shoudl 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

src/mainPage/footer.ts

@@ -1,20 +1,39 @@
-import { LiveStore } from 'rdflib'
-import { initFooter } from 'solid-ui'
+import 'solid-ui/components/footer'
+import type { LiveStore } from 'rdflib'
 
-/**
- * links in the footer
-*/
-const SOLID_PROJECT_URL = 'https://solidproject.org'
-const SOLID_PROJECT_NAME = 'solidproject.org'
+declare module 'solid-ui/components/footer'
+import 'solid-ui/components/footer'
 
-export function createFooter (store: LiveStore) {
-  // @ts-ignore
-  initFooter(store, setFooterOptions())
+type FooterElement = HTMLElement & {
+  store?: LiveStore | null
+  position?: 'static' | 'absolute' | 'relative' | 'fixed' | 'sticky'
+  top?: string
+  right?: string
+  bottom?: string
+  left?: string
 }
 
-function setFooterOptions () {
-  return {
-    solidProjectUrl: SOLID_PROJECT_URL,
-    solidProjectName: SOLID_PROJECT_NAME
+export function createFooter (store: LiveStore) {
+  let footer = document.querySelector('solid-ui-footer') as FooterElement | null
+
+  if (!footer) {
+    footer = document.createElement('solid-ui-footer') as FooterElement
+    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
 }

src/mainPage/index.ts

@@ -38,7 +38,7 @@ export async function initMainPage (
 
   const header = await createHeader(store, outliner)
   const menu = createLeftSideMenu(subject, outliner)
-  const footer = createFooter(store)
+  const footer = menu.then(() => createFooter(store))
   return Promise.all([header, menu, footer])
 }
 

src/mainPage/menu.css

@@ -3,6 +3,24 @@
   flex-direction: column;
   gap: 0.5rem;
   padding-top: 0.75rem;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.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 {
@@ -68,10 +86,16 @@
 }
 
 .app-nav {
-  position: relative;
-  display: flex;
-  flex-direction: column;
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: min(18rem, 320px);
+  display: grid;
+  grid-template-rows: 1fr auto;
+  overflow: hidden;
   background: var(--color-background);
+  z-index: 10;
 }
 
 .app-nav.mobile-hidden,
@@ -169,7 +193,7 @@
 .menu-collapse {
   position: fixed;
   left: 3rem;
-  bottom: 5rem;
+  bottom: 8rem;
   z-index: 320;
   width: 1.25rem;
   height: 1.25rem;