(Task #2): init antd and babel

wozzyio · Apr 9, 2020 · f0ceccc · f0ceccc
1 parent f6f281f
commit f0ceccc
Show file tree

Hide file tree

Showing 6 changed files with 916 additions and 84 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,8 @@
+{
+    "plugins": [
+      ["inline-import", { "extensions": [".css"] }],
+      ["import", { "libraryName": "antd" }]
+    ],
+    "presets": ["next/babel"],
+    "ignore": []
+}
diff --git a/components/nav.js b/components/nav.js
@@ -1,56 +1,96 @@
-import React from 'react'
-import Link from 'next/link'
+import React from 'react';
+import Link from 'next/link';
+import { Layout, Menu, Breadcrumb } from 'antd';
+import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
+
+const { SubMenu } = Menu;
+const { Header, Content, Sider } = Layout;
+import stylesheet from 'antd/dist/antd.min.css'
 
-const links = [
-  { href: 'https://zeit.co/now', label: 'ZEIT' },
-  { href: 'https://github.com/zeit/next.js', label: 'GitHub' },
-].map(link => {
-  link.key = `nav-link-${link.href}-${link.label}`
-  return link
-})
 
 const Nav = () => (
-  <nav>
-    <ul>
-      <li>
-        <Link href="/">
-          <a>Home</a>
-        </Link>
-      </li>
-      {links.map(({ key, href, label }) => (
-        <li key={key}>
-          <a href={href}>{label}</a>
-        </li>
-      ))}
-    </ul>
+    <Layout>
+            <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
 
-    <style jsx>{`
-      :global(body) {
-        margin: 0;
-        font-family: -apple-system, BlinkMacSystemFont, Avenir Next, Avenir,
-          Helvetica, sans-serif;
-      }
-      nav {
-        text-align: center;
-      }
-      ul {
-        display: flex;
-        justify-content: space-between;
-      }
-      nav > ul {
-        padding: 4px 16px;
-      }
-      li {
-        display: flex;
-        padding: 6px 8px;
-      }
-      a {
-        color: #067df7;
-        text-decoration: none;
-        font-size: 13px;
-      }
-    `}</style>
-  </nav>
+    <Header className="header">
+      <div className="logo" />
+      <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
+        <Menu.Item key="1">nav 1</Menu.Item>
+        <Menu.Item key="2">nav 2</Menu.Item>
+        <Menu.Item key="3">nav 3</Menu.Item>
+      </Menu>
+    </Header>
+    <Layout>
+      <Sider width={200} className="site-layout-background">
+        <Menu
+          mode="inline"
+          defaultSelectedKeys={['1']}
+          defaultOpenKeys={['sub1']}
+          style={{ height: '100%', borderRight: 0 }}
+        >
+          <SubMenu
+            key="sub1"
+            title={
+              <span>
+                <UserOutlined />
+                subnav 1
+              </span>
+            }
+          >
+            <Menu.Item key="1">option1</Menu.Item>
+            <Menu.Item key="2">option2</Menu.Item>
+            <Menu.Item key="3">option3</Menu.Item>
+            <Menu.Item key="4">option4</Menu.Item>
+          </SubMenu>
+          <SubMenu
+            key="sub2"
+            title={
+              <span>
+                <LaptopOutlined />
+                subnav 2
+              </span>
+            }
+          >
+            <Menu.Item key="5">option5</Menu.Item>
+            <Menu.Item key="6">option6</Menu.Item>
+            <Menu.Item key="7">option7</Menu.Item>
+            <Menu.Item key="8">option8</Menu.Item>
+          </SubMenu>
+          <SubMenu
+            key="sub3"
+            title={
+              <span>
+                <NotificationOutlined />
+                subnav 3
+              </span>
+            }
+          >
+            <Menu.Item key="9">option9</Menu.Item>
+            <Menu.Item key="10">option10</Menu.Item>
+            <Menu.Item key="11">option11</Menu.Item>
+            <Menu.Item key="12">option12</Menu.Item>
+          </SubMenu>
+        </Menu>
+      </Sider>
+      <Layout style={{ padding: '0 24px 24px' }}>
+        <Breadcrumb style={{ margin: '16px 0' }}>
+          <Breadcrumb.Item>Home</Breadcrumb.Item>
+          <Breadcrumb.Item>List</Breadcrumb.Item>
+          <Breadcrumb.Item>App</Breadcrumb.Item>
+        </Breadcrumb>
+        <Content
+          className="site-layout-background"
+          style={{
+            padding: 24,
+            margin: 0,
+            minHeight: 280,
+          }}
+        >
+          Content
+        </Content>
+      </Layout>
+    </Layout>
+  </Layout>
 )
 
 export default Nav
diff --git a/components/teacherDashboard.js b/components/teacherDashboard.js
@@ -3,6 +3,9 @@ import withAuth from '../src/helpers/withAuth';
 import ErrorPage from 'next/error'
 import { db, storage, functions } from "../src/firebase";
 import Router from 'next/router';
+import Nav from '../components/nav';
+import stylesheet from 'antd/dist/antd.min.css'
+
 
 export class TeacherDashboard extends React.Component {
     constructor(props) {
@@ -47,7 +50,10 @@ export class TeacherDashboard extends React.Component {
     render() {
         return (
             <React.Fragment>
+                            <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
+
                 <div>
+                    <Nav/>
                     <p>Things are happenings</p>
                 </div>
             </React.Fragment>