mirror of
https://github.com/kou029w/_.git
synced 2025-01-30 22:08:02 +00:00
AppBarを追加
This commit is contained in:
parent
b7d67ac5a1
commit
5a8fe9e9e8
7 changed files with 214 additions and 4 deletions
|
|
@ -7,6 +7,7 @@
|
|||
"dependencies": {
|
||||
"@material-ui/core": "^3.9.3",
|
||||
"@material-ui/icons": "^3.0.2",
|
||||
"@material-ui/styles": "^3.0.0-alpha.10",
|
||||
"@zeit/next-typescript": "^1.1.1",
|
||||
"next": "^8.1.0",
|
||||
"react": "^16.8.6",
|
||||
|
|
|
|||
18
pages/_app.tsx
Normal file
18
pages/_app.tsx
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import React from "react";
|
||||
import App, { Container } from "next/app";
|
||||
import MainTheme from "../styles/MainTheme";
|
||||
import TopAppBar from "../styles/TopAppBar";
|
||||
|
||||
export default class extends App {
|
||||
render() {
|
||||
const { Component, pageProps } = this.props;
|
||||
return (
|
||||
<Container>
|
||||
<MainTheme>
|
||||
<TopAppBar />
|
||||
<Component {...pageProps} />
|
||||
</MainTheme>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
19
pages/_document.tsx
Normal file
19
pages/_document.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import React from "react";
|
||||
import Document, { Head, Main, NextScript } from "next/document";
|
||||
|
||||
export default class extends Document {
|
||||
render() {
|
||||
return (
|
||||
<html lang="ja" dir="ltr">
|
||||
<Head>
|
||||
<meta charSet="utf-8" />
|
||||
</Head>
|
||||
|
||||
<body>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
}
|
||||
40
styles/MainTheme.tsx
Normal file
40
styles/MainTheme.tsx
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
import "./boot";
|
||||
import { ThemeProvider } from "@material-ui/styles";
|
||||
import { CssBaseline, createMuiTheme } from "@material-ui/core";
|
||||
import { orange, teal } from "@material-ui/core/colors";
|
||||
import React from "react";
|
||||
import Head from "next/head";
|
||||
|
||||
export const theme = createMuiTheme({
|
||||
palette: {
|
||||
primary: {
|
||||
main: orange[900]
|
||||
},
|
||||
secondary: {
|
||||
main: teal[400]
|
||||
}
|
||||
},
|
||||
typography: {
|
||||
useNextVariants: true,
|
||||
fontFamily: '"Noto Sans JP", "Helvetica", "Arial", sans-serif'
|
||||
}
|
||||
});
|
||||
|
||||
const MainTheme: React.FC<{}> = ({ children }) => (
|
||||
<ThemeProvider theme={theme}>
|
||||
<Head>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width,minimum-scale=1,initial-scale=1"
|
||||
/>
|
||||
<meta name="theme-color" content={theme.palette.primary.main} />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+JP"
|
||||
/>
|
||||
</Head>
|
||||
<CssBaseline />
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
);
|
||||
export default MainTheme;
|
||||
29
styles/TopAppBar.tsx
Normal file
29
styles/TopAppBar.tsx
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { makeStyles } from "@material-ui/styles";
|
||||
import { AppBar, Toolbar, IconButton } from "@material-ui/core";
|
||||
import { Home } from "@material-ui/icons";
|
||||
|
||||
const useStyles = makeStyles({
|
||||
root: {
|
||||
flexGrow: 1
|
||||
}
|
||||
});
|
||||
|
||||
const TopAppBar: React.FC = () => {
|
||||
const classes = useStyles();
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<AppBar position="static">
|
||||
<Toolbar>
|
||||
<Link href="/">
|
||||
<IconButton color="inherit">
|
||||
<Home />
|
||||
</IconButton>
|
||||
</Link>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default TopAppBar;
|
||||
2
styles/boot.ts
Normal file
2
styles/boot.ts
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
import { install } from "@material-ui/styles";
|
||||
install();
|
||||
109
yarn.lock
109
yarn.lock
|
|
@ -699,7 +699,7 @@
|
|||
dependencies:
|
||||
regenerator-runtime "^0.12.0"
|
||||
|
||||
"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0":
|
||||
"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1":
|
||||
version "7.4.3"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.3.tgz#79888e452034223ad9609187a0ad1fe0d2ad4bdc"
|
||||
integrity sha512-9lsJwJLxDh/T3Q3SZszfWOTkk3pHbkmH+3KY+zwIDmsNlxsumuhS2TH3NIpktU4kNvfzy+k3eLT7aTJSPTo0OA==
|
||||
|
|
@ -739,6 +739,11 @@
|
|||
lodash "^4.17.11"
|
||||
to-fast-properties "^2.0.0"
|
||||
|
||||
"@emotion/hash@^0.7.1":
|
||||
version "0.7.1"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.1.tgz#9833722341379fb7d67f06a4b00ab3c37913da53"
|
||||
integrity sha512-OYpa/Sg+2GDX+jibUfpZVn1YqSVRpYmTLF2eyAfrFTIJSbwyIrc+YscayoykvaOME/wV4BV0Sa0yqdMrgse6mA==
|
||||
|
||||
"@material-ui/core@^3.9.3":
|
||||
version "3.9.3"
|
||||
resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-3.9.3.tgz#d378c1f4beb18df9a534ca7258c2c33fb8e0e51f"
|
||||
|
|
@ -780,6 +785,28 @@
|
|||
"@babel/runtime" "^7.2.0"
|
||||
recompose "0.28.0 - 0.30.0"
|
||||
|
||||
"@material-ui/styles@^3.0.0-alpha.10":
|
||||
version "3.0.0-alpha.10"
|
||||
resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-3.0.0-alpha.10.tgz#4c28a6d6dacb1fb71aff4642f92b63232a3f298d"
|
||||
integrity sha512-qJ5eiupBPRCNlMCDZ2G5h8auBtBtm8uT/oCUAJ/FqhO5oC7POLmmvDN1Cq1cgAmqQnaL6uN5mAM1Gc90GpKr9A==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.2.0"
|
||||
"@emotion/hash" "^0.7.1"
|
||||
"@material-ui/utils" "^3.0.0-alpha.2"
|
||||
classnames "^2.2.5"
|
||||
deepmerge "^3.0.0"
|
||||
hoist-non-react-statics "^3.2.1"
|
||||
jss "^10.0.0-alpha.7"
|
||||
jss-plugin-camel-case "^10.0.0-alpha.7"
|
||||
jss-plugin-default-unit "^10.0.0-alpha.7"
|
||||
jss-plugin-global "^10.0.0-alpha.7"
|
||||
jss-plugin-nested "^10.0.0-alpha.7"
|
||||
jss-plugin-props-sort "^10.0.0-alpha.7"
|
||||
jss-plugin-rule-value-function "^10.0.0-alpha.7"
|
||||
jss-plugin-vendor-prefixer "^10.0.0-alpha.7"
|
||||
prop-types "^15.6.0"
|
||||
warning "^4.0.1"
|
||||
|
||||
"@material-ui/system@^3.0.0-alpha.0":
|
||||
version "3.0.0-alpha.2"
|
||||
resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-3.0.0-alpha.2.tgz#096e80c8bb0f70aea435b9e38ea7749ee77b4e46"
|
||||
|
|
@ -1916,6 +1943,14 @@ css-vendor@^0.3.8:
|
|||
dependencies:
|
||||
is-in-browser "^1.0.2"
|
||||
|
||||
css-vendor@^1.1.0:
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-1.2.1.tgz#21b914913d3a68bab2708090dab2e61db7c9eaec"
|
||||
integrity sha512-ZpwiWxn5jWNJ7NF3DAb/Dc/+c2lRu+fnovej/adCv3VJsULJSjdXEpUwRcq4fnpAAh98Hi7b0GDnlyoNFcdv1g==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.3.1"
|
||||
is-in-browser "^1.0.2"
|
||||
|
||||
css@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
|
||||
|
|
@ -3209,6 +3244,58 @@ jss-nested@^6.0.1:
|
|||
dependencies:
|
||||
warning "^3.0.0"
|
||||
|
||||
jss-plugin-camel-case@^10.0.0-alpha.7:
|
||||
version "10.0.0-alpha.7"
|
||||
resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.0-alpha.7.tgz#7dcbd9acb6682f3102cb2d3356b4fd9642d93f17"
|
||||
integrity sha512-Bwrav1ZB0XywdJW6TaEuFhKe1ZpZvUlESh3jsFOvebA9aFTYNCkmHMEqjA5+u9VMxksl3u77nnZHtukpxkzrBA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.0.0"
|
||||
hyphenate-style-name "^1.0.2"
|
||||
|
||||
jss-plugin-default-unit@^10.0.0-alpha.7:
|
||||
version "10.0.0-alpha.7"
|
||||
resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.0-alpha.7.tgz#f6dd0a03d545e7bf243c062bae3a832ac8c5ff6d"
|
||||
integrity sha512-auuJUbQaWMxoHOVFPrfZNZpZm9ab8PZeDyvey8nMt2lbokkmZ53UyAnM/1kNsg5BdAXTItcLDxDB3I4gwNU84g==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.0.0"
|
||||
|
||||
jss-plugin-global@^10.0.0-alpha.7:
|
||||
version "10.0.0-alpha.7"
|
||||
resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.0.0-alpha.7.tgz#38ca390802b62da490afbaafc581552a81977729"
|
||||
integrity sha512-OWeoW4szLDgRUKviST+xfilqa8O5uXJCW+O3YonheCRTRJg6rRzlE/b5pfYPoU9UtwvY9n7JvwBX5r3c1lMsEQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.0.0"
|
||||
|
||||
jss-plugin-nested@^10.0.0-alpha.7:
|
||||
version "10.0.0-alpha.7"
|
||||
resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.0.0-alpha.7.tgz#03a89c8f7c1d570a3d5f16dae3e61f7f2edb0316"
|
||||
integrity sha512-wsRzuIZXAc6WMjc61mREW9cUrDxgSI7dK/fx5c7a06IDUfSn+83NJ30J/RB4oBnbQW9SijV/muujz7IJqpn9Gw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.0.0"
|
||||
tiny-warning "^1.0.2"
|
||||
|
||||
jss-plugin-props-sort@^10.0.0-alpha.7:
|
||||
version "10.0.0-alpha.7"
|
||||
resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.0-alpha.7.tgz#46f1809fcae0acc048d0047aa54a4b9b6973597d"
|
||||
integrity sha512-KXOCaHUk1+KXqE0z3q66/w1fDoy+VsZvI77gLxOqTsTrvIKFLX0jarwXogW3CDlaPQQFTZ6JykJJXtPRTBlstA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.0.0"
|
||||
|
||||
jss-plugin-rule-value-function@^10.0.0-alpha.7:
|
||||
version "10.0.0-alpha.7"
|
||||
resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.0-alpha.7.tgz#63df1078ac361dda67996e25291d90f7226ae59a"
|
||||
integrity sha512-ett83hvIM69/LknmrWndrrdiDlfLfP+rneU5qP7gTOWJ7g1P9GuEL1Tc4CWdZUWBX+T58tgIBP0V1pzWCkP0QA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.0.0"
|
||||
|
||||
jss-plugin-vendor-prefixer@^10.0.0-alpha.7:
|
||||
version "10.0.0-alpha.7"
|
||||
resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.0-alpha.7.tgz#caa34eb0bc39f0c98f425e174fc220d1f1a8760a"
|
||||
integrity sha512-YbIVgqq+dLimOBOEYggho1Iuc0roz4PJSZYyaok9n8JnXVIqPnxYJbr8+bMbvzJ5CL3eeJij/e7L2IPCceRKrA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.0.0"
|
||||
css-vendor "^1.1.0"
|
||||
|
||||
jss-props-sort@^6.0.0:
|
||||
version "6.0.0"
|
||||
resolved "https://registry.yarnpkg.com/jss-props-sort/-/jss-props-sort-6.0.0.tgz#9105101a3b5071fab61e2d85ea74cc22e9b16323"
|
||||
|
|
@ -3221,6 +3308,15 @@ jss-vendor-prefixer@^7.0.0:
|
|||
dependencies:
|
||||
css-vendor "^0.3.8"
|
||||
|
||||
jss@^10.0.0-alpha.7:
|
||||
version "10.0.0-alpha.16"
|
||||
resolved "https://registry.yarnpkg.com/jss/-/jss-10.0.0-alpha.16.tgz#0555e8b667e08dbd2cc94f6125be5a8b8b022833"
|
||||
integrity sha512-HmKNNnr82TR5jkWjBcbrx/uim2ief588pWp7zsf4GQpL125zRkEaWYL1SXv5bR6bBvAoTtvJsTAOxDIlLxUNZg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.3.1"
|
||||
is-in-browser "^1.1.3"
|
||||
tiny-warning "^1.0.2"
|
||||
|
||||
jss@^9.8.7:
|
||||
version "9.8.7"
|
||||
resolved "https://registry.yarnpkg.com/jss/-/jss-9.8.7.tgz#ed9763fc0f2f0260fc8260dac657af61e622ce05"
|
||||
|
|
@ -4573,9 +4669,9 @@ run-queue@^1.0.0, run-queue@^1.0.3:
|
|||
aproba "^1.1.1"
|
||||
|
||||
rxjs@^6.4.0:
|
||||
version "6.4.0"
|
||||
resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.4.0.tgz#f3bb0fe7bda7fb69deac0c16f17b50b0b8790504"
|
||||
integrity sha512-Z9Yfa11F6B9Sg/BK9MnqnQ+aQYicPLtilXBp2yUtDt2JRCE0h26d33EnfO3ZxoNxG0T92OUucP3Ct7cpfkdFfw==
|
||||
version "6.5.0"
|
||||
resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.0.tgz#1e4bc933f14a0c5c2ce7bb71ddd4244d42f4b04b"
|
||||
integrity sha512-FOTfP3LK5VN3dDtr+wjFAeKVe5nTPPTC2+NUFJ8kyuO+YbIl/aME0eQDiX2MCVgnhKyuUYaEjgZEx8iL/4AV6A==
|
||||
dependencies:
|
||||
tslib "^1.9.0"
|
||||
|
||||
|
|
@ -5115,6 +5211,11 @@ timers-browserify@^2.0.4:
|
|||
dependencies:
|
||||
setimmediate "^1.0.4"
|
||||
|
||||
tiny-warning@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.2.tgz#1dfae771ee1a04396bdfde27a3adcebc6b648b28"
|
||||
integrity sha512-rru86D9CpQRLvsFG5XFdy0KdLAvjdQDyZCsRcuu60WtzFylDM3eAWSxEVz5kzL2Gp544XiUvPbVKtOA/txLi9Q==
|
||||
|
||||
tmp@^0.0.33:
|
||||
version "0.0.33"
|
||||
resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue