💄 ♻️ Rework Docs

components/DocumentationNavigation/Breadcrumbs.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
-import { useRouter } from 'next/router'
-import styled from 'styled-components'
-import { matchActualTarget } from 'utils'
+import React from 'react';
+import { useRouter } from 'next/router';
+import styled from 'styled-components';
+import { matchActualTarget } from 'utils';
 
 export const ChevronRightIcon = ({ ...props }) => (
   <svg
@@ -14,10 +14,10 @@ export const ChevronRightIcon = ({ ...props }) => (
   >
     <path d="M11 24.792L12.2654 26L21.4773 17.2061C22.1747 16.5403 22.1737 15.4588 21.4773 14.7939L12.2654 6L11 7.208L20.2099 16L11 24.792Z" />
   </svg>
-)
+);
 
 export interface DocsNavProps {
-  navItems: any
+  navItems: any;
 }
 
 const getNestedBreadcrumbs = (
@@ -27,38 +27,38 @@ const getNestedBreadcrumbs = (
 ) => {
   for (const listItem of listItems || []) {
     if (matchActualTarget(pagePath, listItem.slug || listItem.href)) {
-      breadcrumbs.push(listItem)
-      return [listItem]
+      breadcrumbs.push(listItem);
+      return [listItem];
     }
     const nestedBreadcrumbs = getNestedBreadcrumbs(
       listItem.items,
       pagePath,
       breadcrumbs
-    )
+    );
     if (nestedBreadcrumbs.length) {
-      return [listItem, ...nestedBreadcrumbs]
+      return [listItem, ...nestedBreadcrumbs];
     }
   }
-  return []
-}
+  return [];
+};
 
 export function Breadcrumbs({ navItems }: DocsNavProps) {
-  const router = useRouter()
-  const breadcrumbs = getNestedBreadcrumbs(navItems, router.asPath) || []
+  const router = useRouter();
+  const breadcrumbs = getNestedBreadcrumbs(navItems, router.asPath) || [];
   return (
     <>
       <BreadcrumbList>
         {breadcrumbs.map((breadcrumb, i) => (
           <li key={breadcrumb.slug}>
             {i != 0 && <ChevronRightIcon />}
-            <a href={breadcrumb.slug}>
+            <a className="hover:text-orange-500" href={breadcrumb.slug}>
               {breadcrumb.title || breadcrumb.category}
             </a>
           </li>
         ))}
       </BreadcrumbList>
     </>
-  )
+  );
 }
 
 const BreadcrumbList = styled.ul`
@@ -107,4 +107,4 @@ const BreadcrumbList = styled.ul`
       opacity: 1 !important;
     }
   }
-`
+`;

components/DocumentationNavigation/DocumentationNavigation.tsx

@@ -11,6 +11,7 @@ import { searchIndices } from '../../components/search/indices';
 import { VersionSelect } from './VersionSelect';
 import { BiMenu } from 'react-icons/bi';
 import { IoMdClose } from 'react-icons/io';
+import { LeftHandSideParentContainer } from 'components/docsSearch/SearchNavigation';
 
 export interface DocsNavProps {
   navItems: any;
@@ -28,30 +29,6 @@ export function DocumentationNavigation({ navItems }: DocsNavProps) {
           onClick={() => setMobileNavIsOpen(!mobileNavIsOpen)}
         />
       )}
-
-      <DocsLeftSidebar open={mobileNavIsOpen}>
-        <DocsSidebarHeaderWrapper>
-          <DocsSidebarHeader>
-            <div className="text-2xl leading-tight mt-2.5 ml-2 font-tuner text-orange-500">
-              Tina Docs
-            </div>
-            <VersionSelect />
-          </DocsSidebarHeader>
-
-
-          <CloseButton mobileNavIsOpen={mobileNavIsOpen} onClick={() => setMobileNavIsOpen(false)}>
-            <IoMdClose className="icon text-orange-500 hover:text-orange-400" />
-          </CloseButton>
-
-          <Search collapse expanded={true} indices={searchIndices} />
-        </DocsSidebarHeaderWrapper>
-
-        {router.isFallback ? (
-          <FallbackPlaceholder />
-        ) : (
-          <DocsNavigationList navItems={navItems} />
-        )}
-      </DocsLeftSidebar>
 
       <Overlay
         open={mobileNavIsOpen}

components/docsMain/directoryOverflowButton.tsx

@@ -0,0 +1,37 @@
+import { DocsNavigationList } from 'components/DocumentationNavigation/DocsNavigationList';
+import { useState } from 'react';
+import { MdMenu } from 'react-icons/md';
+
+
+const DirectoryOverflow = ({ tocData }) => {
+  return (
+    <div className="absolute z-20 bg-white mt-4 rounded-lg w-full p-6 shadow-xl animate-fade-down animate-duration-300 overflow-y-scroll h-96">
+      <DocsNavigationList navItems={tocData.tocData} />
+    </div>
+  );
+};
+
+const DirectoryOverflowButton = (tocData) => {
+  const [isTableOfContentsOpen, setIsTableOfContentsOpen] = useState(false);
+
+  return (
+    <div className="pb-6 w-full">
+      <div
+        className="py-2 px-4 border-slate-400 bg-gradient-to-r from-white/50 to-white/30 rounded-lg shadow-lg cursor-pointer"
+        onClick={() => setIsTableOfContentsOpen(!isTableOfContentsOpen)}
+      >
+        <span className="flex items-center space-x-2 py-1">
+          <MdMenu size={20} className="text-orange-500" />
+          <span className="text-slate-600">Topics</span>
+        </span>
+      </div>
+      {isTableOfContentsOpen && (
+        <div className="w-full relative">
+          <DirectoryOverflow tocData={tocData} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DirectoryOverflowButton;

components/docsMain/docsMainBody.tsx

@@ -0,0 +1,21 @@
+import { Breadcrumbs } from 'components/DocumentationNavigation/Breadcrumbs';
+import DocsMobileHeader from './docsMobileHeader';
+
+const MainDocsBodyHeader = (docData) => {
+  const DocumentTitle = docData.data.new.results.data.doc.title;
+
+  return (
+    <div>
+      {docData.screenSizing && (
+        <DocsMobileHeader data={docData}></DocsMobileHeader>
+      )}
+
+      <Breadcrumbs navItems={docData.data.navDocData.data} />
+      <div className="pt-4 font-tuner text-4xl bg-gradient-to-r from-orange-400 via-orange-500 to-orange-600 bg-clip-text text-transparent">
+        {DocumentTitle}
+      </div>
+    </div>
+  );
+};
+
+export default MainDocsBodyHeader;

components/docsMain/docsMobileHeader.tsx

@@ -0,0 +1,77 @@
+import { LeftHandSideHeader } from 'components/docsSearch/SearchNavigation';
+import { useState } from 'react';
+import { FaChevronRight } from 'react-icons/fa';
+import DirectoryOverflowButton from './directoryOverflowButton';
+
+export const MobileVersionSelect = () => {
+  const versions = [
+    ['v.Latest', 'https://tina.io'],
+    [
+      'v.0.68.13',
+      'https://tinacms-site-next-i08bcbicy-tinacms.vercel.app/docs/',
+    ],
+    ['v.0.67.3', 'https://tinacms-site-next-pu1t2v9y4-tinacms.vercel.app/'],
+    ['v.Pre-Beta', 'https://pre-beta.tina.io/'],
+  ];
+  const [versionSelected, setVersionSelected] = useState(versions[0][0]);
+  const [isOverflowOpen, setIsOverflowOpen] = useState(false);
+
+  const handleVersionClick = (version) => {
+    setVersionSelected(version[0]);
+    setIsOverflowOpen(false);
+
+    if (version[0] !== 'v.Latest') {
+      window.location.href = version[1];
+    }
+  };
+
+  return (
+    <div className="relative">
+      {/* VERSION SELECT PILL BUTTON */}
+      <div
+        className="bg-white cursor-pointer px-4 py-1 rounded-2xl shadow-sm flex justify-center text-center items-center text-stone-600"
+        onClick={() => setIsOverflowOpen(!isOverflowOpen)}
+      >
+        <div>{versionSelected}</div>
+        <div>
+          <FaChevronRight
+            className={`ml-2 transform transition-transform duration-300 ${
+              isOverflowOpen ? 'rotate-90' : ''
+            }`}
+          />
+        </div>
+      </div>
+      {/* VERSION SELECT OVERFLOW */}
+      {isOverflowOpen && (
+        <div className="absolute bg-white shadow-lg mt-2 right-1 rounded-lg w-full z-10 animate-fade-down animate-duration-300">
+          {versions.map((version, index) => (
+            <div
+              key={index}
+              className="px-4 py-2 hover:bg-stone-100 cursor-pointer text-stone-600"
+              onClick={() => handleVersionClick(version)}
+            >
+              {version[0]}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const DocsMobileHeader = (data) => {
+  return (
+    <div className="relative pb-20">
+      <LeftHandSideHeader
+        paddingGlobal="pb-6"
+        headerColour="orange"
+        headerPadding=""
+        searchMargin=""
+        searchBarPadding="py-3"
+      />
+      <DirectoryOverflowButton tocData={data.data.data.navDocData.data} />
+    </div>
+  );
+};
+
+export default DocsMobileHeader;

components/docsMain/tocOverflowButton.tsx

@@ -0,0 +1,52 @@
+import Link from 'next/link';
+import { useState } from 'react';
+import { MdMenu } from 'react-icons/md';
+
+
+const TocOverflow = ({ tocData }) => {
+  return (
+    <div className="absolute z-10 bg-white mt-4 rounded-lg w-full p-6 shadow-lg animate-fade-down animate-duration-300 max-h-96 overflow-y-scroll">
+      {tocData.tocData.map((item, index) => {
+        const textIndentation =
+          item.type === 'h3' ? 'ml-4' : item.type === 'h4' ? 'ml-8' : '';
+
+
+        const linkHref = `#${item.text.replace(/\s+/g, '-').toLowerCase()}`;
+        return (
+          <Link
+            key={index}
+            href={linkHref}
+            className={`block hover:text-orange-500 transition-colors pl-6 ${textIndentation} pb-1`}
+          >
+            {item.text}
+          </Link>
+        );
+      })}
+    </div>
+  );
+};
+
+const TocOverflowButton = (tocData) => {
+  const [isTableOfContentsOpen, setIsTableOfContentsOpen] = useState(false);
+
+  return (
+    <div className="py-6 w-full">
+      <div
+        className="py-2 px-4 border-slate-400 bg-gradient-to-r from-white/50 to-white/30 rounded-lg shadow-lg cursor-pointer"
+        onClick={() => setIsTableOfContentsOpen(!isTableOfContentsOpen)}
+      >
+        <span className="flex items-center space-x-2">
+          <MdMenu size={20} className="text-orange-500" />
+          <span className="text-slate-600 py-1">Table of Contents</span>
+        </span>
+      </div>
+      {isTableOfContentsOpen && (
+        <div className="w-full relative">
+          <TocOverflow tocData={tocData} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TocOverflowButton;

components/docsSearch/SearchNavigation.tsx

@@ -1,5 +1,6 @@
 import { DocsNavigationList } from 'components/DocumentationNavigation/DocsNavigationList';
 import { VersionSelect } from 'components/DocumentationNavigation/VersionSelect';
+import { MobileVersionSelect } from 'components/docsMain/docsMobileHeader';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useState, useEffect, useRef } from 'react';
@@ -146,13 +147,14 @@ export const SearchResultsOverflow = ({ query }) => {
   );
 };
 
-export const LeftHandSideHeader = ({}) => {
+export const LeftHandSideHeader = ({paddingGlobal, headerColour, headerPadding, searchMargin, searchBarPadding}) => {
   const [searchTerm, setSearchTerm] = useState('');
   const [searchResults, setSearchResults] = useState<any>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [userHasTyped, setUserHasTyped] = useState(false);
   const [searchOverFlowOpen, setSearchOverflowOpen] = useState(false);
   const router = useRouter();
+  const headerStyling = headerColour.toLowerCase() === 'blue' ? 'from-blue-600/80 via-blue-800/80 to-blue-1000' : 'from-orange-400 via-orange-500 to-orange-600';
 
   const handleKeyChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchOverflowOpen(true);
@@ -188,19 +190,19 @@ export const LeftHandSideHeader = ({}) => {
   };
 
   return (
-    <div className="p-4 pt-10">
+    <div className={`${paddingGlobal} pt-10`}>
       <div className="flex justify-between">
-        <h1 className="text-3xl pb-4 font-tuner bg-gradient-to-br pl-4 from-blue-600/80 via-blue-800/80 to-blue-1000 bg-clip-text text-transparent">
-          Tina Docs
+        <h1 className={`text-4xl pb-4 font-tuner bg-gradient-to-br ${headerStyling} ${headerPadding}  bg-clip-text text-transparent`}>
+          Docs
         </h1>
         <div className="mr-3">
-          <VersionSelect />
+          <MobileVersionSelect/>
         </div>
       </div>
-      <div className="relative mx-3">
+      <div className={`relative ${searchMargin}`}>
         <input
           type="text"
-          className="w-full p-2 pl-6 rounded-full border border-gray-300/20"
+          className={`w-full p-2 pl-6 rounded-full border border-gray-300/20 bg-white/50 shadow-lg ${searchBarPadding}`}
           placeholder="Search"
           onKeyDown={handleKeyDown}
           onChange={handleKeyChange}
@@ -226,7 +228,7 @@ export const LeftHandSideHeader = ({}) => {
 export const LeftHandSideParentContainer = ({ tableOfContents }) => {
   return (
     <div className="rounded-2xl shadow-xl w-full bg-white/50 ">
-      <LeftHandSideHeader />
+      <LeftHandSideHeader paddingGlobal='p-4' headerColour='blue' headerPadding='pl-4' searchMargin='mx-3' searchBarPadding=''/>
       <div className="overflow-y-scroll overflow-x-hidden max-h-[62vh] 2xl:max-h-[75vh] pl-4 2xl:pl-0 ">
         <DocsNavigationList navItems={tableOfContents} />
       </div>