Merge pull request #55 from placetopay-org/feature/TA-2969-subsection…

…-responsive-design feat: add subsections design in responsive mode
placetopay-org · Jun 7, 2024 · 62fa762 · 62fa762
2 parents b050848 + 024169d
commit 62fa762
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 8 deletions.
diff --git a/src/components/Navigation.jsx b/src/components/Navigation.jsx
@@ -1,8 +1,10 @@
 import { useRef } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
+import { twMerge } from 'tailwind-merge'
 import clsx from 'clsx'
 import { AnimatePresence, motion, useIsPresent } from 'framer-motion'
+import { TAB_NAVIGATION } from '@/constants/navigations'
 
 import { useLocalizePath } from '@/hooks/useLocalizePath'
 import { useNamespaceRoute, useNavigation } from '@/hooks/useNavigation'
@@ -12,18 +14,22 @@ import { Tag } from '@/components/Tag'
 import { remToPx } from '@/lib/remToPx'
 import { useLocale } from './LocaleProvider'
 import { NamespaceSelector } from './SelectMenu'
+import { useTabRouter } from './TabProvider'
 
 function useInitialValue(value, condition = true) {
   let initialValue = useRef(value).current
   return condition ? initialValue : value
 }
 
-function TopLevelNavItem({ href, children }) {
+function TopLevelNavItem({ href, children, isActive }) {
   return (
     <li className="md:hidden">
       <Link
         href={href}
-        className="block py-1 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
+        className={twMerge(
+          'flex gap-2 w-full py-1 text-gray-600 font-medium text-base transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white',
+          isActive && 'text-primary-500 dark:text-primary-400'
+        )}
       >
         {children}
       </Link>
@@ -71,9 +77,10 @@ function VisibleSectionHighlight({ group, pathname, withSections = false }) {
     )
   )
   let itemHeight = remToPx(2)
-  let height = isPresent && withSections
-    ? Math.max(1, visibleSections.length) * itemHeight
-    : itemHeight
+  let height =
+    isPresent && withSections
+      ? Math.max(1, visibleSections.length) * itemHeight
+      : itemHeight
   let top = group.links.findIndex((link) => link.href === pathname) * itemHeight
 
   if (withSections) {
@@ -208,13 +215,36 @@ function NavigationGroup({ group, className, withSections = false }) {
   )
 }
 
+function SubSectionNavigation() {
+  const { tab, active } = useTabRouter()
+  if (tab === undefined) return null
+
+  const navs = TAB_NAVIGATION[tab.basePath][tab.locale]
+
+  return (
+    <>
+      {navs.map((item) => (
+        <TopLevelNavItem
+          key={item.href}
+          href={item.href}
+          isActive={active === item.identifier}
+        >
+          <item.icon size="24" />
+          {item.title}
+        </TopLevelNavItem>
+      ))}
+    </>
+  )
+}
+
 export function Navigation({ withSections, ...props }) {
   let navigation = useNavigation(useNamespaceRoute())
 
   return (
     <nav {...props}>
       <NamespaceSelector />
-      <ul role="list">
+      <ul role="list" className="mt-6 md:mt-0">
+        <SubSectionNavigation />
         {/* <TopLevelNavItem href="/">API</TopLevelNavItem> */}
         {/* <TopLevelNavItem href="#">Documentation</TopLevelNavItem> */}
         {/* <TopLevelNavItem href="#">Support</TopLevelNavItem> */}
@@ -252,7 +282,12 @@ export function ContentNavigation(props) {
   if (sections.length === 0) return null
 
   return (
-    <aside as="aside" role="navigation" aria-label="Page navigation" className="hidden sticky lg:block top-20 h-full w-52 xl:w-60 min-w-[160px] flex-none pl-8 pb-2">
+    <aside
+      as="aside"
+      role="navigation"
+      aria-label="Page navigation"
+      className="sticky top-20 hidden h-full w-52 min-w-[160px] flex-none pb-2 pl-8 lg:block xl:w-60"
+    >
       <div className="block overflow-y-auto">
         <div className="">
           <h5 className="whitespace-normal pb-3 font-semibold uppercase text-gray-900 dark:text-gray-100">

diff --git a/src/components/SelectMenu.jsx b/src/components/SelectMenu.jsx
@@ -91,7 +91,7 @@ export const NamespaceSelector = () => {
     <Listbox value={selected} onChange={onChange}>
       {({ open }) => (
         <div className="relative mt-2 lg:mb-8 lg:mt-8">
-          <Listbox.Button className="flex max-h-16 w-full cursor-pointer items-center gap-3 rounded-lg bg-transparent p-2 text-left transition-colors hover:bg-gray-100 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-600 dark:text-white hover:dark:bg-gray-800">
+          <Listbox.Button className="flex max-h-16 w-full cursor-pointer items-center gap-3 rounded-lg bg-transparent p-2 pl-0 text-left transition-colors hover:bg-gray-100 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-600 dark:text-white hover:dark:bg-gray-800">
             <OptionSelector item={selected} iconClass="text-gray-400" />
             <span className="pointer-events-none flex items-center">
               <ChevronDownIcon

diff --git a/src/constants/navigations.js b/src/constants/navigations.js
@@ -1,4 +1,5 @@
 import { LANGUAGES_CODES } from '@/components/LocaleProvider'
+import { Book, DocumentCode } from 'iconsax-react'
 
 export const TAB_NAVIGATION = {
   checkout: {
@@ -7,6 +8,7 @@ export const TAB_NAVIGATION = {
         title: 'Documentación',
         identifier: 'checkout',
         href: '/checkout',
+        icon: Book,
         links: [
           {
             title: 'Checkout',
@@ -47,6 +49,7 @@ export const TAB_NAVIGATION = {
         title: 'API',
         identifier: 'checkout/api',
         href: '/checkout/api/reference/session',
+        icon: DocumentCode,
         links: [
           {
             title: 'Introducción',
@@ -71,6 +74,7 @@ export const TAB_NAVIGATION = {
         title: 'Documentation',
         identifier: 'checkout',
         href: '/en/checkout',
+        icon: Book,
         links: [
           {
             title: 'Checkout',
@@ -115,6 +119,7 @@ export const TAB_NAVIGATION = {
         title: 'API',
         identifier: 'checkout/api',
         href: '/checkout/api/reference/session',
+        icon: DocumentCode,
         links: [
           {
             title: 'Introduction',
@@ -141,6 +146,7 @@ export const TAB_NAVIGATION = {
         title: 'Documentación',
         identifier: 'gateway',
         href: '/gateway',
+        icon: Book,
         links: [
           {
             title: 'Gateway',
@@ -187,6 +193,7 @@ export const TAB_NAVIGATION = {
         title: 'API',
         identifier: 'gateway/api',
         href: '/gateway/api/reference/information',
+        icon: DocumentCode,
         links: [
           {
             title: 'Introducción',
@@ -229,6 +236,7 @@ export const TAB_NAVIGATION = {
         title: 'Documentation',
         identifier: 'gateway',
         href: '/en/gateway',
+        icon: Book,
         links: [
           {
             title: 'Gateway',
@@ -266,6 +274,7 @@ export const TAB_NAVIGATION = {
         title: 'API',
         identifier: 'gateway/api',
         href: '/gateway/api/reference/information',
+        icon: DocumentCode,
         links: [
           {
             title: 'Introduction',