feat: add searchbar for mobile devices (new design)

components/Aside/Aside.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { SideNavbarBody } from 'components/SideNavbar/SideNavbarBody'
+import  SideNavbarBody  from 'components/SideNavbar/SideNavbarBody'
 
 export const Aside: FC = () => {
   return (

components/MobileBottomNav/MobileBottomNav.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import React, { FC, useContext } from 'react'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
 
@@ -10,16 +10,17 @@ 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'
+import { GlobalContext } from 'context/GlobalContext'
 
 const MobileBottomNav: FC = () => {
   const router = useRouter()
+  const { toggleNav } = useContext(GlobalContext)
 
   const inActiveIconCls = 'stroke-gray-400'
   const activeIconCls = 'fill-primary dark:fill-white'
 
   const toggleSearch = () => {
-    // write the code here
-    console.log('hello')
+    toggleNav?.()
   }
 
   const navLinks = [
@@ -58,9 +59,8 @@ const MobileBottomNav: FC = () => {
       const isUrlMatched = href && checkRoute(href)
       const isActive = label === 'Home' ? isHomeActive : isUrlMatched
 
-      const 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'
-      }`
+      const 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 (
         <li key={i} className="list-none">

components/Searchbar/ShortcutKey.tsx

@@ -26,7 +26,7 @@ const ShortcutKey: FC = () => {
   return (
     <span
       className={clsx(
-        'absolute top-[11px] right-4 flex items-center justifiy-center px-2.5 py-[3px] gap-2.5 bg-white dark:bg-gray-800 rounded-md border border-zinc-400 border-opacity-40 text-zinc-400 dark:text-neutral-200 text-sm font-medium peer-focus:hidden select-none',
+        'absolute top-[11px] right-4 hidden sm:flex items-center justifiy-center px-2.5 py-[3px] gap-2.5 bg-white dark:bg-gray-800 rounded-md border border-zinc-400 border-opacity-40 text-zinc-400 dark:text-neutral-200 text-sm font-medium peer-focus:hidden select-none',
         isMac ? 'tracking-[2.80px]' : 'text-[12px]'
       )}
     >

components/SideNavbar/SideNavbar.tsx

@@ -2,12 +2,10 @@ import { FC } from 'react'
 import { useContext } from 'react'
 import { GlobalContext } from 'context/GlobalContext'
 import { Backdrop } from 'components/Backdrop/Backdrop'
-import { SideNavbarHeader } from './SideNavbarHeader'
-import { SideNavbarBody } from './SideNavbarBody'
 import { createPortal } from 'react-dom'
-import { SocialMediaIconsList } from 'components/SocialMedia/SocialMediaIconsList'
 import useDelayUnmount from 'hooks/useDelayUnmount'
 import { IContext } from 'types'
+import SideNavbarBody from './SideNavbarBody'
 
 export const SideNavbar: FC = () => {
   const { sidebar, closeNav } = useContext<IContext>(GlobalContext)
@@ -31,16 +29,10 @@ export const SideNavbar: FC = () => {
       />
       {createPortal(
         <div
-          className={`absolute top-0 left-0 z-[100] h-full w-full folding:w-[310px] transition-all lg:hidden
+          className={`absolute top-0 left-0 z-[100] h-min w-screen transition-all lg:hidden
           ${sidebar ? 'animate-slide-in' : 'animate-slide-out'}
           `}
         >
-          <SideNavbarHeader />
-          <SocialMediaIconsList
-            className="bg-light-primary px-6 py-2 dark:bg-dark"
-            showGithubButtons={true} // to show the Star & Fork Button below social media icons
-            sidebar={true}
-          />
           <SideNavbarBody />
         </div>,
         overlayRoot

components/SideNavbar/SideNavbarBody.tsx

@@ -1,32 +1,33 @@
-import { FC, memo, useRef } from 'react'
+import { memo, useRef, FC } from 'react'
+
 import { Searchbar } from 'components/Searchbar/Searchbar'
-import classNames from 'classnames'
-import { useTheme } from 'next-themes'
-import { SideNavbarCategoryList } from './SideNavbarCategoryList'
+import { SideNavbarCategoryList } from 'components/SideNavbar/SideNavbarCategoryList'
+const MemoizedSideNavbarCategoryList = memo(SideNavbarCategoryList)
+
 import { useSearchReducer } from 'hooks/useSearchReducer'
 import useSearchShortcut from 'hooks/useSearchShortcut'
-const MemoizedSideNavbarCategoryList = memo(SideNavbarCategoryList)
 
-export const SideNavbarBody: FC = () => {
-  const { theme } = useTheme()
-  const [searchState, dispatchSearch] = useSearchReducer()
+const SideNavbarBody: FC = () => {
   const inputRef: React.RefObject<HTMLInputElement> = useRef(null)
   useSearchShortcut({ inputRef })
+
+  const [searchState, dispatchSearch] = useSearchReducer()
+
   return (
-    <div
-      className={classNames(
-        `bg-[rgba(243,244,246,1)] h-full w-full overflow-x-hidden whitespace-nowrap dark:bg-dark dark:text-text-primary`,
-        theme === 'light' ? 'scrollColorLight' : 'scrollColorDark'
-      )}
-    >
-      <div className="bg-primary-light transiton-all w-full p-4 transition-none ease-in dark:bg-dark">
+    <div className="fixed top-0 left-0 w-full h-[calc(100vh-80px)] flex flex-col items-start px-6 py-4  gap-4 tall:gap-10 bg-white dark:bg-[#161E2C] shadow-sidebar dark:shadow-none">
+      <div className="w-full flex flex-col gap-4 tall:gap-6">
         <Searchbar
           inputRef={inputRef}
           {...searchState}
           dispatchSearch={dispatchSearch}
         />
       </div>
-      <MemoizedSideNavbarCategoryList query={searchState.categoryQuery} />
+
+      <div className="w-full max-h-[calc(100vh-190px)] h-full flex flex-col items-between gap-2 tall:gap-5">
+        <MemoizedSideNavbarCategoryList query={searchState.categoryQuery} />
+      </div>
     </div>
   )
 }
+
+export default SideNavbarBody

components/SideNavbar/SideNavbarCategoryList.tsx

@@ -32,7 +32,7 @@ export const SideNavbarCategoryList: FC<{
     <ul
       data-custom="restrict-click-outside"
       ref={listRef}
-      className="relative w-full max-h-full flex flex-col sc overflow-y-scroll purpleScrollbar pr-4"
+      className="relative w-full max-h-full flex flex-col sc overflow-y-scroll scrollColorDarkMobile pr-4"
     >
       {categoriesList.map((categoryData) => (
         <SideNavbarCategory

styles/globals.css

@@ -249,3 +249,21 @@ pre {
 .purpleScrollbar::-webkit-scrollbar-thumb:active {
   background-color: #714eff;
 }
+
+/* width */
+
+.scrollColorDarkMobile::-webkit-scrollbar {
+  width: 6px;
+}
+
+/* Track */
+
+.scrollColorDarkMobile::-webkit-scrollbar-track {
+  background: #BDBDBD33;
+}
+
+/* Handle */
+
+.scrollColorDarkMobile::-webkit-scrollbar-thumb {
+  @apply bg-[#304269] dark:bg-white
+}