fix(layout): updated site UI and layout, fixed some bugs

fluid-design-io · Aug 25, 2022 · 78e7565 · 78e7565 · vercel · Aug 25, 2022
1 parent fe67a6b
commit 78e7565
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/components/framework/Navbar.tsx b/components/framework/Navbar.tsx
@@ -51,7 +51,7 @@ export const Navbar = ({ sidebar, ...props }) => {
           >
             <div
               ref={menuBarRef}
-              className="flex items-center justify-between border-b border-b-primary-800/5 dark:border-b-primary-50/10 px-4 py-4 pr-[calc(1rem+env(safe-area-inset-right))] sm:!justify-start sm:!space-x-2.5 sm:px-6 sm:!py-2 sm:pr-[calc(1.2rem+env(safe-area-inset-right))] lg:px-8"
+              className="flex items-center justify-between border-b border-b-primary-800/5 dark:border-b-primary-50/10 px-4 py-4 pr-[calc(1rem+env(safe-area-inset-right))] sm:!justify-start sm:!space-x-2.5 sm:px-6 sm:!py-2 sm:pr-[calc(1.2rem+env(safe-area-inset-right))] lg:px-[3.175rem]"
             >
               <div
                 className={`flex flex-grow items-center justify-between space-x-4 sm:!justify-start`}
@@ -95,7 +95,7 @@ export const Navbar = ({ sidebar, ...props }) => {
                       {t("Docs")}
                     </a>
                   </Link>
-                  <div className="h-3 w-0.5 bg-primary-400 dark:bg-primary-500" />
+                  <div className="h-3 w-0.5 bg-primary-400 dark:bg-primary-500 rounded-full" />
                   <a
                     className={clsxm("px-1.5 py-1.5", navBarLinkClassName)}
                     target="_blank"

diff --git a/components/mdx/mdx-components.tsx b/components/mdx/mdx-components.tsx
@@ -118,7 +118,7 @@ const createHeaderLink = (
           <CopyToClipboard text={`${pathname}#${id}`}>
             <a
               href={`#${id}`}
-              className="anchor anchor-link hash-link md:!pr-auto hash absolute top-28 bottom-0 right-0 ml-0 lg:mt-0.5 flex items-center border-0 md:pr-4 opacity-0 focus:opacity-100 group-hover:opacity-100 md:top-24 md:!right-auto md:!-ml-7 lg:-ml-7 xl:-ml-10 pointer-touch:opacity-80"
+              className="anchor anchor-link hash-link hash absolute top-28 bottom-0 right-0 ml-0 lg:mt-0.5 flex items-center border-0 opacity-0 focus:opacity-100 group-hover:opacity-100 md:top-24 lg:right-auto lg:-ml-9 xl:-ml-10 pointer-touch:opacity-80"
               title={`Direct link to heading ${id}`}
               aria-live="assertive"
               aria-label={`${`Click to copy section hashtag`}`}

diff --git a/components/mdx/toc.tsx b/components/mdx/toc.tsx
@@ -180,6 +180,10 @@ const Mobile = () => {
     text: t("On this page"),
   };
 
+  if (headings.length === 0) {
+    return null;
+  }
+
   return (
     <Popover
       as={motion.div}
@@ -190,7 +194,7 @@ const Mobile = () => {
           <Popover.Button
             role={`button`}
             as={motion.button}
-            className="mobile-doc-nav focus-ring flex w-full flex-shrink-0 items-center justify-between px-4 text-sm [-webkit-tap-highlight-color:transparent] sm:px-6"
+            className="mobile-doc-nav focus-ring flex w-full flex-shrink-0 items-center justify-between px-4 text-sm [-webkit-tap-highlight-color:transparent] sm:px-6 lg:px-14"
             onClick={() => setShowMoblieDoc(!showMoblieDoc)}
             animate={{
               paddingTop: hasScrolled ? "1rem" : "0.375rem",
@@ -244,7 +248,7 @@ const Mobile = () => {
                   type: "spring",
                   bounce: 0.2,
                 }}
-                className="doc-nav-expand overflow-hidden px-4 contrast-more:font-semibold sm:px-6"
+                className="doc-nav-expand overflow-hidden px-4 contrast-more:font-semibold sm:px-6 lg:px-14"
               >
                 <div className="mt-1.5 pb-4">
                   {headings.map((heading) => {