refactor: improved mobile nav and made it consitent to sidenav, fixed…

… the isActive functionality for navlinks
theunexpected1 · Feb 12, 2022 · 61ecf05 · 61ecf05
1 parent 24f0930
commit 61ecf05
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 39 deletions.
diff --git a/contentlayer.config.ts b/contentlayer.config.ts
@@ -77,7 +77,7 @@ const Doc = defineDocumentType(() => ({
 
 const FAQ = defineDocumentType(() => ({
   name: 'FAQ',
-  filePathPattern: 'faqs/*.mdx',
+  filePathPattern: 'faq/*.mdx',
   bodyType: 'mdx',
   fields: {
     title: { type: 'string', required: true },

diff --git a/pages/faqs/[[...slug]].tsx → pages/faq/[[...slug]].tsx b/pages/faqs/[[...slug]].tsx → pages/faq/[[...slug]].tsx
@@ -17,7 +17,7 @@ export default function Page({ faq }: { faq: FAQ }) {
 export const getStaticPaths: GetStaticPaths = async () => {
   const faqs = allFAQs
     .map((t) =>
-      t._id.replace('faqs/', '').replace('.mdx', '').replace('index', ''),
+      t._id.replace('faq/', '').replace('.mdx', '').replace('index', ''),
     )
     .map((id) => ({ params: { slug: id.split('/') } }))
   return { paths: faqs, fallback: false }

diff --git a/pages/faqs/index.mdx → pages/faq/index.mdx b/pages/faqs/index.mdx → pages/faq/index.mdx
diff --git a/src/components/mobile-nav.tsx b/src/components/mobile-nav.tsx
@@ -11,6 +11,7 @@ import {
   IconButtonProps,
   useBreakpointValue,
   useColorModeValue,
+  useId,
   useUpdateEffect,
 } from '@chakra-ui/react'
 import { AnimatePresence, motion, useElementScroll } from 'framer-motion'
@@ -21,9 +22,12 @@ import { useRouter } from 'next/router'
 import { AiOutlineMenu } from 'react-icons/ai'
 import { RemoveScroll } from 'react-remove-scroll'
 import Logo from './logo'
-import { SidebarContent } from './sidebar/sidebar'
+import {
+  isMainNavLinkActive,
+  mainNavLinks,
+  SidebarContent,
+} from './sidebar/sidebar'
 import SponsorButton from './sponsor-button'
-import { t } from 'utils/i18n'
 import { forwardRef, ReactNode, Ref, useEffect, useRef, useState } from 'react'
 
 type NavLinkProps = {
@@ -32,15 +36,10 @@ type NavLinkProps = {
 }
 
 function NavLink({ href, children }: NavLinkProps) {
-  const { pathname } = useRouter()
+  const { asPath } = useRouter()
   const bgActiveHoverColor = useColorModeValue('gray.100', 'whiteAlpha.100')
 
-  const [, group, category] = href.split('/')
-  const isActive = pathname.includes(
-    href.split('/').length > 3 ? `${group}/${category}` : group,
-  )
-
-  console.log(isActive)
+  const isActive = isMainNavLinkActive(href, asPath)
 
   return (
     <GridItem as={NextLink} href={href}>
@@ -74,6 +73,7 @@ export function MobileNavContent(props: MobileNavContentProps) {
   const closeBtnRef = useRef<HTMLButtonElement>()
   const { pathname } = useRouter()
   const bgColor = useColorModeValue('white', 'gray.800')
+  const id = useId()
 
   useRouteChanged(onClose)
 
@@ -137,28 +137,11 @@ export function MobileNavContent(props: MobileNavContentProps) {
                   templateColumns='repeat(2, 1fr)'
                   gap='2'
                 >
-                  <NavLink href='/guides/installation'>
-                    {t('component.mobile-nav.getting-started')}
-                  </NavLink>
-                  <NavLink href='/docs/api/overview'>
-                    {t('component.mobile-nav.api')}
-                  </NavLink>
-                  <NavLink href='/docs/components/overview'>
-                    {t('component.mobile-nav.components')}
-                  </NavLink>
-                  <NavLink href='/resources'>
-                    {t('component.mobile-nav.resources')}
-                  </NavLink>
-                  <NavLink href='/faq'>{t('component.mobile-nav.faq')}</NavLink>
-                  <NavLink href='/changelog'>
-                    {t('component.mobile-nav.changelog')}
-                  </NavLink>
-                  <NavLink href='/team'>
-                    {t('component.mobile-nav.team')}
-                  </NavLink>
-                  <NavLink href='/showcase'>
-                    {t('component.mobile-nav.showcase')}
-                  </NavLink>
+                  {mainNavLinks.map((item) => (
+                    <NavLink href={item.href} key={item.label}>
+                      {item.label}
+                    </NavLink>
+                  ))}
                 </Grid>
               </Box>
 

diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx
@@ -36,6 +36,7 @@ type MainNavLinkProps = {
   href: string
   icon: ReactElement
   children: ReactNode
+  label?: string
 }
 
 export function SidebarContent(props: SidebarContentProps) {
@@ -111,12 +112,17 @@ export function SidebarContent(props: SidebarContentProps) {
   )
 }
 
-const MainNavLink = ({ href, icon, children }: MainNavLinkProps) => {
-  const { pathname } = useRouter()
+export const isMainNavLinkActive = (href: string, path: string) => {
   const [, group, category] = href.split('/')
-  const active = pathname.includes(
+
+  return path.includes(
     href.split('/').length > 3 ? `${group}/${category}` : group,
   )
+}
+
+const MainNavLink = ({ href, icon, children }: MainNavLinkProps) => {
+  const { asPath } = useRouter()
+  const active = isMainNavLinkActive(href, asPath)
   const linkColor = useColorModeValue('gray.900', 'whiteAlpha.900')
 
   return (
@@ -140,7 +146,7 @@ const MainNavLink = ({ href, icon, children }: MainNavLinkProps) => {
   )
 }
 
-const mainNavLinks = [
+export const mainNavLinks = [
   {
     icon: <GuidesIcon />,
     href: '/guides/installation',
@@ -163,7 +169,7 @@ const mainNavLinks = [
   },
   {
     icon: <FaQuestionCircle color='white' />,
-    href: '/faqs',
+    href: '/faq',
     label: 'FAQ',
   },
   {
@@ -188,7 +194,7 @@ const MainNavLinkGroup = (props: ListProps) => {
     <List spacing='4' styleType='none' {...props}>
       {mainNavLinks.map((item) => (
         <ListItem key={item.label}>
-          <MainNavLink icon={item.icon} href={item.href}>
+          <MainNavLink icon={item.icon} href={item.href} label={item.label}>
             {item.label}
           </MainNavLink>
         </ListItem>