Added navigation for mobile devices

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: <HomeInActiveIcon className={inActiveIconCls} />,
+      activeIcon: <HomeActiveIcon className={activeIconCls} />,
+      label: 'Home',
+      href: '/',
+      spaceActive: true,
+    },
+    {
+      inActiveIcon: <SaveInActiveIcon className={inActiveIconCls} />,
+      activeIcon: <SaveActiveIcon className={activeIconCls} />,
+      label: 'Saved',
+      href: '/saved',
+    },
+    {
+      inActiveIcon: <SearchInAciveIcon className={inActiveIconCls} />,
+      activeIcon: <SearchAciveIcon className={activeIconCls} />,
+      label: 'Search',
+    },
+    {
+      inActiveIcon: <TeamInActiveIcon className={inActiveIconCls} />,
+      activeIcon: <TeamActiveIcon className={activeIconCls} />,
+      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 (
+        <li key={i} className="list-none">
+          {href ? (
+            <Link
+              href={href}
+              className={`w-full flex 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'
+              }`}
+            >
+              <span className="flex items-center justify-center">
+                {isActive ? activeIcon : inActiveIcon}
+              </span>
+              <span className="text-xs">{label}</span>
+            </Link>
+          ) : (
+            <div
+              className={`w-full flex 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'
+              }`}
+            >
+              <span className="flex items-center justify-center">
+                {inActiveIcon}
+              </span>
+              <span className="text-xs">{label}</span>
+            </div>
+          )}
+        </li>
+      )
+    })
+
+  return (
+    <div className="sm:hidden -ml-4 fixed z-30 bottom-0 py-2 w-full flex gap-4 justify-evenly bg-white dark:bg-slate-800">
+      {renderLinks()}
+    </div>
+  )
+}
+
+export default MobileBottomNav

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<IContext>(GlobalContext)
@@ -20,7 +21,7 @@ const GeneralLayout = ({ children }: { children: ReactNode }) => {
       <Header />
       <SideNavbar />
       <div
-        className={`row-start-2 row-end-3 min-h-[100vh-72px] w-full bg-gray-100 dark:bg-[#101623] ${
+        className={`row-start-2 row-end-3 overflow-y-scroll max-h-[calc(100vh-156px)] sm:max-h-[calc(100vh-72px)] w-full bg-gray-100 dark:bg-[#101623] ${
           sidebar ? 'max-[1024px]:overflow-hidden' : ''
         }`}
       >
@@ -38,6 +39,7 @@ const GeneralLayout = ({ children }: { children: ReactNode }) => {
         >
           {children}
           <Footer />
+          <MobileBottomNav />
         </main>
       </div>
     </>

pages/index.tsx

@@ -98,7 +98,7 @@ export default function Home() {
             <Logo />
             <span>👾</span>
           </div>
-          <div className="flex flex-col mt-6 justify-center items-start w-96 max-md:w-64">
+          <div className="flex flex-col mt-6 justify-center items-start max-w-sm">
             <p className="text-md">
               {' '}
               LinksHub aims to provide developers with access to a wide range of