From c452e8ed77622033ffe095175b91b105467546c9 Mon Sep 17 00:00:00 2001
From: caturbgs <savemeplease11>
Date: Thu, 9 Dec 2021 11:31:02 +0700
Subject: [PATCH] feat: init responsive mode

---
 src/component/BreadcumbComponent.js |   4 +-
 src/index.css                       |   7 +
 src/pages/About/About.js            |   2 +-
 src/pages/App/App.js                |   1 +
 src/pages/App/DesktopLayout.js      | 416 +++++++++++++++++++++++-----
 src/pages/Home/Home.js              |   2 +-
 src/pages/Membership/Membership.js  |   3 +-
 src/store/ui.js                     |  18 +-
 8 files changed, 379 insertions(+), 74 deletions(-)

diff --git a/src/component/BreadcumbComponent.js b/src/component/BreadcumbComponent.js
index e5690ad..75b4494 100644
--- a/src/component/BreadcumbComponent.js
+++ b/src/component/BreadcumbComponent.js
@@ -6,8 +6,8 @@ export const BreadcumbComponent = (props) => {
     return (
         <div>
             <Breadcrumb style={{marginBottom: 10}}>
-                {props.data.map((e) => (
-                    <Breadcrumb.Item>
+                {props.data.map((e, index) => (
+                    <Breadcrumb.Item key={index}>
                         <Link to={e.route}>
                             <span>{e.name}</span>
                         </Link>
diff --git a/src/index.css b/src/index.css
index b244ccd..e81bbc3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -46,3 +46,10 @@ code {
     background: #2D9CDB !important;
 }
 
+.transparent {
+    background: transparent
+}
+
+.ppob-container {
+    padding: 14px 14px 14px 14px;
+}
diff --git a/src/pages/About/About.js b/src/pages/About/About.js
index 72330e5..242c868 100644
--- a/src/pages/About/About.js
+++ b/src/pages/About/About.js
@@ -2,7 +2,7 @@ import React from "react";
 import {PageHeader} from "antd";
 
 export const About = () => {
-    return <div>
+    return <div className={["ppob-container"].join(" ")}>
         <PageHeader
             style={{
                 padding: 0,
diff --git a/src/pages/App/App.js b/src/pages/App/App.js
index 7d66acd..2225853 100644
--- a/src/pages/App/App.js
+++ b/src/pages/App/App.js
@@ -2,6 +2,7 @@ import React, {useEffect} from "react";
 import {DesktopLayout} from "./DesktopLayout";
 import {useMediaQuery} from 'react-responsive';
 import {useStore} from "../../utils/useStore";
+import {useHistory} from "react-router-dom";
 
 
 export const App = () => {
diff --git a/src/pages/App/DesktopLayout.js b/src/pages/App/DesktopLayout.js
index a0156f5..d41f7d7 100644
--- a/src/pages/App/DesktopLayout.js
+++ b/src/pages/App/DesktopLayout.js
@@ -1,14 +1,17 @@
 import React, {useState} from "react";
-import {Button, Layout, Menu, Popover, Typography,} from "antd";
+import {Button, Drawer, Layout, Menu, Popover, Typography,} from "antd";
 import {MenuList} from "./MenuList";
 import {Link} from "react-router-dom";
-import {PlusSquareOutlined, UserOutlined,} from "@ant-design/icons";
+import {CalendarOutlined, HomeOutlined, MenuOutlined, UserOutlined,} from "@ant-design/icons";
 import {AppRoute} from "../../routes/app";
+import {useStore} from "../../utils/useStore";
+import {observer} from "mobx-react-lite";
 
 const {Text, Paragraph} = Typography;
 const {Header, Content, Sider} = Layout;
 
-export const DesktopLayout = () => {
+export const DesktopLayout = observer(() => {
+    const store = useStore();
     const [clicked, setClicked] = useState(false);
 
     return (
@@ -23,7 +26,7 @@ export const DesktopLayout = () => {
                 height: "100vh",
             }}
         >
-            <Sider
+            {store.ui.mediaQuery.isDesktop && <Sider
                 className={"transparent"}
                 width={240}
                 style={{
@@ -70,82 +73,369 @@ export const DesktopLayout = () => {
                 </div>
                 <MenuList closeLeftDrawer={() => {
                 }}/>
-            </Sider>
+            </Sider>}
+
+            {store.ui.mediaQuery.isMobile && (
+                <Drawer
+                    title="Navigation"
+                    placement={"left"}
+                    closable={false}
+                    width={"50%"}
+                    onClose={() => {
+                        store.ui.toggleLeftDrawerIsShown()
+                        console.log("clicked");
+                    }}
+                    visible={store.ui.leftDrawerIsShown}
+                    key={"dashboard-drawer"}
+                    bodyStyle={{
+                        padding: 0,
+                        paddingTop: 20,
+                    }}
+                >
+                    <div
+                        style={{
+                            marginLeft: 0,
+                            paddingLeft: 0,
+                        }}
+                    >
+                        <Menu>
+                            <Menu.Item key="home">
+                                <Link to={'/app/home'}>
+                                    <HomeOutlined/>
+                                    <span>Home</span>
+                                </Link>
+                            </Menu.Item>
+                            <Menu.Item key="membership">
+                                <Link to={'/app/membership'}>
+                                    <HomeOutlined/>
+                                    <span>Membership</span>
+                                </Link>
+                            </Menu.Item>
+                            <Menu.Item key="product">
+                                <Link to={'/app/product'}>
+                                    <HomeOutlined/>
+                                    <span>Product</span>
+                                </Link>
+                            </Menu.Item>
+                            <Menu.Item key="transaction">
+                                <Link to={'/app/transaction'}>
+                                    <HomeOutlined/>
+                                    <span>Transaction</span>
+                                </Link>
+                            </Menu.Item>
+                            <Menu.Item key="about">
+                                <Link to={'/app/about'}>
+                                    <CalendarOutlined/>
+                                    <span>About</span>
+                                </Link>
+                            </Menu.Item>
+                            <Menu.Divider style={{background: "transparent", paddingTop: 15}}/>
+                        </Menu>
+                    </div>
+                </Drawer>
+            )}
 
             <Layout
+                className={"transparent"}
                 style={{
-                    paddingLeft: 240,
+                    position: "relative",
+                    display: "block",
+                    paddingLeft: store.ui.mediaQuery.isDesktop ? 200 : 0,
+                    height: "100vh",
                 }}
             >
                 <Header
                     theme={"light"}
+                    className={store.ui.mediaQuery.isMobile ? "shadow" : null}
                     style={{
-                        height: 54,
-                        paddingLeft: 0,
-                        paddingRight: 0,
-                        backgroundColor: "transparent",
-                        maxWidth: 1000,
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "flex-end",
+                        height: store.ui.mediaQuery.isDesktop ? 54 : 35,
+                        // width: 'calc(100vw - 200px)',
+                        width: "100%",
+                        position: store.ui.mediaQuery.isDesktop ? "fixed" : "fixed",
+                        zIndex: 99,
+                        paddingLeft: store.ui.mediaQuery.isDesktop ? 14 : 0,
+                        paddingRight: store.ui.mediaQuery.isDesktop ? 14 : 0,
+                        backgroundColor: store.ui.mediaQuery.isMobile
+                            ? "#fff"
+                            : "transparent",
+                        maxWidth: store.ui.mediaQuery.isDesktop ? 1920 : 768,
+                        // minWidth: store.ui.mediaQuery.isDesktop ? 768 : 0,
+                        top: store.ui.mediaQuery.isMobile ? 0 : 12,
+                        /**/
                     }}
                 >
-                    <Button style={{right: "94%"}}>
-                        <PlusSquareOutlined/>
-                    </Button>
-                    <Popover
-                        autoAdjustOverflow={true}
-                        placement="bottomRight"
-                        content={
-                            <Menu
-                                type={"line"}
-                                inlineIndent={0}
-                                theme="light"
+                    {store.ui.mediaQuery.isMobile && (
+                        <div
+                            className={store.ui.mediaQuery.isMobile ? "shadow" : null}
+                            style={{
+                                top: 0,
+                                left: 0,
+                                paddingTop: 8,
+                                position: "relative",
+                                display: "flex",
+                                justifyContent: "space-between",
+                                alignItems: "stretch",
+                                flexDirection: "column",
+                                // boxShadow: '0 7px 14px 0 rgba(60, 66, 87, 0.05), 0 3px 6px 0 rgba(0, 0, 0, 0.05)'
+                            }}
+                        >
+                            <div
                                 style={{
-                                    backgroundColor: "transparent",
-                                    borderRightWidth: 0,
-                                    right: "30%",
+                                    display: "flex",
+                                    flexDirection: "row",
+                                    justifyContent: "space-between",
+                                    alignItems: "center",
+                                    height: "100%",
+                                    width: "100%",
+                                    paddingLeft: store.ui.mediaQuery.isMobile ? 10 : 20,
+                                    paddingRight: store.ui.mediaQuery.isMobile ? 0 : 20,
+                                    paddingBottom: 4,
+                                    marginTop: -5,
                                 }}
-                                mode="inline"
                             >
-                                <Menu.Item>
-                                    <Link to="/app/profile">
-                                        <span>Profile</span>
-                                    </Link>
-                                </Menu.Item>
-                                <Menu.Item
+                                <Button
+                                    type="link"
+                                    icon={
+                                        <MenuOutlined
+                                            style={{
+                                                fontSize: "12px",
+                                                color: "#5b5b5b",
+                                                marginLeft: -10,
+                                            }}
+                                        />
+                                    }
                                     onClick={() => {
-                                        // store.authentication.logout();
-                                        // return history.push("/login");
+                                        store.ui.toggleLeftDrawerIsShown();
+                                        console.log("apa")
+                                    }}
+                                />
+                                <div
+                                    style={{
+                                        display: "flex",
+                                        flexDirection: "column",
+                                        justifyContent: "flex-start",
+                                        alignItems: "stretch",
+                                        padding: 0,
+                                        margin: 0,
+                                        paddingTop: 5,
                                     }}
                                 >
-                                    <span>Sign out</span>
-                                </Menu.Item>
-                            </Menu>
-                        }
-                        title={
-                            <Text>
-                                info@bangun-kreatif.com
-                                {/*{store.userData.email}{" "}*/}
-                                <Paragraph style={{fontWeight: 400}} type={"secondary-dark"}>
-                                    Administrator
-                                    {/*{store.userData.role}*/}
-                                </Paragraph>
-                            </Text>
-                        }
-                        trigger="click"
-                        visible={clicked}
-                        onVisibleChange={() => setClicked(!clicked)}
-                    >
-                        <Button
-                            size={"default"}
-                            style={{}}
-                            icon={<UserOutlined style={{fontSize: "13px"}}/>}
-                        />
-                    </Popover>
+                                    {/*<img*/}
+                                    {/*    className={[classes.logoFull]}*/}
+                                    {/*    style={{*/}
+                                    {/*        maxHeight: 18,*/}
+                                    {/*        maxWidth: 75,*/}
+                                    {/*    }}*/}
+                                    {/*    src={parkirLogoFull}*/}
+                                    {/*/>*/}
+                                    {/*<Paragraph*/}
+                                    {/*    style={{*/}
+                                    {/*        margin: "-5px 0px 0px 2px",*/}
+                                    {/*        padding: 0,*/}
+                                    {/*        lineHeight: "18px",*/}
+                                    {/*        fontSize: 8,*/}
+                                    {/*        fontWeight: 800,*/}
+                                    {/*        color: "#8c8c8c",*/}
+                                    {/*        textAlign: "center",*/}
+                                    {/*    }}*/}
+                                    {/*>*/}
+                                    {/*    {store.authentication.userData.role || "Apps"}*/}
+                                    {/*</Paragraph>*/}
+                                </div>
+                                <Popover
+                                    className={store.ui.mediaQuery.isDesktop ? "shadow" : null}
+                                    autoAdjustOverflow={true}
+                                    placement="bottomRight"
+                                    content={
+                                        <Menu
+                                            type={"line"}
+                                            inlineIndent={0}
+                                            theme="light"
+                                            style={{
+                                                backgroundColor: "transparent",
+                                                borderRightWidth: 0,
+                                            }}
+                                            mode="inline"
+                                        >
+                                            <Menu.Item>
+                                                <Link to="/app/profile">
+                                                    <span>Profile</span>
+                                                </Link>
+                                            </Menu.Item>
+                                            <Menu.Item
+                                                onClick={() => {
+                                                    // store.authentication.logout();
+                                                    // return history.push("/login");
+                                                }}
+                                            >
+                                                <span>Sign out</span>
+                                            </Menu.Item>
+                                        </Menu>
+                                    }
+                                    title={
+                                        <Text>
+                                            {/*{store.user.data.email}{" "}*/}
+                                            {/*<Paragraph style={{fontWeight: 400}} type={"secondary-dark"}>*/}
+                                            {/*    {store.authentication.userData.full_name}*/}
+                                            {/*</Paragraph>*/}
+                                        </Text>
+                                    }
+                                    trigger="click"
+                                    visible={clicked}
+                                    onVisibleChange={() => setClicked(!clicked)}
+                                >
+                                    <Button
+                                        size={"default"}
+                                        type={store.ui.mediaQuery.isDesktop ? "" : "link"}
+                                        style={{marginRight: store.ui.mediaQuery.isDesktop ? 20 : 10}}
+                                        icon={
+                                            store.ui.mediaQuery.isDesktop ? (
+                                                <UserOutlined style={{fontSize: "13px"}}/>
+                                            ) : (
+                                                <UserOutlined style={{fontSize: "13px", color: "#5b5b5b"}}/>
+                                            )
+                                        }
+                                    />
+                                </Popover>
+                            </div>
+                            <div
+                                style={{
+                                    borderTopWidth: 0.5,
+                                    borderTopColor: "#e3e3e3",
+                                    borderTopStyle: "solid",
+                                }}
+                            />
+                            {/*<BreadcumbComponent data={}/>*/}
+                        </div>
+                    )}
+
+                    {store.ui.mediaQuery.isDesktop && (
+                        <div
+                            className={["transparent"].join(" ")}
+                            style={{
+                                display: "flex",
+                                flexDirection: "row",
+                                justifyContent: "space-between",
+                                alignItems: "center",
+                                height: "100%",
+                                maxWidth: 1024,
+                                minWidth: 768,
+                                width: "calc(100vw - 220px)",
+                            }}
+                        >
+                            <div
+                                style={{
+                                    flexDirection: "row",
+                                    display: "flex",
+                                    justifyContent: "flex-start",
+                                    alignItems: "center",
+                                    width: "100%",
+                                }}
+                            >
+                            </div>
+                            <Popover
+                                className={store.ui.mediaQuery.isDesktop ? "shadow" : null}
+                                autoAdjustOverflow={true}
+                                placement="bottomRight"
+                                content={
+                                    <Menu
+                                        type={"line"}
+                                        inlineIndent={0}
+                                        theme="light"
+                                        style={{
+                                            backgroundColor: "transparent",
+                                            borderRightWidth: 0,
+                                        }}
+                                        mode="inline"
+                                    >
+                                        <Menu.Item>
+                                            <Link to="/app/profile">
+                                                <span>Profile</span>
+                                            </Link>
+                                        </Menu.Item>
+                                        <Menu.Item
+                                            onClick={() => {
+                                                // store.authentication.logout();
+                                                // return history.push("/login");
+                                            }}
+                                        >
+                                            <span>Sign out</span>
+                                        </Menu.Item>
+                                    </Menu>
+                                }
+                                title={
+                                    <Text>
+                                        {store.user.data.email}{" "}
+                                        <Paragraph style={{fontWeight: 400}} type={"secondary-dark"}>
+                                            {/*{store.authentication.userData.full_name}*/}
+                                        </Paragraph>
+                                    </Text>
+                                }
+                                trigger="click"
+                                visible={clicked}
+                                onVisibleChange={() => setClicked(!clicked)}
+                            >
+                                <Button
+                                    size={"default"}
+                                    type={store.ui.mediaQuery.isDesktop ? "" : "link"}
+                                    style={{marginRight: store.ui.mediaQuery.isDesktop ? 20 : 10}}
+                                    icon={
+                                        store.ui.mediaQuery.isDesktop ? (
+                                            <UserOutlined style={{fontSize: "13px"}}/>
+                                        ) : (
+                                            <UserOutlined style={{fontSize: "13px", color: "#5b5b5b"}}/>
+                                        )
+                                    }
+                                />
+                            </Popover>
+
+                        </div>
+                    )}
                 </Header>
-                <AppRoute/>
+
+                <Layout
+                    className={["transparent"].join(" ")}
+                    tabIndex={"-1"}
+                    style={{
+                        zIndex: 0,
+                        display: "flex",
+                        // overflowX: store.ui.mediaQuery.isMobile ? 'auto' : "hidden",
+                        // paddingLeft: 8,
+                        // paddingRight: 8,
+                        //  width: 'calc(90vw - 220px)',
+                        height: "100%",
+                    }}
+                >
+                    <Content
+                        className={["transparent"].join(" ")}
+                        style={{
+                            // maxHeight: 'calc(100vh - 98px)',
+                            // paddingBottom: 48,
+                            padding: 0,
+                            margin: 0,
+                            position: "relative",
+                            marginTop: store.ui.mediaQuery.isDesktop ? 43 : 37,
+                            // overflow: 'auto',
+                            overflowX: store.ui.mediaQuery.isMobile ? "auto" : "hidden",
+                            // minWidth: 768,
+                            maxWidth: 1024,
+                            // minWidth: 768,
+                            width: store.ui.mediaQuery.isDesktop
+                                ? "calc(100vw - 210px)"
+                                : "calc(100vw)",
+                            zIndex: 22,
+                            // height: `calc(100vh - ${store.ui.mediaQuery.isDesktop ? 78 : 71}px)`,
+                            height: `calc(100vh - ${
+                                store.ui.mediaQuery.isDesktop ? 78 : 71
+                            }px)`,
+                            // paddingLeft: 8,
+                            // paddingRight: 8
+                        }}
+                    >
+                        <AppRoute/>
+                    </Content>
+                </Layout>
             </Layout>
         </Layout>
     );
-};
+});
diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js
index 198586b..5a96c09 100644
--- a/src/pages/Home/Home.js
+++ b/src/pages/Home/Home.js
@@ -4,7 +4,7 @@ import {store} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
 
 export const Home = observer(() => {
-    return <div>
+    return <div className={["ppob-container"].join(" ")}>
         <PageHeader
             style={{
                 padding: 0,
diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js
index 2fedaea..7add9f3 100644
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@@ -134,7 +134,7 @@ export const Membership = observer(() => {
   }
 
   return (
-      <div>
+      <div className={["ppob-container"].join(" ")}>
         <BreadcumbComponent data={routeData}/>
         <Card>
           {store.ui.mediaQuery.isDesktop && (
@@ -201,7 +201,6 @@ export const Membership = observer(() => {
                     dataSource={store.membership.data}
                     style={{padding: 0}}
                     renderItem={(item) => {
-                      console.log(item, "item ->");
                       return (
                           <div>
                             <List.Item
diff --git a/src/store/ui.js b/src/store/ui.js
index 0aaf93a..5bf55b1 100644
--- a/src/store/ui.js
+++ b/src/store/ui.js
@@ -1,12 +1,11 @@
 import {makeAutoObservable} from "mobx";
 
 export class UI {
-    mediaQuery = {
-        isMobile: false,
-        isDesktop: true
-    };
-
+    mediaQuery = {};
     testValue = "Test Mobx";
+    leftDrawerIsShown = false;
+    params = {};
+    baseUrl = '/app';
 
     constructor(ctx) {
         this.ctx = ctx;
@@ -22,4 +21,13 @@ export class UI {
             this.mediaQuery = data;
         }
     };
+
+    toggleLeftDrawerIsShown() {
+        console.log('what')
+        this.leftDrawerIsShown = !this.leftDrawerIsShown;
+    }
+
+    setParams(data) {
+        this.params = data;
+    };
 }