feat: add page header

.eslintrc.json

@@ -19,7 +19,8 @@
   "rules": {
     "react-hooks/exhaustive-deps": "error",
     "react/display-name": "error",
-    "react/jsx-curly-brace-presence": ["error", "never"]
+    "react/jsx-curly-brace-presence": ["error", "never"],
+    "jsx-a11y/anchor-is-valid": "off"
   },
   "ignorePatterns": [
     "src/**/*.test.ts",

components/generic/Header/Header.tsx

@@ -1,12 +1,43 @@
+import { useCallback, useState } from 'react';
+import { clsx as cx } from 'clsx';
+
 import { Container } from '../Container/Container';
 import { MenuIcon } from '../Icons/MenuIcon';
+import { NotificationsIcon } from '../Icons/NotificationsIcon';
+import { AccountIcon } from '../Icons/AccountIcon';
+import { HeaderLink } from './HeaderLink';
 
 export const Header = () => {
+  const [mobileMenuOpened, setMobileMenuOpened] = useState(false);
+  const toggleMobileMenu = useCallback(() => setMobileMenuOpened((p) => !p), []);
+
   return (
     <header className="bg-gray-50">
-      <Container className="py-4 sm:py-5 lg:py-6" as="nav">
-        <MenuIcon width={24} height={24} />
-        <div></div>
+      <Container
+        className="py-4 sm:py-5 lg:py-6 sm:flex sm:flex-row-reverse sm:justify-between"
+        as="nav"
+      >
+        <div className="w-full flex justify-between items-center sm:w-fit">
+          <button className="sm:hidden" onClick={toggleMobileMenu}>
+            <MenuIcon />
+            <span className="sr-only">Otwórz menu nawigacyjne strony.</span>
+          </button>
+          <div className="flex gap-3">
+            <NotificationsIcon className="lg:w-8 lg:h-8" />
+            <AccountIcon className="lg:w-8 lg:h-8" />
+          </div>
+        </div>
+
+        <ul
+          className={cx(
+            mobileMenuOpened ? 'flex' : 'hidden sm:flex',
+            'flex-col gap-1 pt-4 sm:flex-row sm:gap-2 sm:pt-0',
+          )}
+        >
+          <HeaderLink href="/" content="Indeks" />
+          <HeaderLink href="#" content="Twoje społeczności" />
+          <HeaderLink href="#" content="Budżety lokalne" />
+        </ul>
       </Container>
     </header>
   );

components/generic/Header/HeaderLink.tsx

@@ -0,0 +1,33 @@
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { clsx as cx } from 'clsx';
+
+type HeaderLinkProps = {
+  href: string;
+  content: string;
+};
+
+export const HeaderLink = ({ href, content }: HeaderLinkProps) => {
+  const router = useRouter();
+  const active = router.asPath === href;
+
+  return (
+    <li
+      className={cx(
+        'w-full px-3 py-2 rounded sm:w-fit sm:px-2 sm:py-1.5 lg:px-4 lg:py-3',
+        active && 'bg-gray-200',
+      )}
+    >
+      <Link href={href}>
+        <a
+          className={cx(
+            'text-xs font-normal lg:text-base',
+            active ? 'text-gray-900' : 'text-gray-700',
+          )}
+        >
+          {content}
+        </a>
+      </Link>
+    </li>
+  );
+};

components/generic/Icons/AccountIcon.tsx

@@ -0,0 +1,27 @@
+import { clsx as cx } from 'clsx';
+import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from './constants';
+
+type AccountIconProps = {
+  width?: number;
+  height?: number;
+  className?: string;
+};
+
+export const AccountIcon = ({
+  width = DEFAULT_WIDTH,
+  height = DEFAULT_HEIGHT,
+  className,
+}: AccountIconProps) => {
+  return (
+    <svg
+      className={cx('fill-gray-600', className)}
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+    >
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v2c0 .55.45 1 1 1h14c.55 0 1-.45 1-1v-2c0-2.66-5.33-4-8-4z" />
+    </svg>
+  );
+};

components/generic/Icons/MenuIcon.tsx

@@ -1,21 +1,27 @@
 import { clsx as cx } from 'clsx';
+import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from './constants';
 
 type MenuIconProps = {
-  width: number;
-  height: number;
+  width?: number;
+  height?: number;
   className?: string;
 };
 
-export const MenuIcon = ({ width, height, className }: MenuIconProps) => {
+export const MenuIcon = ({
+  width = DEFAULT_WIDTH,
+  height = DEFAULT_HEIGHT,
+  className,
+}: MenuIconProps) => {
   return (
     <svg
-      className={cx('fill-gray-700', className)}
+      className={cx('fill-gray-600', className)}
       xmlns="http://www.w3.org/2000/svg"
       width={width}
       height={height}
       viewBox="0 0 24 24"
     >
-      <path d="M3 18v-2h18v2Zm0-5v-2h18v2Zm0-5V6h18v2Z" />
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path d="M4 18h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-5h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zM3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z" />
     </svg>
   );
 };

components/generic/Icons/NotificationsIcon.tsx

@@ -0,0 +1,27 @@
+import { clsx as cx } from 'clsx';
+import { DEFAULT_WIDTH, DEFAULT_HEIGHT } from './constants';
+
+type NotificationsIconProps = {
+  width?: number;
+  height?: number;
+  className?: string;
+};
+
+export const NotificationsIcon = ({
+  width = DEFAULT_WIDTH,
+  height = DEFAULT_HEIGHT,
+  className,
+}: NotificationsIconProps) => {
+  return (
+    <svg
+      className={cx('fill-gray-600', className)}
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+    >
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path d="M19.29 17.29L18 16v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-1.29 1.29c-.63.63-.19 1.71.7 1.71h13.17c.9 0 1.34-1.08.71-1.71zM16 17H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6zm-4 5c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2z" />
+    </svg>
+  );
+};

components/generic/Icons/UnfoldMoreIcon.tsx

@@ -1,12 +1,17 @@
 import { clsx as cx } from 'clsx';
+import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from './constants';
 
 type UnfoldMoreIconProps = {
-  width: number;
-  height: number;
+  width?: number;
+  height?: number;
   className?: string;
 };
 
-export const UnfoldMoreIcon = ({ width, height, className }: UnfoldMoreIconProps) => {
+export const UnfoldMoreIcon = ({
+  width = DEFAULT_WIDTH,
+  height = DEFAULT_HEIGHT,
+  className,
+}: UnfoldMoreIconProps) => {
   return (
     <svg
       className={cx('fill-gray-700', className)}

components/generic/Icons/constants.ts

@@ -0,0 +1,2 @@
+export const DEFAULT_WIDTH = 24;
+export const DEFAULT_HEIGHT = 24;

components/generic/Layout/Layout.tsx → components/generic/MainLayout/MainLayout.tsx

@@ -2,14 +2,14 @@ import { Container } from '../Container/Container';
 import { Footer } from '../Footer/Footer';
 import { Header } from '../Header/Header';
 
-type LayoutProps = {
+type MainLayoutProps = {
   children: React.ReactNode;
 };
 
-export const Layout = ({ children }: LayoutProps) => {
+export const MainLayout = ({ children }: MainLayoutProps) => {
   return (
     <div className="min-h-screen flex flex-col justify-between">
-      <div className="flex flex-col">
+      <div className="flex flex-col pb-16">
         <Header />
         <Container as="main" className="py-10 sm:py-12 lg:py-16">
           {children}

pages/index.tsx

@@ -1,22 +1,16 @@
 import type { NextPage } from 'next';
 import Head from 'next/head';
-import { Auth } from '../components/generic/Auth/Auth';
-import { useUser } from '../hooks/useUser';
+import { MainLayout } from '../components/generic/MainLayout/MainLayout';
 
 const Home: NextPage = () => {
-  const { user } = useUser();
   return (
-    <div>
+    <MainLayout>
       <Head>
         <title>Create Next App</title>
         <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <main>
-        <Auth>Witaj świecie {user?.email}</Auth>
-      </main>
-      <footer></footer>
-    </div>
+    </MainLayout>
   );
 };
 

pages/signin.tsx

@@ -1,16 +1,16 @@
 import { NextPage } from 'next';
 import Head from 'next/head';
 import { SignInPage } from '../components/composited/SignInPage/SignInPage';
-import { Layout } from '../components/generic/Layout/Layout';
+import { Container } from '../components/generic/Container/Container';
 
 const SignIn: NextPage = () => {
   return (
-    <Layout>
+    <Container as="main" className="py-10 sm:py-12 lg:py-16">
       <Head>
         <title>Zaloguj się - My Local Circle</title>
       </Head>
       <SignInPage />
-    </Layout>
+    </Container>
   );
 };
 

pages/signup.tsx

@@ -1,16 +1,16 @@
 import { NextPage } from 'next';
 import Head from 'next/head';
 import { SignUpPage } from '../components/composited/SignUpPage/SignUpPage';
-import { Layout } from '../components/generic/Layout/Layout';
+import { Container } from '../components/generic/Container/Container';
 
 const SignIn: NextPage = () => {
   return (
-    <Layout>
+    <Container as="main" className="py-10 sm:py-12 lg:py-16">
       <Head>
         <title>Zarejestruj się - My Local Circle</title>
       </Head>
       <SignUpPage />
-    </Layout>
+    </Container>
   );
 };