s412146/tasko-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Navbar layout ready.

Browse Source
This commit is contained in:
FilipHalon 2020-01-13 16:20:19 +01:00
parent 19a27fc028
commit 9f204f4751
5 changed files with 139 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
next.config.js
View File

@ -1,4 +1,4 @@
const withCSS = require('@zeit/next-css')
module.exports = withCSS({
cssModules: true
cssModules: false
})

22
pages/_document.js Normal file
View File

@ -0,0 +1,22 @@
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument

54
pages/components/Header.js Normal file
View File

@ -0,0 +1,54 @@
import Link from 'next/link';
const Header = props => {
return (
<header>
<nav>
<ul>
<div className="navbar-options">
<li>
<Link href="/">
<a>Tasko-O!</a>
</Link>
</li>
<li>
<Link href="/">
<a>Zadania</a>
</Link>
</li>
<li>
<Link href="/">
<a>Pytania</a>
</Link>
</li>
<li>
<Link href="/">
<a>Rozmowy</a>
</Link>
</li>
<li>
<Link href="/">
<a>Ustawienia</a>
</Link>
</li>
</div>
<div className="navbar-auth">
<li>
<Link href="/">
<a>Zaloguj się</a>
</Link>
</li>
<li>
<Link href="/">
<a>Zarejestruj się</a>
</Link>
</li>
</div>
</ul>
</nav>
</header>
)
}
export default Header;

8
pages/index.js
View File

@ -1,10 +1,10 @@
import "../style.css"
import Link from 'next/link';
import Header from './components/Header'
const Index = () => (
const Index = props => (
<div>
<p>Hello Next.js</p>
<Header/>
<p>Hello Next.js</p>
</div>
);

60
style.css
View File

@ -1,3 +1,59 @@
:root {
--navbar-text-color: #B5BDFB;
}
* {
color: red
}
font-family: sans-serif;
}
body {
margin: 0;
}
nav ul {
background-color: #465DEF;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
nav ul div {
display: flex;
flex-wrap: wrap;
}
.navbar-options {
width: 70%;
}
.navbar-auth {
justify-content: flex-end;
width: 30%;
/* display: grid;
grid: 1fr / 1fr 1fr */
}
/* .navbar-auth li a {
width: 100%;
} */
nav ul div li {
display: flex;
}
nav ul div li a {
padding: 1em;
text-decoration: none;
color: var(--navbar-text-color);
font-size: 90%;
}
.navbar-auth li:first-of-type a {
border: solid 1px rgba(255, 255, 255, .1);
}
.navbar-auth li:last-of-type a:last-of-type {
background-color: #5D6CED;
color: #FFF;
}