added panels to home

packages/app/src/pages/home/index.jsx

@@ -1,15 +1,110 @@
 import React from "react"
-import { PostCreator, PostsFeed } from "components"
+import * as antd from "antd"
+import classnames from "classnames"
+
+import { Icons, createIconRender } from "components/Icons"
+
+import { PostCreator, PostsFeed, LivestreamsBrowser } from "components"
 
 import "./index.less"
 
-export default class PostsExplorer extends React.Component {
-    render() {
-        return <div className="explore">
-            <div className="header">
+const Tabs = {
+    "feed": {
+        title: "Feed",
+        icon: "Rss",
+        component: (props) => {
+            return <>
                 <PostCreator />
+                <PostsFeed />
+            </>
+        }
+    },
+    "livestrems": {
+        title: "Livestrems",
+        icon: "Tv",
+        component: (props) => {
+            return <>
+                <LivestreamsBrowser />
+            </>
+        }
+    },
+}
+
+export default class Dashboard extends React.Component {
+    state = {
+        activeTab: "feed"
+    }
+
+    primaryPanelRef = React.createRef()
+
+    componentDidMount() {
+        app.eventBus.emit("style.compactMode", false)
+    }
+
+    renderActiveTab() {
+        const tab = Tabs[this.state.activeTab]
+
+        if (!tab) {
+            return null
+        }
+
+        return React.createElement(tab.component)
+    }
+
+    handleTabChange = (key) => {
+        if (this.state.activeTab === key) return
+
+        // set to primary panel fade-opacity-leave class
+        this.primaryPanelRef.current.classList.add("fade-opacity-leave")
+
+
+        setTimeout(() => {
+            this.setState({ activeTab: key })
+        }, 200)
+
+        // remove fade-opacity-leave class after animation
+        setTimeout(() => {
+            this.primaryPanelRef.current.classList.remove("fade-opacity-leave")
+        }, 300)
+    }
+
+    render() {
+        return <div className="dashboard">
+            <div></div>
+
+            <div
+                ref={this.primaryPanelRef}
+                className={classnames("panel", "fade-opacity-active")}
+                style={{ width: "102%" }}
+            >
+                {this.renderActiveTab()}
+            </div>
+
+            <div className="panel">
+                <div className="card">
+                    <div>
+                        <h2><Icons.Compass /> Browse</h2>
+                        <antd.Menu
+                            mode="inline"
+                            selectedKeys={[this.state.activeTab]}
+                            activeKey={this.state.activeTab}
+                            onClick={({ key }) => this.handleTabChange(key)}
+                        >
+                            {Object.keys(Tabs).map((key) => {
+                                const tab = Tabs[key]
+
+                                return <antd.Menu.Item
+                                    key={key}
+                                    icon={createIconRender(tab.icon)}
+                                >
+                                    {tab.title}
+                                </antd.Menu.Item>
+                            })}
+                        </antd.Menu>
+                    </div>
+
+                </div>
             </div>
-            <PostsFeed />
         </div>
     }
 }

packages/app/src/pages/home/index.less

@@ -1,22 +1,28 @@
-.explore {
-    display        : flex;
-    flex-direction : column;
-    align-items    : center;
-    justify-content: center;
+.dashboard {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: 1fr;
+    grid-column-gap: 20px;
+    grid-row-gap: 0px;
 
     width: 100%;
 
-    .header {
-        display        : flex;
-        flex-direction : column;
-        align-items    : center;
-        justify-content: center;
+    .panel {
+        display: flex;
+        flex-direction: column;
 
-        width    : 100%;
-        max-width: 40vw;
-    }
+        align-items: center;
 
-    >div {
-        margin-bottom: 15px;
+        >div {
+            margin-bottom: 15px;
+        }
+
+        .card {
+            background-color: var(--background-color-accent);
+            border-radius: 12px;
+            padding: 20px;
+
+            min-width: 20vw;
+        }
     }
 }