initial commit

components/Layout/DefaultLayout.js

@@ -0,0 +1,8 @@
+import React from "react";
+import DesktopLayout from "./DesktopLayout/DesktopLayout";
+
+const DefaultLayout = (props) => {
+    return <DesktopLayout {...props}/>
+}
+
+export default DefaultLayout;

components/Layout/DesktopLayout/DesktopLayout.js

@@ -0,0 +1,29 @@
+import React from "react";
+import ParticlesLayout from "../ParticlesLayout";
+import {Layout, Image} from "antd";
+
+const {Content} = Layout;
+
+const DesktopLayout = ({children, isGradient = false}) => {
+    console.log({isGradient})
+    return <ParticlesLayout>
+        <Layout
+            theme={"light"}
+            className={`relative max-w-2xl mx-auto ${isGradient ? 'bg-[#F5F5F5]' : 'bg-[#FFFFFF]'}`}
+            hasSider={true}>
+            <Content>
+                <div className={'min-h-screen'}>
+                    <div className={'z-50'}>{children}</div>
+                    {isGradient && (
+                        <div className={'absolute bottom-0 z-0'}>
+                            <Image className={'z-0 -mb-[7px]'} preview={false}
+                                   src={'/assets/backgrounds/bg-pattern.png'}/>
+                        </div>
+                    )}
+                </div>
+            </Content>
+        </Layout>
+    </ParticlesLayout>
+}
+
+export default DesktopLayout;

components/Layout/DesktopLayout/DesktopLayoutHeader.js

@@ -0,0 +1,61 @@
+import React, {useState} from 'react';
+import {Button, Layout, Menu, Popover, Typography} from "antd";
+import {UserOutlined} from "@ant-design/icons";
+
+const {Sider, Header, Content, Footer} = Layout;
+const {Paragraph, Text} = Typography;
+
+const DesktopLayoutHeader = (props) => {
+    const [clicked, setClicked] = useState(false);
+
+    return (
+        <Header className={"flex items-center justify-end"}>
+            <Popover
+                autoAdjustOverflow={true}
+                placement="bottomRight"
+                content={
+                    <Menu
+                        type={"line"}
+                        inlineIndent={0}
+                        theme="light"
+                        className={"bg-transparent border-r-0"}
+                        mode="inline"
+                    >
+                        <Menu.Item>
+                            <span>Profile</span>
+                        </Menu.Item>
+                        <Menu.Item
+                            onClick={() => {
+                                // store.authentication.logout();
+                                // return history.push("/login");
+                            }}
+                        >
+                            <span>Sign out</span>
+                        </Menu.Item>
+                    </Menu>
+                }
+                title={
+                    <Text>
+                        <span className={"font-semibold"}>info@bangun-kreatif.com</span>
+                        <Paragraph type={"secondary-dark"}>
+                            Administrator
+                        </Paragraph>
+                    </Text>
+                }
+                trigger="click"
+                visible={clicked}
+                onVisibleChange={() => setClicked(!clicked)}
+            >
+                <Button
+                    size={"default"}
+                    style={{}}
+                    icon={
+                        <UserOutlined className={"text-sm"}/>
+                    }
+                />
+            </Popover>
+        </Header>
+    );
+};
+
+export default DesktopLayoutHeader;

components/Layout/DesktopLayout/DesktopLayoutMenu.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import {Menu} from "antd";
+import {CalendarOutlined, HomeOutlined, SettingOutlined} from "@ant-design/icons";
+import Link from 'next/link';
+
+const DesktopLayoutMenu = (props) => (
+    <Menu
+        defaultOpenKeys={["sub4"]}
+        theme="light"
+        className={"bg-transparent border-r-0 ml-6"}
+        onClick={({keyPath, item}) => {
+            // props.closeLeftDrawer();
+        }}
+        mode="inline"
+        selectedKeys={[]}
+        onSelect={({setKeys, item, selectedKeys}) => {
+        }}
+        overflowedIndicator={0}
+        forceSubMenuRender={true}
+    >
+        <Menu.Item key="home">
+            <Link href={"/home"}>
+                <a>
+                    <HomeOutlined/>
+                    <span>Home</span>
+                </a>
+            </Link>
+        </Menu.Item>
+        <Menu.Item key="about">
+            <Link href={"/about"}>
+                <a>
+                    <CalendarOutlined/>
+                    <span>About</span>
+                </a>
+            </Link>
+        </Menu.Item>
+        <Menu.Item key="setting">
+            <Link href={"/setting"}>
+                <a>
+                    <SettingOutlined/>
+                    <span>Setting</span>
+                </a>
+            </Link>
+        </Menu.Item>
+    </Menu>
+);
+
+export default DesktopLayoutMenu;

components/Layout/ParticlesLayout.js

@@ -0,0 +1,18 @@
+import dynamic from "next/dynamic";
+
+const ParticlesBg = dynamic(() => import("particles-bg"), { ssr: false });
+
+const ParticlesLayout = ({children}) => {
+    if(typeof window === "undefined") {
+        return <div>
+            {children}
+        </div>;
+    }
+
+    return <div>
+        {children}
+        <ParticlesBg color={"#ababab"} num={20} type={"cobweb"} bg={true} />
+    </div>
+}
+
+export default ParticlesLayout;