feat: initial commit
This commit is contained in:
caturbgs
24
src/pages/App/App.js
Normal file
24
src/pages/App/App.js
Normal file
@@ -0,0 +1,24 @@
|
||||
import React, {useEffect} from "react";
|
||||
import {DesktopLayout} from "./DesktopLayout";
|
||||
import {useMediaQuery} from 'react-responsive';
|
||||
import {useStore} from "../../utils/useStore";
|
||||
|
||||
|
||||
export const App = () => {
|
||||
// TODO: add mobile layout
|
||||
const store = useStore();
|
||||
const mediaQuery = {
|
||||
isDesktop: useMediaQuery({minWidth: 1024}),
|
||||
isTablet: useMediaQuery({minWidth: 768, maxWidth: 1023}),
|
||||
isMobile: useMediaQuery({maxWidth: 767}),
|
||||
isNotMobile: useMediaQuery({minWidth: 768}),
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
store.ui.setMediaQuery(mediaQuery);
|
||||
});
|
||||
// const isMobileDevice = useMediaQuery({
|
||||
// query: "(min-device-width: 480px)",
|
||||
// });
|
||||
return <DesktopLayout/>;
|
||||
};
|
||||
151
src/pages/App/DesktopLayout.js
Normal file
151
src/pages/App/DesktopLayout.js
Normal file
@@ -0,0 +1,151 @@
|
||||
import React, {useState} from "react";
|
||||
import {Button, Layout, Menu, Popover, Typography,} from "antd";
|
||||
import {MenuList} from "./MenuList";
|
||||
import {Link} from "react-router-dom";
|
||||
import {PlusSquareOutlined, UserOutlined,} from "@ant-design/icons";
|
||||
import {AppRoute} from "../../routes/app";
|
||||
|
||||
const {Text, Paragraph} = Typography;
|
||||
const {Header, Content, Sider} = Layout;
|
||||
|
||||
export const DesktopLayout = () => {
|
||||
const [clicked, setClicked] = useState(false);
|
||||
|
||||
return (
|
||||
<Layout
|
||||
theme={"light"}
|
||||
className={"transparent"}
|
||||
hasSider={true}
|
||||
style={{
|
||||
paddingLeft: 0,
|
||||
display: "flex",
|
||||
width: "100vw",
|
||||
height: "100vh",
|
||||
}}
|
||||
>
|
||||
<Sider
|
||||
className={"transparent"}
|
||||
width={240}
|
||||
style={{
|
||||
overflowX: "hidden",
|
||||
bottom: 0,
|
||||
justifyContent: "flex-start",
|
||||
paddingTop: 20,
|
||||
paddingLeft: 20,
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
paddingLeft: 20,
|
||||
marginBottom: 40,
|
||||
}}
|
||||
>
|
||||
<Paragraph
|
||||
style={{
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
fontSize: 20,
|
||||
marginLeft: 5,
|
||||
fontWeight: 600,
|
||||
color: "#828282",
|
||||
}}
|
||||
>
|
||||
PPOB
|
||||
</Paragraph>
|
||||
<Paragraph
|
||||
style={{
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
fontSize: 11,
|
||||
marginLeft: 5,
|
||||
fontWeight: 600,
|
||||
color: "#413d3e",
|
||||
}}
|
||||
>
|
||||
Admin
|
||||
</Paragraph>
|
||||
</div>
|
||||
<MenuList closeLeftDrawer={() => {
|
||||
}}/>
|
||||
</Sider>
|
||||
|
||||
<Layout
|
||||
style={{
|
||||
paddingLeft: 240,
|
||||
}}
|
||||
>
|
||||
<Header
|
||||
theme={"light"}
|
||||
style={{
|
||||
height: 54,
|
||||
paddingLeft: 0,
|
||||
paddingRight: 0,
|
||||
backgroundColor: "transparent",
|
||||
maxWidth: 1000,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-end",
|
||||
}}
|
||||
>
|
||||
<Button style={{right: "94%"}}>
|
||||
<PlusSquareOutlined/>
|
||||
</Button>
|
||||
<Popover
|
||||
autoAdjustOverflow={true}
|
||||
placement="bottomRight"
|
||||
content={
|
||||
<Menu
|
||||
type={"line"}
|
||||
inlineIndent={0}
|
||||
theme="light"
|
||||
style={{
|
||||
backgroundColor: "transparent",
|
||||
borderRightWidth: 0,
|
||||
right: "30%",
|
||||
}}
|
||||
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>
|
||||
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>
|
||||
</Header>
|
||||
<AppRoute/>
|
||||
</Layout>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
69
src/pages/App/MenuList.js
Normal file
69
src/pages/App/MenuList.js
Normal file
@@ -0,0 +1,69 @@
|
||||
import React, {useEffect, useState} from "react";
|
||||
import {Menu} from "antd";
|
||||
import {Link} from "react-router-dom";
|
||||
import {CalendarOutlined, HomeOutlined,} from "@ant-design/icons";
|
||||
import {observer} from "mobx-react-lite";
|
||||
import {useStore} from "../../utils/useStore";
|
||||
|
||||
const {SubMenu} = Menu;
|
||||
|
||||
export const MenuList = observer((props) => {
|
||||
const store = useStore();
|
||||
useEffect(() => {
|
||||
}, []);
|
||||
|
||||
const [setKeys, setSetKeys] = useState(["dashboard"]);
|
||||
|
||||
return (
|
||||
<Menu
|
||||
defaultOpenKeys={["sub4"]}
|
||||
theme="light"
|
||||
style={{
|
||||
backgroundColor: "transparent",
|
||||
borderRightWidth: 0,
|
||||
fontWeight: 400,
|
||||
paddingLeft: 0,
|
||||
}}
|
||||
onClick={({keyPath, item}) => {
|
||||
props.closeLeftDrawer();
|
||||
}}
|
||||
mode="inline"
|
||||
selectedKeys={setKeys}
|
||||
onSelect={({setKeys, item, selectedKeys}) => setSetKeys(selectedKeys)}
|
||||
overflowedIndicator={0}
|
||||
forceSubMenuRender={true}
|
||||
>
|
||||
<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="product">
|
||||
<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>
|
||||
);
|
||||
});
|
||||
Reference in New Issue
Block a user