36 lines
1.1 KiB
JavaScript
36 lines
1.1 KiB
JavaScript
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>
|
|
);
|
|
}
|