From 800a7021302d1e2443f658f9b97a2093a4eaf546 Mon Sep 17 00:00:00 2001 From: AetheryNA Date: Sun, 19 Jun 2022 16:22:29 +0530 Subject: [PATCH 01/12] Built the aside navigation bar :) --- next.config.js | 18 +++-- pages/home/index.tsx | 4 +- src/components/NavigationBarAside.tsx | 23 +++++++ src/components/NavigationBarAsideItems.tsx | 65 +++++++++++++++++++ src/helpers/setPageTitle.ts | 22 +++---- src/layouts/authentification.tsx | 16 ++--- src/layouts/base.tsx | 21 ------ src/layouts/dashboard.tsx | 23 +++++++ styles/base/_typography.scss | 3 +- .../_navigation-bar-aside-items.scss | 54 +++++++++++++++ styles/components/_navigation-bar-aside.scss | 28 ++++++++ styles/styles.scss | 2 + 12 files changed, 228 insertions(+), 51 deletions(-) create mode 100644 src/components/NavigationBarAside.tsx create mode 100644 src/components/NavigationBarAsideItems.tsx delete mode 100644 src/layouts/base.tsx create mode 100644 src/layouts/dashboard.tsx create mode 100644 styles/components/_navigation-bar-aside-items.scss create mode 100644 styles/components/_navigation-bar-aside.scss diff --git a/next.config.js b/next.config.js index 3cb4662..a02e862 100644 --- a/next.config.js +++ b/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,8 +16,8 @@ const nextConfig = { source: '/', destination: '/home', permanent: true, - } - ] + }, + ]; }, webpack(config) { @@ -21,10 +25,10 @@ const nextConfig = { test: /\.svg$/i, issuer: /\.[jt]sx?$/, use: ['@svgr/webpack'], - }) + }); - return config + return config; }, -} +}; -module.exports = nextConfig +module.exports = nextConfig; diff --git a/pages/home/index.tsx b/pages/home/index.tsx index 2672e77..21fcf7b 100644 --- a/pages/home/index.tsx +++ b/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
index
; + return
; }; index.getLayout = function getLayout(page: ReactElement) { diff --git a/src/components/NavigationBarAside.tsx b/src/components/NavigationBarAside.tsx new file mode 100644 index 0000000..7e2066d --- /dev/null +++ b/src/components/NavigationBarAside.tsx @@ -0,0 +1,23 @@ +import Image from 'next/image'; +import NavigationBarAsideItems from './NavigationBarAsideItems'; + +const NavigationBarAside = () => { + return ( + + ); +}; + +export default NavigationBarAside; diff --git a/src/components/NavigationBarAsideItems.tsx b/src/components/NavigationBarAsideItems.tsx new file mode 100644 index 0000000..40be494 --- /dev/null +++ b/src/components/NavigationBarAsideItems.tsx @@ -0,0 +1,65 @@ +import Link from 'next/link'; +import { useRouter } from 'next/router'; +import { + HomeIcon, + UserCircleIcon, + HashtagIcon, + TagIcon, + UsersIcon, + ClockIcon, +} from '@heroicons/react/solid'; + +const NavigationBarAsideItems = () => { + const router = useRouter(); + const navigationItems = [ + { + href: '/home', + svg: , + name: 'Home', + }, + { + href: '/my-profile', + svg: , + name: 'My Profile', + }, + { + href: '/activity-feed', + svg: , + name: 'Activity Feed', + }, + { + href: '/trending', + svg: , + name: 'Trending', + }, + { + href: '/friends', + svg: , + name: 'Friends', + }, + { + href: '/lobbies', + svg: , + name: 'Lobbies', + }, + ]; + + return ( +
    + {navigationItems.map((item, index) => ( + +
  • + {item.svg} + {item.name} +
    • + + ))} +
+ ); +}; + +export default NavigationBarAsideItems; diff --git a/src/helpers/setPageTitle.ts b/src/helpers/setPageTitle.ts index e48963f..cd1d0fc 100644 --- a/src/helpers/setPageTitle.ts +++ b/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("body")!.classList.add(pageURL) - }) + document.querySelector('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); +}; diff --git a/src/layouts/authentification.tsx b/src/layouts/authentification.tsx index 0f277e1..c5afdcc 100644 --- a/src/layouts/authentification.tsx +++ b/src/layouts/authentification.tsx @@ -1,21 +1,19 @@ -import Head from "next/head" +import Head from 'next/head'; interface PropsWithChildren { - children: React.ReactNode + children: React.ReactNode; } -const authentification = ({children}: PropsWithChildren) => { +const authentification = ({ children }: PropsWithChildren) => { return ( <> Welcome to CRIT -
- {children} -
+
{children}
- ) -} + ); +}; -export default authentification +export default authentification; diff --git a/src/layouts/base.tsx b/src/layouts/base.tsx deleted file mode 100644 index 0fc8161..0000000 --- a/src/layouts/base.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from 'next/head' - -interface PropsWithChildren { - children: React.ReactNode -} - -const authentification = ({children}: PropsWithChildren) => { - return ( - <> - - Crit - - -
- {children} -
- - ) -} - -export default authentification diff --git a/src/layouts/dashboard.tsx b/src/layouts/dashboard.tsx new file mode 100644 index 0000000..410a1bf --- /dev/null +++ b/src/layouts/dashboard.tsx @@ -0,0 +1,23 @@ +import Head from 'next/head'; +import NavigationBarAside from '../components/NavigationBarAside'; + +interface PropsWithChildren { + children: React.ReactNode; +} + +const dashboard = ({ children }: PropsWithChildren) => { + return ( + <> + + Crit + + +
+ + {children} +
+ + ); +}; + +export default dashboard; diff --git a/styles/base/_typography.scss b/styles/base/_typography.scss index a9bea35..ad0a13d 100644 --- a/styles/base/_typography.scss +++ b/styles/base/_typography.scss @@ -8,7 +8,8 @@ label { h1, h2, -h3 { +h3, +li { @apply font-raleway; } diff --git a/styles/components/_navigation-bar-aside-items.scss b/styles/components/_navigation-bar-aside-items.scss new file mode 100644 index 0000000..909a1e8 --- /dev/null +++ b/styles/components/_navigation-bar-aside-items.scss @@ -0,0 +1,54 @@ +.navigation-bar-aside-items { + @apply pt-9; + + @screen md { + @apply pt-14; + } + + &__item { + @apply text-white font-semibold flex flex-row text-sm items-center cursor-pointer mb-8; + + span { + @apply hidden transition; + + @screen md { + @apply block; + } + } + + svg { + @apply stroke-white w-6 h-6 transition; + + fill: transparent; + + @screen md { + @apply mr-3; + } + } + + &:last-child { + @apply mb-0; + } + + &:hover { + span { + @apply text-primary-default; + } + + svg { + @apply stroke-primary-default; + } + } + + @screen md { + padding-left: 25px; + } + + &.active { + span, + svg { + @apply text-primary-default stroke-primary-default fill-primary-default; + } + } + } +} diff --git a/styles/components/_navigation-bar-aside.scss b/styles/components/_navigation-bar-aside.scss new file mode 100644 index 0000000..3e4b177 --- /dev/null +++ b/styles/components/_navigation-bar-aside.scss @@ -0,0 +1,28 @@ +.navigation-bar-aside { + @apply py-6 pl-3 w-full h-screen; + + max-width: 70px; + + @screen md { + @apply py-10 pl-12; + + max-width: 205px; + } + + &__wrapper { + @apply flex flex-col items-center; + + @screen md { + @apply block; + } + } + + &__profile-picture { + @apply rounded-full; + + img, + span { + @apply rounded-full; + } + } +} diff --git a/styles/styles.scss b/styles/styles.scss index 7ea9023..cfa71a0 100644 --- a/styles/styles.scss +++ b/styles/styles.scss @@ -19,6 +19,8 @@ // Components @import "./components/header"; +@import "./components/navigation-bar-aside"; +@import "./components/navigation-bar-aside-items"; @import "./components/footer"; @import "./components/registration"; @import "./components/registration-form"; From 26c71d179a52adb7890e67214ab25c475a1b0513 Mon Sep 17 00:00:00 2001 From: AetheryNA Date: Sun, 19 Jun 2022 16:28:06 +0530 Subject: [PATCH 02/12] Adjusted SVGs in navigation bar --- src/components/NavigationBarAsideItems.tsx | 10 ++-------- styles/components/_navigation-bar-aside-items.scss | 2 +- 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/src/components/NavigationBarAsideItems.tsx b/src/components/NavigationBarAsideItems.tsx index 40be494..1a62e99 100644 --- a/src/components/NavigationBarAsideItems.tsx +++ b/src/components/NavigationBarAsideItems.tsx @@ -1,13 +1,7 @@ import Link from 'next/link'; import { useRouter } from 'next/router'; -import { - HomeIcon, - UserCircleIcon, - HashtagIcon, - TagIcon, - UsersIcon, - ClockIcon, -} from '@heroicons/react/solid'; +import { HomeIcon, UserCircleIcon, UsersIcon } from '@heroicons/react/solid'; +import { ClockIcon, HashtagIcon, TagIcon } from '@heroicons/react/outline'; const NavigationBarAsideItems = () => { const router = useRouter(); diff --git a/styles/components/_navigation-bar-aside-items.scss b/styles/components/_navigation-bar-aside-items.scss index 909a1e8..2c90e72 100644 --- a/styles/components/_navigation-bar-aside-items.scss +++ b/styles/components/_navigation-bar-aside-items.scss @@ -47,7 +47,7 @@ &.active { span, svg { - @apply text-primary-default stroke-primary-default fill-primary-default; + @apply text-primary-default stroke-primary-default; } } } From e75d15bf2910780d932058aa0c82b392904d9503 Mon Sep 17 00:00:00 2001 From: AetheryNA Date: Sun, 19 Jun 2022 22:12:02 +0530 Subject: [PATCH 03/12] [F003] Navigation bar aside fixes --- package-lock.json | 19 +++++++++++++ package.json | 1 + src/components/NavigationBarAside.tsx | 19 +++++++------ src/layouts/dashboard.tsx | 9 ++++--- .../_navigation-bar-aside-items.scss | 6 +---- styles/components/_navigation-bar-aside.scss | 27 ++++++++++++++++--- 6 files changed, 62 insertions(+), 19 deletions(-) diff --git a/package-lock.json b/package-lock.json index 464db7d..01e2ca9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "client", "version": "0.1.0", "dependencies": { + "@headlessui/react": "^1.6.4", "@heroicons/react": "^1.0.6", "@hookform/resolvers": "^2.8.8", "@reduxjs/toolkit": "^1.8.1", @@ -2027,6 +2028,18 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@headlessui/react": { + "version": "1.6.4", + "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.6.4.tgz", + "integrity": "sha512-0yqz1scwbFtwljmbbKjXsSGl5ABEYNICVHZnMCWo0UtOZodo2Tpu94uOVgCRjRZ77l2WcTi2S0uidINDvG7lsA==", + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": "^16 || ^17 || ^18", + "react-dom": "^16 || ^17 || ^18" + } + }, "node_modules/@heroicons/react": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-1.0.6.tgz", @@ -12140,6 +12153,12 @@ "strip-json-comments": "^3.1.1" } }, + "@headlessui/react": { + "version": "1.6.4", + "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.6.4.tgz", + "integrity": "sha512-0yqz1scwbFtwljmbbKjXsSGl5ABEYNICVHZnMCWo0UtOZodo2Tpu94uOVgCRjRZ77l2WcTi2S0uidINDvG7lsA==", + "requires": {} + }, "@heroicons/react": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-1.0.6.tgz", diff --git a/package.json b/package.json index ea65493..b855b3b 100644 --- a/package.json +++ b/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", diff --git a/src/components/NavigationBarAside.tsx b/src/components/NavigationBarAside.tsx index 7e2066d..ce5f131 100644 --- a/src/components/NavigationBarAside.tsx +++ b/src/components/NavigationBarAside.tsx @@ -5,14 +5,17 @@ const NavigationBarAside = () => { return (