[F003] Dashboard layout

cypress/integration/pages/home/index.spec.ts

@@ -0,0 +1,13 @@
+describe('Dashboard layout', () => {
+  beforeEach(() => {
+    cy.visit('/home');
+  });
+
+  it('should find the header', () => {
+    cy.get('.header').contains('h2', 'Crit');
+  });
+
+  it('should find the side navigation bar', () => {
+    cy.get('.navigation-bar-aside').contains('span', 'Home');
+  });
+});

next.config.js

@@ -3,7 +3,11 @@ const nextConfig = {
   reactStrictMode: true,
 
   env: {
-    BACKEND_API: 'http://localhost:8000'
+    BACKEND_API: 'http://localhost:8000',
+  },
+
+  images: {
+    domains: ['picsum.photos'],
   },
 
   async redirects() {
@@ -12,19 +16,19 @@ const nextConfig = {
         source: '/',
         destination: '/home',
         permanent: true,
-      }
-    ]
+      },
+    ];
   },
 
   webpack(config) {
     config.module.rules.push({
       test: /\.svg$/i,
       issuer: /\.[jt]sx?$/,
       use: ['@svgr/webpack'],
-    })
+    });
 
-    return config
+    return config;
   },
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

package.json

@@ -12,6 +12,7 @@
     "test": "jest"
   },
   "dependencies": {
+    "@headlessui/react": "^1.6.4",
     "@heroicons/react": "^1.0.6",
     "@hookform/resolvers": "^2.8.8",
     "@reduxjs/toolkit": "^1.8.1",

pages/home/index.tsx

@@ -1,9 +1,9 @@
-import Layout from '../../src/layouts/base';
+import Layout from '../../src/layouts/dashboard';
 
 import type { ReactElement } from 'react';
 
 const index = () => {
-  return <div>index</div>;
+  return <div></div>;
 };
 
 index.getLayout = function getLayout(page: ReactElement) {

src/components/Header.tsx

@@ -0,0 +1,41 @@
+import Link from 'next/link';
+import { useState } from 'react';
+import HeaderLobby from './HeaderLobby';
+import HeaderUtilities from './HeaderUtilities';
+import CritSVG from '../../public/images/critLogo.svg';
+
+const Header = () => {
+  const [isLoggedIn, setIsLoggedIn] = useState(true);
+
+  return (
+    <header className="header">
+      <div className="header__left">
+        <Link href={'/home'} passHref>
+          <div className="header__image">
+            <CritSVG />
+            <h2>Crit</h2>
+          </div>
+        </Link>
+        <div className="header__message-of-the-day">
+          <p>Your pretty awesome</p>
+        </div>
+      </div>
+      <div className="header__right">
+        {isLoggedIn ? (
+          <>
+            <HeaderLobby />
+            <HeaderUtilities />
+          </>
+        ) : (
+          <Link href={'/auth/sign-in'} passHref>
+            <button className="header__login-button button button--primary">
+              Login
+            </button>
+          </Link>
+        )}
+      </div>
+    </header>
+  );
+};
+
+export default Header;

src/components/HeaderLobby.tsx

@@ -0,0 +1,54 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+const HeaderLobby = () => {
+  const userList = [
+    {
+      image: 'https://picsum.photos/100',
+      username: 'username',
+    },
+    {
+      image: 'https://picsum.photos/100',
+      username: 'username',
+    },
+    {
+      image: 'https://picsum.photos/100',
+      username: 'username',
+    },
+    {
+      image: 'https://picsum.photos/100',
+      username: 'username',
+    },
+    {
+      image: 'https://picsum.photos/100',
+      username: 'username',
+    },
+  ];
+
+  return (
+    <div className="header-lobby">
+      <ul className="header-lobby__users">
+        {userList.map((user, index) => (
+          <Link href={'/home'} passHref key={index}>
+            <li className="header-lobby__user" key={index}>
+              <div className="header-lobby__user-picture">
+                <Image
+                  src={user.image}
+                  width={30}
+                  height={30}
+                  objectFit={'cover'}
+                  alt={'username'}
+                />
+              </div>
+              <div className="header-lobby__user-hover-name">
+                <span>{user.username}</span>
+              </div>
+            </li>
+          </Link>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default HeaderLobby;

src/components/HeaderUtilities.tsx

@@ -0,0 +1,17 @@
+import { BellIcon } from '@heroicons/react/outline';
+import LogOffIcon from '../../public/icons/logoff.svg';
+
+const HeaderUtilities = () => {
+  return (
+    <div className="header-utilities">
+      <button className="header-utilities__notifications">
+        <BellIcon />
+      </button>
+      <button className="header-utilities__logout">
+        <LogOffIcon />
+      </button>
+    </div>
+  );
+};
+
+export default HeaderUtilities;

src/components/NavigationBarAside.tsx

@@ -0,0 +1,40 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import { useState } from 'react';
+import NavigationBarAsideItems from './NavigationBarAsideItems';
+
+const NavigationBarAside = () => {
+  const [isLoggedIn, setIsLoggedIn] = useState(true);
+
+  return (
+    <aside className="navigation-bar-aside">
+      <div className="navigation-bar-aside__wrapper">
+        <div
+          className={`navigation-bar-aside__profile-block ${
+            isLoggedIn ? 'logged-in' : 'logged-out'
+          }`}
+        >
+          {isLoggedIn ? (
+            <>
+              <div className="navigation-bar-aside__profile-picture">
+                <Image
+                  src={'https://picsum.photos/100'}
+                  width={50}
+                  height={50}
+                  objectFit={'cover'}
+                  alt={'profile picture'}
+                />
+              </div>
+              <Link href={'/home'} passHref>
+                <h3>Aethery</h3>
+              </Link>
+            </>
+          ) : null}
+        </div>
+        <NavigationBarAsideItems />
+      </div>
+    </aside>
+  );
+};
+
+export default NavigationBarAside;

src/components/NavigationBarAsideItems.tsx

@@ -0,0 +1,59 @@
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { HomeIcon, UserCircleIcon, UsersIcon } from '@heroicons/react/solid';
+import { ClockIcon, HashtagIcon, TagIcon } from '@heroicons/react/outline';
+
+const NavigationBarAsideItems = () => {
+  const router = useRouter();
+  const navigationItems = [
+    {
+      href: '/home',
+      svg: <HomeIcon />,
+      name: 'Home',
+    },
+    {
+      href: '/my-profile',
+      svg: <UserCircleIcon />,
+      name: 'My Profile',
+    },
+    {
+      href: '/activity-feed',
+      svg: <HashtagIcon />,
+      name: 'Activity Feed',
+    },
+    {
+      href: '/trending',
+      svg: <TagIcon />,
+      name: 'Trending',
+    },
+    {
+      href: '/friends',
+      svg: <UsersIcon />,
+      name: 'Friends',
+    },
+    {
+      href: '/lobbies',
+      svg: <ClockIcon />,
+      name: 'Lobbies',
+    },
+  ];
+
+  return (
+    <ul className="navigation-bar-aside-items">
+      {navigationItems.map((item, index) => (
+        <Link key={index} href={item.href} passHref>
+          <li
+            className={`navigation-bar-aside-items__item ${
+              router.pathname.includes(item.href) ? 'active' : ''
+            }`}
+          >
+            {item.svg}
+            <span>{item.name}</span>
+          </li>
+        </Link>
+      ))}
+    </ul>
+  );
+};
+
+export default NavigationBarAsideItems;

src/components/UtilityWheel.tsx

@@ -0,0 +1,13 @@
+import { ChatIcon } from '@heroicons/react/outline';
+
+const UtilityWheel = () => {
+  return (
+    <aside className="utility-wheel">
+      <button className="utility-wheel__chat">
+        <ChatIcon />
+      </button>
+    </aside>
+  );
+};
+
+export default UtilityWheel;

src/helpers/setPageTitle.ts

@@ -1,17 +1,17 @@
-import { useEffect } from "react";
+import { useEffect } from 'react';
 
-export const PageTitle = (router: {pathname: string}) => {
-  const currentURL = router.pathname
-  const pageURL = currentURL.replace(/\//g, "") + "-page"
-  const routeTitle = currentURL.replace(/\//g, "")
+export const PageTitle = (router: { pathname: string }) => {
+  const currentURL = router.pathname;
+  const pageURL = currentURL.replace(/\//g, '') + '-page';
+  const routeTitle = currentURL.replace(/\//g, '');
 
   useEffect(() => {
-    document.querySelector<HTMLElement>("body")!.classList.add(pageURL)
-  })
+    document.querySelector<HTMLElement>('body')!.classList.add(pageURL);
+  });
 
   const capitalizeFirstLetter = (URL: string) => {
-    return URL.charAt(0).toUpperCase() + URL.slice(1)
-  }
+    return URL.charAt(0).toUpperCase() + URL.slice(1);
+  };
 
-  return capitalizeFirstLetter(routeTitle)
-}
+  return capitalizeFirstLetter(routeTitle);
+};