mirror of https://github.com/sunface/rust-course
孙飞
5 years ago
commit
1773661f92
@ -0,0 +1,11 @@
|
||||
{
|
||||
"presets": ["next/babel"],
|
||||
"plugins": [
|
||||
[
|
||||
"import", {
|
||||
"libraryName": "antd",
|
||||
"style": true
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env*
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
@ -0,0 +1,6 @@
|
||||
|
||||
<p align="center">
|
||||
<img alt="Sloan, the sloth mascot" width="250px" src="https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/31047/af153cd6-9994-4a68-83f4-8ddf3e13f0bf.jpg">
|
||||
<br>
|
||||
<strong>Be A Happy Dev</strong> ❤️
|
||||
</p>
|
||||
@ -0,0 +1,230 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
//
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
//
|
||||
import {
|
||||
useWindowSize,
|
||||
useWindowWidth,
|
||||
useWindowHeight
|
||||
} from "@react-hook/window-size";
|
||||
//
|
||||
import { Layout, Menu, Switch } from "antd";
|
||||
import {
|
||||
HomeOutlined,
|
||||
AppstoreOutlined,
|
||||
BarChartOutlined,
|
||||
CloudOutlined,
|
||||
ShopOutlined,
|
||||
TeamOutlined,
|
||||
UserOutlined,
|
||||
UploadOutlined,
|
||||
VideoCameraOutlined
|
||||
} from "@ant-design/icons";
|
||||
//
|
||||
import { Input } from "antd";
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
|
||||
const { Search } = Input;
|
||||
//
|
||||
|
||||
const { Header, Content, Footer, Sider } = Layout;
|
||||
|
||||
const AppLayout = props => {
|
||||
const [siderKey, setSiderKey] = useState("");
|
||||
const [isSiderCollapsed, setSiderCollapsed] = useState(false);
|
||||
const [window, setWindow] = useState({ width: -1, height: -1 });
|
||||
|
||||
const [width, height] = useWindowSize();
|
||||
useEffect(() => {
|
||||
setWindow({ width: width, height: height });
|
||||
|
||||
return () => {
|
||||
// cleanup
|
||||
};
|
||||
}, [width, height]);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
console.log(siderKey);
|
||||
return () => {
|
||||
// cleanup
|
||||
};
|
||||
}, [siderKey]);
|
||||
|
||||
useEffect(() => {
|
||||
console.log("useEffect fired by useRouter");
|
||||
const urlPath = router.pathname;
|
||||
|
||||
switch (urlPath) {
|
||||
case "/":
|
||||
setSiderKey(0);
|
||||
break;
|
||||
case "/profile":
|
||||
setSiderKey(1);
|
||||
break;
|
||||
case "/videos":
|
||||
setSiderKey(2);
|
||||
break;
|
||||
case "/backup":
|
||||
setSiderKey(3);
|
||||
break;
|
||||
case "/analytics":
|
||||
setSiderKey(4);
|
||||
break;
|
||||
}
|
||||
return () => {
|
||||
// cleanup
|
||||
};
|
||||
}, [router]);
|
||||
|
||||
const contentStyleWidth =
|
||||
// responsive design
|
||||
window.width < 480 ? { width: "calc(100vw - 32px)" } : {};
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<Sider
|
||||
collapsible
|
||||
breakpoint="lg"
|
||||
collapsedWidth={window.width > 480 ? "80" : "0"} // enable responsive hidden sider for mobile only
|
||||
onBreakpoint={broken => {
|
||||
console.log(broken);
|
||||
}}
|
||||
collapsed={isSiderCollapsed}
|
||||
onCollapse={(collapsed, type) => {
|
||||
setSiderCollapsed(collapsed);
|
||||
console.log(collapsed, type);
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="logo"
|
||||
style={{
|
||||
height: 64,
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
color: "white",
|
||||
whiteSpace: "nowrap"
|
||||
}}
|
||||
>
|
||||
Sider Logo
|
||||
</div>
|
||||
<Menu theme="dark" mode="inline" selectedKeys={[siderKey.toString()]}>
|
||||
<Menu.Item key="0">
|
||||
<Link href="/">
|
||||
<div>
|
||||
<HomeOutlined />
|
||||
<span className="nav-text">Home</span>
|
||||
</div>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item key="1">
|
||||
<Link href="/profile">
|
||||
<div>
|
||||
<UserOutlined />
|
||||
<span className="nav-text">Profile</span>
|
||||
</div>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item key="2">
|
||||
<Link href="/videos">
|
||||
<div>
|
||||
<VideoCameraOutlined />
|
||||
<span className="nav-text">Videos</span>
|
||||
</div>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item key="3">
|
||||
<Link href="/backup">
|
||||
<div>
|
||||
<UploadOutlined />
|
||||
<span className="nav-text">Backup</span>
|
||||
</div>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item key="4">
|
||||
<Link href="/analytics">
|
||||
<div>
|
||||
<BarChartOutlined />
|
||||
<span className="nav-text">Analytics</span>
|
||||
</div>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item key="5">
|
||||
<CloudOutlined />
|
||||
<span className="nav-text">Cloud</span>
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item key="6">
|
||||
<AppstoreOutlined />
|
||||
<span className="nav-text">Apps</span>
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item key="7">
|
||||
<TeamOutlined />
|
||||
<span className="nav-text">Collaborate</span>
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item key="8">
|
||||
<ShopOutlined />
|
||||
<span className="nav-text">Shop</span>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
</Sider>
|
||||
<Layout className="site-layout">
|
||||
<Header
|
||||
className={"site-layout-sub-header-background"}
|
||||
style={{ padding: 0 }}
|
||||
>
|
||||
<div
|
||||
className="logo"
|
||||
style={{
|
||||
height: 64,
|
||||
color: "white",
|
||||
textAlign: "center"
|
||||
}}
|
||||
>
|
||||
Main Logo
|
||||
</div>
|
||||
</Header>
|
||||
<Content // you may want to change these
|
||||
style={{
|
||||
...contentStyleWidth,
|
||||
margin: "24px 16px 0",
|
||||
overflow: "initial"
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="site-layout-background"
|
||||
style={{
|
||||
padding: 24,
|
||||
textAlign: "center",
|
||||
minHeight: "calc(100vh - 158px)"
|
||||
}}
|
||||
>
|
||||
{props.children}
|
||||
</div>
|
||||
</Content>
|
||||
<Footer style={{ ...contentStyleWidth, textAlign: "center" }}>
|
||||
Footer Text
|
||||
{/* <p>
|
||||
width: {window.width}, height: {window.height}
|
||||
</p> */}
|
||||
</Footer>
|
||||
</Layout>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default AppLayout;
|
||||
@ -0,0 +1,2 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/types/global" />
|
||||
@ -0,0 +1,40 @@
|
||||
/* eslint-disable */
|
||||
const withLess = require('@zeit/next-less')
|
||||
const lessToJS = require('less-vars-to-js')
|
||||
const fs = require('fs')
|
||||
const path = require('path')
|
||||
|
||||
// Where your antd-custom.less file lives
|
||||
const themeVariables = lessToJS(
|
||||
fs.readFileSync(path.resolve(__dirname, './styles/antd-override.less'), 'utf8')
|
||||
)
|
||||
|
||||
module.exports = withLess({
|
||||
lessLoaderOptions: {
|
||||
javascriptEnabled: true,
|
||||
modifyVars: themeVariables, // make your antd custom effective
|
||||
},
|
||||
webpack: (config, { isServer }) => {
|
||||
if (isServer) {
|
||||
const antStyles = /antd\/.*?\/style.*?/
|
||||
const origExternals = [...config.externals]
|
||||
config.externals = [
|
||||
(context, request, callback) => {
|
||||
if (request.match(antStyles)) return callback()
|
||||
if (typeof origExternals[0] === 'function') {
|
||||
origExternals[0](context, request, callback)
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
...(typeof origExternals[0] === 'function' ? [] : origExternals),
|
||||
]
|
||||
|
||||
config.module.rules.unshift({
|
||||
test: antStyles,
|
||||
use: 'null-loader',
|
||||
})
|
||||
}
|
||||
return config
|
||||
},
|
||||
})
|
||||
@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "next-with-ant-design-less",
|
||||
"version": "1.0.0",
|
||||
"scripts": {
|
||||
"dev": "next",
|
||||
"build": "next build",
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-hook/window-size": "^1.0.13",
|
||||
"@zeit/next-less": "^1.0.1",
|
||||
"antd": "4.6.5",
|
||||
"babel-plugin-import": "^1.13.0",
|
||||
"less": "3.11.1",
|
||||
"less-vars-to-js": "1.3.0",
|
||||
"next": "9.5.3",
|
||||
"null-loader": "3.0.0",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1"
|
||||
},
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"@types/node": "^14.11.1",
|
||||
"@types/react": "^16.9.49",
|
||||
"typescript": "^4.0.3"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
import React from "react";
|
||||
|
||||
import AppLayout from "../components/AppLayout";
|
||||
|
||||
const analytics = props => {
|
||||
return (
|
||||
<AppLayout>
|
||||
<div>Analytics Page</div>
|
||||
</AppLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default analytics;
|
||||
@ -0,0 +1,13 @@
|
||||
import React from "react";
|
||||
|
||||
import AppLayout from "../components/AppLayout";
|
||||
|
||||
const backup = props => {
|
||||
return (
|
||||
<AppLayout>
|
||||
<div>Backup Page</div>
|
||||
</AppLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default backup;
|
||||
@ -0,0 +1,3 @@
|
||||
.main-card {
|
||||
margin-left: 100px
|
||||
}
|
||||
@ -0,0 +1,73 @@
|
||||
// core
|
||||
import React from "react";
|
||||
// antd
|
||||
import { Typography, Divider, Button, Card } from "antd";
|
||||
const { Title, Text } = Typography;
|
||||
// components
|
||||
import AppLayout from "../components/AppLayout";
|
||||
import { T } from "antd/lib/upload/utils";
|
||||
import './index.less'
|
||||
|
||||
const App = () => (
|
||||
<AppLayout>
|
||||
<div>Home Page</div>
|
||||
<Title>Nextjs with Ant Design & Less</Title>
|
||||
<Text>
|
||||
Go ahead and edit <code>/pages/index.js</code>, and see your changes here
|
||||
</Text>
|
||||
<Divider />
|
||||
<Title level={2}>Useful Links</Title>
|
||||
<Button
|
||||
href="https://nextjs.org/learn/basics/getting-started"
|
||||
target="__blank"
|
||||
>
|
||||
Next.js Learn
|
||||
</Button>
|
||||
<Button href="https://nextjs.org/docs/getting-started" target="__blank">
|
||||
Next.js Docs
|
||||
</Button>
|
||||
<Button href="https://ant.design/components/button/" target="__blank">
|
||||
antd Docs
|
||||
</Button>
|
||||
|
||||
<Divider />
|
||||
<div style={{ textAlign: "start" }}>
|
||||
<Card className="main-card">
|
||||
<Title level={2}>Quick Recap:</Title>
|
||||
<Title level={4}>Shared App Layout</Title>
|
||||
<Text>
|
||||
Shared/Common App Layout is located at{" "}
|
||||
<code>/components/AppLayout</code>
|
||||
</Text>
|
||||
<br />
|
||||
<Text>Sider/sidebar, header and footer are all in this file.</Text>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<Title level={4}>antd Less</Title>
|
||||
<Text>
|
||||
antd's Less file is present at <code>/assets/antd-custom.less</code>
|
||||
</Text>
|
||||
<br />
|
||||
<Text>
|
||||
Head over to{" "}
|
||||
<a
|
||||
href="https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less"
|
||||
target="__blank"
|
||||
>
|
||||
antd's theming docs
|
||||
</a>{" "}
|
||||
for a list of less variables.
|
||||
</Text>
|
||||
<br />
|
||||
<Text>
|
||||
If you dont wish to mess around with Less, just delete everything in
|
||||
the less file.
|
||||
</Text>
|
||||
</Card>
|
||||
</div>
|
||||
</AppLayout>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -0,0 +1,15 @@
|
||||
import React from "react";
|
||||
|
||||
import AppLayout from "../components/AppLayout";
|
||||
|
||||
import { Switch } from "antd";
|
||||
|
||||
const profile = props => {
|
||||
return (
|
||||
<AppLayout>
|
||||
<div>Profile Page</div>
|
||||
</AppLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default profile;
|
||||
@ -0,0 +1,13 @@
|
||||
import React from "react";
|
||||
|
||||
import AppLayout from "../components/AppLayout";
|
||||
|
||||
const videos = props => {
|
||||
return (
|
||||
<AppLayout>
|
||||
<div>Videos Page</div>
|
||||
</AppLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default videos;
|
||||
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,5 @@
|
||||
@import "../color/colors";
|
||||
|
||||
@primary-color: #1da57a;
|
||||
|
||||
@layout-header-height: 64px;
|
||||
@ -0,0 +1,29 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": false,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve"
|
||||
},
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
Loading…
Reference in new issue