Redesign Header and Footer for Spaces

[rosschapman]

Background

It's near universal for commercial websites to have static headers and footers for providing basic site navigation or quick access to information and other resources. As noted by @anaulin in #2250 (comment), Convene used to support a default header but this was removed because it wasn't considered visually useful when viewing Marketplace screens.

It makes sense that displaying the website's "chrome" (some combination of header and/or footer) is not appropriate for every screen. But on more static informational pages it can be necessary visual brand statement and for site navigation. For example, when visiting Moment Park pages that we have migrated into Convene, the typical header or footer site navigation (that us users of the web have become used to) feels obviously missing. See: https://convene.zinc.coop/spaces/moment-park/rooms/iphone-apps. Our only recourse as visitors is the single footer breadcrumb, which forces me to return to the home page before visiting another section of the website.

Scope Notes

Space admins should be able to manage sitewide headers and footers in the following ways:

• Enable and disable a sitewide Header
• Enable and disable a sitewide Footer
• Selectively disable the header or footer on a Section
• Manage what content goes in the header and footer (gizmos?)
• Pick the background color and text color of the header and footer

What is a Header or a Footer?

• Data:
  • name (string)
  • content ([Gizmo|ordered])
  • sitewide_enabled (boolean)
  • excluded_from ([Section])
    • Inversely we could add show_header and show_footer attributes to Section
• ❓ Is it a special kind of Section?
  • access attr could be utilized for enabled/disabled
  • Seems risky since they really serve different purposes. Header/Footer are more branding/navigation focused vs distinct content areas of a Space.

Possible things Space admins could put in a Header or Footer

• Section Navigation
• Breadcrumb menu
• Markdown
• HTML
• LinkList (to add, discussed in 🌫️🗜️✨ Gizmo: LinkList #2036)

Other

• The Convene branding footer should be visually distinct from the Space-enabled footer
  • Maybe a slightly darker orange?

[zspencer]

Convene used to support a default header but this was removed because it wasn't considered visually useful when viewing Marketplace screens.

It's more that the Header we had was an eye-sore; and the time invested to make it less of an eye-sore was less effective than removing it entirely 😅

[rosschapman]

First code spike up: #2338

[zspencer]

Another thing we may want to consider is Piikup's Brand Guide and the ongoing work Co11ectiva is doing with Piikup's design.