web2019/static/js/shop/Layout.jsx

42 lines
1.3 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);
// #!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 ? (
<div className="feedback-add-success">
added
</div>
) : null}
</div>
);
}