Rearranged shop template page to better handle previews & template editor BOD-126

client/src/pages/shop-templates/shop-templates.container.js

@@ -1,5 +1,5 @@
-import { Col, Row } from "antd";
-import React, { useEffect } from "react";
+import { Button } from "antd";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -18,6 +18,7 @@ const mapDispatchToProps = (dispatch) => ({
 
 export function ShopTemplatesContainer({ setBreadcrumbs, bodyshop }) {
   const { t } = useTranslation();
+  const drawerVisibility = useState(false);
   useEffect(() => {
     document.title = t("titles.shop-templates");
     setBreadcrumbs([
@@ -31,16 +32,11 @@ export function ShopTemplatesContainer({ setBreadcrumbs, bodyshop }) {
 
   return (
     <RbacWrapper action="shop:templates">
-      <Row>
-        <Col span={4}>
-          <ShopTemplatesListContainer />
-        </Col>
-        <Col span={20}>
-          <div>
-            <ShopTemplateEditor />
-          </div>
-        </Col>
-      </Row>
+      <div>
+        <ShopTemplatesListContainer visibleState={drawerVisibility} />
+        <Button onClick={() => drawerVisibility[1](true)}>Show List</Button>
+        <ShopTemplateEditor />
+      </div>
     </RbacWrapper>
   );
 }