web2019/static/js/shop/Layout.jsx

36 lines
1.1 KiB
React
Raw Normal View History

import React from 'react';
import {useShopStore} from "./shop_store";
/**
* Component that provides a base layout (aside/main) for the page.
*/
export function Layout({aside, main}) {
const {mobileSideMenuShouldOpen, onClickToggleMobileSideMenu, showCardAddedFeedback} = useShopStore((state) => ({
mobileSideMenuShouldOpen: state.sideMenuIsOpen,
onClickToggleMobileSideMenu: state.switchSideMenu,
showCardAddedFeedback: state.showCardAddedFeedback,
isMobile: state.isMobile,
}));
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>
);
}