add two new components: Link, Layout

src/common/Layout/Footer.tsx

@@ -0,0 +1,52 @@
+import { AUTHOR } from 'config/app';
+
+import { makeStyles } from '@material-ui/core/styles';
+import { AppBar, Toolbar, Typography, Container } from '@material-ui/core';
+import Link from 'common/Link/Link';
+
+const Footer = () => {
+  const classes = useStyles();
+  return (
+    <AppBar className={classes.footer} position="absolute" component="footer">
+      <Toolbar disableGutters>
+        <Container className={classes.container}>
+          <Typography component="p">
+            zdamegzaminzawodowy.pl &copy; {new Date().getFullYear()}
+          </Typography>
+          <div className={classes.links}>
+            <Link
+              color="inherit"
+              underline="hover"
+              title="Kontakt"
+              href={AUTHOR.CONTACT}
+            >
+              Kontakt
+            </Link>
+          </div>
+        </Container>
+      </Toolbar>
+    </AppBar>
+  );
+};
+
+const useStyles = makeStyles(theme => {
+  return {
+    footer: {
+      top: 'auto',
+      bottom: 0,
+    },
+    container: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+    },
+    links: {
+      '& > *:not(:last-child)': {
+        marginRight: theme.spacing(1),
+      },
+    },
+  };
+});
+
+export default Footer;

src/common/Layout/Layout.tsx

@@ -0,0 +1,35 @@
+import { makeStyles } from '@material-ui/core/styles';
+import { Toolbar } from '@material-ui/core';
+import TopBar from './TopBar';
+import Footer from './Footer';
+
+export interface LayoutProps {
+  children?: React.ReactNode;
+}
+
+const Layout = ({ children }: LayoutProps) => {
+  const classes = useStyles();
+  return (
+    <div className={classes.container}>
+      <TopBar />
+      <main className={classes.main}>
+        <Toolbar />
+        {children}
+        <Toolbar />
+      </main>
+      <Footer />
+    </div>
+  );
+};
+
+const useStyles = makeStyles(theme => ({
+  main: {
+    padding: theme.spacing(3, 0),
+    minHeight: '100vh',
+  },
+  container: {
+    position: 'relative',
+  },
+}));
+
+export default Layout;

src/common/Layout/TopBar.tsx

@@ -0,0 +1,54 @@
+import { Route } from 'config/routing';
+
+import { makeStyles } from '@material-ui/core/styles';
+import { AppBar, Toolbar, Typography, Container } from '@material-ui/core';
+import Link from 'common/Link/Link';
+
+const TopBar = () => {
+  const classes = useStyles();
+  return (
+    <AppBar position="absolute" component="header" className={classes.navbar}>
+      <Container>
+        <Toolbar disableGutters>
+          <div>
+            <Typography className={classes.title} variant="h4">
+              <Link href={Route.IndexPage} title="Strona główna">
+                <img src="/logo.svg" alt="zdamegzaminzawodowy.pl" />
+                <span>zdamegzaminzawodowy.pl</span>
+              </Link>
+            </Typography>
+          </div>
+        </Toolbar>
+      </Container>
+    </AppBar>
+  );
+};
+
+const useStyles = makeStyles(theme => ({
+  navbar: {
+    '&  a': {
+      transition: 'all .2s',
+      cursor: 'pointer',
+      padding: theme.spacing(0.75, 1),
+    },
+  },
+  title: {
+    '& a': {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      color: 'inherit',
+      '& span': {
+        [theme.breakpoints.down('xs')]: {
+          display: 'none',
+        },
+      },
+    },
+    '& img': {
+      width: theme.spacing(6),
+      marginRight: theme.spacing(1),
+    },
+  },
+}));
+
+export default TopBar;

src/common/Link/Link.tsx

@@ -0,0 +1,49 @@
+import NextLink, { LinkProps as NextLinkProps } from 'next/link';
+import { Link as MUILink, LinkProps as MUILinkProps } from '@material-ui/core';
+
+export type LinkProps = Omit<MUILinkProps, 'href'> &
+  Pick<
+    NextLinkProps,
+    'href' | 'as' | 'replace' | 'scroll' | 'prefetch' | 'shallow' | 'locale'
+  >;
+
+const Link = ({
+  href,
+  as,
+  replace,
+  scroll,
+  prefetch,
+  shallow,
+  locale,
+  children,
+  ...rest
+}: LinkProps) => {
+  if (
+    typeof href === 'string' &&
+    (href.match(/^([a-z0-9]*:|.{0})\/\/.*$/gim) ||
+      href.substr(0, 7) === 'mailto:')
+  ) {
+    return (
+      <MUILink href={href} {...rest}>
+        {children}
+      </MUILink>
+    );
+  }
+
+  return (
+    <NextLink
+      passHref
+      href={href}
+      as={as}
+      replace={replace}
+      scroll={scroll}
+      prefetch={prefetch}
+      shallow={shallow}
+      locale={locale}
+    >
+      <MUILink {...rest}>{children}</MUILink>
+    </NextLink>
+  );
+};
+
+export default Link;

src/config/app.ts

@@ -0,0 +1,4 @@
+export const AUTHOR = {
+  FULL_NAME: 'Dawid Wysokiński',
+  CONTACT: 'https://dwysokinski.me/#contact',
+};

src/config/routing.ts

@@ -0,0 +1,3 @@
+export enum Route {
+  IndexPage = '/',
+}

src/features/IndexPage/IndexPage.tsx

@@ -1,5 +1,7 @@
+import Layout from 'common/Layout/Layout';
+
 const IndexPage = () => {
-  return <div>hello?</div>;
+  return <Layout>hello?</Layout>;
 };
 
 export default IndexPage;