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 (
- {props.data.map((e) => ( - + {props.data.map((e, index) => ( + {e.name} 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
+ return
{ 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", }} > - {
{ }}/> - + } + + {store.ui.mediaQuery.isMobile && ( + { + store.ui.toggleLeftDrawerIsShown() + console.log("clicked"); + }} + visible={store.ui.leftDrawerIsShown} + key={"dashboard-drawer"} + bodyStyle={{ + padding: 0, + paddingTop: 20, + }} + > +
+ + + + + Home + + + + + + Membership + + + + + + Product + + + + + + Transaction + + + + + + About + + + + +
+ + )}
- - +
- - - Profile - - - + } onClick={() => { - // store.authentication.logout(); - // return history.push("/login"); + store.ui.toggleLeftDrawerIsShown(); + console.log("apa") + }} + /> +
- Sign out - - - } - title={ - - info@bangun-kreatif.com - {/*{store.userData.email}{" "}*/} - - Administrator - {/*{store.userData.role}*/} - - - } - trigger="click" - visible={clicked} - onVisibleChange={() => setClicked(!clicked)} - > -
+ + + + Profile + + + { + // store.authentication.logout(); + // return history.push("/login"); + }} + > + Sign out + + + } + title={ + + {/*{store.user.data.email}{" "}*/} + {/**/} + {/* {store.authentication.userData.full_name}*/} + {/**/} + + } + trigger="click" + visible={clicked} + onVisibleChange={() => setClicked(!clicked)} + > +
+
+ {/**/} +
+ )} + + {store.ui.mediaQuery.isDesktop && ( +
+
+
+ + + + Profile + + + { + // store.authentication.logout(); + // return history.push("/login"); + }} + > + Sign out + + + } + title={ + + {store.user.data.email}{" "} + + {/*{store.authentication.userData.full_name}*/} + + + } + trigger="click" + visible={clicked} + onVisibleChange={() => setClicked(!clicked)} + > +
+ )}
- + + + + + + ); -}; +}); 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
+ return
{ } return ( -
+
{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 (
{ - const callback = (key) => { - console.log(key); - }; - const routeData = [ - { - route: "/app/home", - name: "Home", - }, - { - route: "/app/product", - name: Product, - }, - ]; - return ( -
- - - - - - - - - - - - - - - - - Game Voucher - - - Product - - - Prduct - - - Prdct - - - -
- ); + const callback = (key) => { + console.log(key); + }; + const routeData = [ + { + route: "/app/home", + name: "Home", + }, + { + route: "/app/product", + name: Product, + }, + ]; + return ( +
+ + + + + + + + + + + + + + + + + Game Voucher + + + Product + + + Prduct + + + Prdct + + + +
+ ); }; 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; + }; }