From d32478dd400e9e44f43d7a7fbfae23c53ba5feb9 Mon Sep 17 00:00:00 2001 From: MAXASSASSINS Date: Fri, 1 Dec 2023 00:11:06 +0530 Subject: [PATCH 1/8] add search active & inactive icon --- assets/icons/svg/nav/search-active.svg | 4 ++++ assets/icons/svg/nav/search-inactive.svg | 4 ++++ 2 files changed, 8 insertions(+) create mode 100644 assets/icons/svg/nav/search-active.svg create mode 100644 assets/icons/svg/nav/search-inactive.svg diff --git a/assets/icons/svg/nav/search-active.svg b/assets/icons/svg/nav/search-active.svg new file mode 100644 index 000000000..1f64c1ff9 --- /dev/null +++ b/assets/icons/svg/nav/search-active.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/icons/svg/nav/search-inactive.svg b/assets/icons/svg/nav/search-inactive.svg new file mode 100644 index 000000000..b57d9c8d7 --- /dev/null +++ b/assets/icons/svg/nav/search-inactive.svg @@ -0,0 +1,4 @@ + + + + From 2daedb1c84cf5dacb94f80a9acadc42eb2d76672 Mon Sep 17 00:00:00 2001 From: MAXASSASSINS Date: Fri, 1 Dec 2023 00:12:00 +0530 Subject: [PATCH 2/8] adding mobile only navigation component --- .../MobileBottomNav/MobileBottomNav.tsx | 93 +++++++++++++++++++ 1 file changed, 93 insertions(+) create mode 100644 components/MobileBottomNav/MobileBottomNav.tsx diff --git a/components/MobileBottomNav/MobileBottomNav.tsx b/components/MobileBottomNav/MobileBottomNav.tsx new file mode 100644 index 000000000..f468d68ca --- /dev/null +++ b/components/MobileBottomNav/MobileBottomNav.tsx @@ -0,0 +1,93 @@ +import React, { FC, useEffect, useState } from 'react' +import { useRouter } from 'next/router' +import Link from 'next/link' + +import QuestionMarkIcon from 'assets/icons/svg/question-mark.svg' +import HomeInActiveIcon from 'assets/icons/svg/nav/home-inactive.svg' +import HomeActiveIcon from 'assets/icons/svg/nav/home-active.svg' +import SaveInActiveIcon from 'assets/icons/svg/nav/save-inactive.svg' +import SaveActiveIcon from 'assets/icons/svg/nav/save-active.svg' +import TeamInActiveIcon from 'assets/icons/svg/nav/team-inactive.svg' +import TeamActiveIcon from 'assets/icons/svg/nav/team-active.svg' +import SearchAciveIcon from 'assets/icons/svg/nav/search-active.svg' +import SearchInAciveIcon from 'assets/icons/svg/nav/search-inactive.svg' + +const MobileBottomNav: FC = () => { + const router = useRouter() + + const inActiveIconCls = 'stroke-gray-400' + const activeIconCls = 'fill-primary dark:fill-white' + + const navLinks = [ + { + inActiveIcon: , + activeIcon: , + label: 'Home', + href: '/', + spaceActive: true, + }, + { + inActiveIcon: , + activeIcon: , + label: 'Saved', + href: '/saved', + }, + { + inActiveIcon: , + activeIcon: , + label: 'Search', + }, + { + inActiveIcon: , + activeIcon: , + label: 'Our Team', + href: '/contributors', + }, + ] + + const renderLinks = () => + navLinks.map(({ inActiveIcon, activeIcon, label, href }, i) => { + const checkRoute = (val: string) => router.asPath.startsWith(val) + + const isHomeActive = !checkRoute('/saved') && !checkRoute('/contributors') + const isUrlMatched = href && checkRoute(href) + const isActive = label === 'Home' ? isHomeActive : isUrlMatched + + return ( +
  • + {href ? ( + + + {isActive ? activeIcon : inActiveIcon} + + {label} + + ) : ( +
    + + {inActiveIcon} + + {label} +
    + )} +
    • + ) + }) + + return ( +
    + {renderLinks()} +
    + ) +} + +export default MobileBottomNav From 6edaf7c3615e756a4be7ec5236392d1ce167adcc Mon Sep 17 00:00:00 2001 From: MAXASSASSINS Date: Fri, 1 Dec 2023 00:12:30 +0530 Subject: [PATCH 3/8] fixing css and adding mobile bottom nav comonent --- layouts/GeneralLayout.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/layouts/GeneralLayout.tsx b/layouts/GeneralLayout.tsx index b147de122..d14b0085c 100644 --- a/layouts/GeneralLayout.tsx +++ b/layouts/GeneralLayout.tsx @@ -10,6 +10,7 @@ import { IContext } from 'types' import { GlobalContext } from 'context/GlobalContext' import clsx from 'clsx' import { usePathname } from 'next/navigation' +import MobileBottomNav from 'components/MobileBottomNav/MobileBottomNav' const GeneralLayout = ({ children }: { children: ReactNode }) => { const { sidebar } = useContext(GlobalContext) @@ -20,7 +21,7 @@ const GeneralLayout = ({ children }: { children: ReactNode }) => {
    @@ -38,6 +39,7 @@ const GeneralLayout = ({ children }: { children: ReactNode }) => { > {children}
    +
    From 9d1e8a85191c6fb4bedf96dd28bf38f781d5b237 Mon Sep 17 00:00:00 2001 From: MAXASSASSINS Date: Fri, 1 Dec 2023 01:37:01 +0530 Subject: [PATCH 4/8] fixing width of main linkshub description --- pages/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/index.tsx b/pages/index.tsx index d6bfc6ad6..c142c5133 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -98,7 +98,7 @@ export default function Home() { 👾 -
    +

    {' '} LinksHub aims to provide developers with access to a wide range of From e76115af25829502ad68f3eaf54f00b974efe5cc Mon Sep 17 00:00:00 2001 From: MAXASSASSINS Date: Fri, 1 Dec 2023 18:30:01 +0530 Subject: [PATCH 5/8] add toggleSearch event & extract common class --- .../MobileBottomNav/MobileBottomNav.tsx | 35 ++++++++++--------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/components/MobileBottomNav/MobileBottomNav.tsx b/components/MobileBottomNav/MobileBottomNav.tsx index f468d68ca..f0e51acc7 100644 --- a/components/MobileBottomNav/MobileBottomNav.tsx +++ b/components/MobileBottomNav/MobileBottomNav.tsx @@ -18,6 +18,11 @@ const MobileBottomNav: FC = () => { const inActiveIconCls = 'stroke-gray-400' const activeIconCls = 'fill-primary dark:fill-white' + const toggleSearch = () => { + // write the code here + console.log('hello') + } + const navLinks = [ { inActiveIcon: , @@ -36,6 +41,7 @@ const MobileBottomNav: FC = () => { inActiveIcon: , activeIcon: , label: 'Search', + onclick: toggleSearch, }, { inActiveIcon: , @@ -46,38 +52,33 @@ const MobileBottomNav: FC = () => { ] const renderLinks = () => - navLinks.map(({ inActiveIcon, activeIcon, label, href }, i) => { + navLinks.map(({ inActiveIcon, activeIcon, label, href, onclick }, i) => { const checkRoute = (val: string) => router.asPath.startsWith(val) const isHomeActive = !checkRoute('/saved') && !checkRoute('/contributors') const isUrlMatched = href && checkRoute(href) const isActive = label === 'Home' ? isHomeActive : isUrlMatched + let commonCls = `w-full flex items-center flex-col px-4 p-3 gap-2 font-medium rounded-xl hover:bg-slate-100 hover:bg-opacity-50 dark:hover:bg-zinc-400 dark:hover:bg-opacity-10 ${ + isActive ? 'text-primary dark:text-white' : 'text-gray-400' + }` + return (

  • - {href ? ( - + {onclick ? ( + ) : ( -
    + - {inActiveIcon} + {isActive ? activeIcon : inActiveIcon} {label} -
    + )}
    • ) From 8f78ca1b9e160453d19a6fff5c97f67e7c1d84f5 Mon Sep 17 00:00:00 2001 From: MAXASSASSINS Date: Fri, 1 Dec 2023 18:31:54 +0530 Subject: [PATCH 6/8] fixing the height of main div --- layouts/GeneralLayout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layouts/GeneralLayout.tsx b/layouts/GeneralLayout.tsx index d14b0085c..f1bfcd54c 100644 --- a/layouts/GeneralLayout.tsx +++ b/layouts/GeneralLayout.tsx @@ -21,7 +21,7 @@ const GeneralLayout = ({ children }: { children: ReactNode }) => {
    From 1d8d4f982fe8cfd278508f65a5d4f24fd1d0ec87 Mon Sep 17 00:00:00 2001 From: MAXASSASSINS Date: Fri, 1 Dec 2023 20:29:18 +0530 Subject: [PATCH 7/8] fixing onclick casing --- components/MobileBottomNav/MobileBottomNav.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/MobileBottomNav/MobileBottomNav.tsx b/components/MobileBottomNav/MobileBottomNav.tsx index f0e51acc7..61c656b36 100644 --- a/components/MobileBottomNav/MobileBottomNav.tsx +++ b/components/MobileBottomNav/MobileBottomNav.tsx @@ -41,7 +41,7 @@ const MobileBottomNav: FC = () => { inActiveIcon: , activeIcon: , label: 'Search', - onclick: toggleSearch, + onClick: toggleSearch, }, { inActiveIcon: , @@ -52,7 +52,7 @@ const MobileBottomNav: FC = () => { ] const renderLinks = () => - navLinks.map(({ inActiveIcon, activeIcon, label, href, onclick }, i) => { + navLinks.map(({ inActiveIcon, activeIcon, label, href, onClick }, i) => { const checkRoute = (val: string) => router.asPath.startsWith(val) const isHomeActive = !checkRoute('/saved') && !checkRoute('/contributors') @@ -65,8 +65,8 @@ const MobileBottomNav: FC = () => { return (
  • - {onclick ? ( -