47 lines
1.5 KiB
JavaScript
47 lines
1.5 KiB
JavaScript
import React from 'react';
|
|
import {useShopStore} from "./shop_store";
|
|
|
|
// #!render_count
|
|
import {useRenderCount} from "@uidotdev/usehooks";
|
|
|
|
/**
|
|
* Component that provides a base layout (aside/main) for the page.
|
|
*/
|
|
|
|
|
|
export function Layout({aside, main}) {
|
|
// #!render_count
|
|
const renderCount = useRenderCount();
|
|
|
|
const mobileSideMenuShouldOpen = useShopStore(state => state.sideMenuIsOpen);
|
|
const onClickToggleMobileSideMenu = useShopStore(state => state.switchSideMenu);
|
|
const showCardAddedFeedback = useShopStore(state => state.showCardAddedFeedback);
|
|
const showNoDestination = useShopStore(state => state.showNoDestination);
|
|
|
|
// #!render_count
|
|
console.log("Layout renders: ", renderCount)
|
|
|
|
return (
|
|
<div className="layout">
|
|
|
|
<aside className={'aside ' + (mobileSideMenuShouldOpen ? 'menu-opened' : '')}>{aside}</aside>
|
|
|
|
{mobileSideMenuShouldOpen ? (
|
|
<section className="main" onClick={onClickToggleMobileSideMenu}>{main}</section>
|
|
) : (
|
|
<section className="main">{main}</section>
|
|
)}
|
|
|
|
{showCardAddedFeedback ? (
|
|
!showNoDestination ?
|
|
(<div className="feedback-add-success">
|
|
✓ added
|
|
</div>)
|
|
: (<div className="feedback-add-failure">
|
|
No cards added: all crates are closed
|
|
</div>)
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|