✨ [bento][amp-sidebar] Toolbar design for AMP side for amp-sidebar#34368
✨ [bento][amp-sidebar] Toolbar design for AMP side for amp-sidebar#34368krdwan merged 5 commits intoampproject:mainfrom
Conversation
| static deferredMount(unusedElement) { | ||
| return false; | ||
| } | ||
|
|
There was a problem hiding this comment.
Allows component render before Sidebar is opened. This is needed because Toolbar Target should be rendered on page load, regardless of Sidebar's open / close status.
caroqliu
left a comment
There was a problem hiding this comment.
Great start with this. One important point - the Preact layer should really not be concerned with what environment it is run in. I know you mentioned wanting to keep the props namespace clean, but it may be helpful to provide configurable props that the AMP layer can use as opposed to fit the Preact layer to the AMP layer specifically. And the use of the context does not simplify the mental load of adding more props IMO.
Made a recommendation in line but feel free to ping if you want to discuss further.
Sidebar Tracker: #31366
Toolbar design amp side for amp-sidebar
How does this work?
ToolbarHelperwith a wrapper preact component to be used each inampandpreactmodes.amporpreactmode. When inampmode, there is also an actualToolbardomElementwhich is passed via context.preactmode, the behavior is relatively unchanged.ampmode, thebase-elementupdates thechildrenprop to be passed into preact by appendingampversion of theToolbar(the amp wrapper from 1 above). This amp version of the toolbar takes in the actualdomElementand clones it into the toolbar target. It also does not render anything in place. So thechildrenprop will includeslotand a number of theseampversionToolbars.What is Toolbar?
Toolbar takes a
navelement from within theSidebarand clones itself as a child onto an arbitrary element somewhere on the page. (Which I'll refer to asToolbar Target). An additionalstyleelement is also appended to theToolbar Targetto conditionally display the element when amediaQueryis true.Design doc: Doc
Preact Side toolbar: #34158
to do: tests