Add compare section to navbar & update styles (#203)

Author: emrberk

src/components/MainCTA/index.tsx

@@ -24,7 +24,7 @@ export const MainCTA = ({ className }: Props) => {
 
   return (
     <Button
-      className={clsx(styles.ctaButton, styles.getQuestdb, className)}
+      className={clsx(styles.ctaButton, className)}
       size="xsmall"
       variant="secondary"
       to={url}

src/components/MainCTA/styles.module.css

@@ -1,10 +1,20 @@
 .ctaButton {
-  margin-left: 10px;
-  font-size: var(--font-size-small);
-  padding: 0 2rem;
-}
-
-.getQuestdb {
   background: var(--palette-pink);
   color: #ffffff;
+  padding: 0 1rem;
+  flex-shrink: 0;
+  font-weight: 600;
+}
+
+.ctaButton:hover {
+  background: var(--palette-pink-darker);
+  color: #fff;
+}
+
+@media (min-width: 1100px) {
+  .ctaButton {
+    margin-left: 0.75rem;
+    min-width: 140px;
+    padding: 0 2rem;
+  }
 }

src/components/Tailwind/WideNav/MobileNav/index.tsx

@@ -9,27 +9,31 @@ import { XMarkIcon, ChevronDownIcon } from "@heroicons/react/20/solid"
 import { useNavbarSecondaryMenu } from "@docusaurus/theme-common/internal"
 import SearchBar from "@theme/SearchBar"
 
-type Feature = {
+type NavLink = {
   name: string
   href: string
 }
 
-type NavLink = {
+type Feature = {
   name: string
   href: string
+  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>
+  svg?: React.ComponentType<React.SVGProps<SVGSVGElement>>
 }
 
 type MobileNavProps = {
   mobileMenuOpen: boolean
   setMobileMenuOpen: (open: boolean) => void
-  features: Feature[]
+  productFeatures: Feature[]
+  compareFeatures: Feature[]
   navLinks: NavLink[]
 }
 
 export default function MobileNav({
   mobileMenuOpen,
   setMobileMenuOpen,
-  features,
+  productFeatures,
+  compareFeatures,
   navLinks,
 }: MobileNavProps) {
   const secondaryMenu = useNavbarSecondaryMenu()
@@ -61,7 +65,7 @@ export default function MobileNav({
           <SearchBar />
         </div>
         <div className="flow-root">
-          <div className="-my-6 divide-y mt-4 divide-gray-500/10 dark:divide-gray-700">
+          <div className="divide-y my-4 divide-gray-500/10 dark:divide-gray-700">
             <div className="space-y-2">
               {secondaryMenu.content ? (
                 <Disclosure as="div" className="-mx-3 mb-4">
@@ -70,37 +74,81 @@ export default function MobileNav({
                     <hr />
                     <a
                       href="/"
-                      className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-[rgb(33,34,44)]"
+                      className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-[rgb(33,34,44)]"
                     >
                       ← Return to homepage
                     </a>
                   </div>
                 </Disclosure>
               ) : (
                 <>
-                  <Disclosure as="div" className="-mx-3 pt-4">
-                    <DisclosureButton className="group flex w-full items-center justify-between rounded-lg py-2 pl-3 pr-3.5 text-base font-semibold leading-7 bg-white text-gray-700 dark:bg-[rgb(38,40,51)] dark:text-white hover:bg-gray-50 dark:hover:bg-[rgb(33,34,44)]">
+                  <Disclosure as="div" className="-mx-3 pt-4" defaultOpen>
+                    <DisclosureButton className="group flex w-full items-center justify-between rounded-lg py-2 pl-3 pr-3.5 text-base font-semibold bg-white text-gray-700 dark:bg-[rgb(38,40,51)] dark:text-white hover:bg-gray-50 dark:hover:bg-[rgb(33,34,44)]">
+                      Product
+                      <ChevronDownIcon
+                        aria-hidden="true"
+                        className="h-5 w-5 flex-none group-data-[open]:rotate-180"
+                      />
+                    </DisclosureButton>
+                    <DisclosurePanel className="mt-2 space-y-2">
+                      {productFeatures.map((item) => (
+                        <DisclosureButton
+                          key={item.name}
+                          as="a"
+                          href={item.href}
+                          className="group flex items-center gap-x-3 rounded-lg text-white py-2 pl-8 pr-3 text-sm font-semibold hover:bg-[rgb(43,45,56)]"
+                        >
+                          {item.icon ? (
+                            <item.icon
+                              aria-hidden="true"
+                              className="h-5 w-5 text-gray-300 group-hover:text-primary group-hover:fill-primary"
+                            />
+                          ) : item.svg ? (
+                            <item.svg
+                              aria-hidden="true"
+                              className="h-5 w-5 fill-current text-gray-300 group-hover:text-primary group-hover:fill-primary"
+                            />
+                          ) : null}
+                          {item.name}
+                        </DisclosureButton>
+                      ))}
+                    </DisclosurePanel>
+                  </Disclosure>
+
+                  <Disclosure as="div" className="-mx-3 pt-4" defaultOpen>
+                    <DisclosureButton className="group flex w-full items-center justify-between rounded-lg py-2 pl-3 pr-3.5 text-base font-semibold bg-white text-gray-700 dark:bg-[rgb(38,40,51)] dark:text-white hover:bg-gray-50 dark:hover:bg-[rgb(33,34,44)]">
                       Compare
                       <ChevronDownIcon
                         aria-hidden="true"
                         className="h-5 w-5 flex-none group-data-[open]:rotate-180"
                       />
                     </DisclosureButton>
                     <DisclosurePanel className="mt-2 space-y-2">
-                      {features.map((item) => (
+                      {compareFeatures.map((item) => (
                         <DisclosureButton
                           key={item.name}
                           as="a"
                           href={item.href}
-                          className="block rounded-lg text-black dark:text-white py-2 pl-6 pr-3 text-sm font-semibold leading-7 hover:bg-gray-50 dark:hover:bg-[rgb(33,34,44)]"
+                          className="group flex items-center gap-x-3 rounded-lg text-white py-2 pl-8 pr-3 text-sm font-semibold hover:bg-[rgb(43,45,56)]"
                         >
+                          {item.icon ? (
+                            <item.icon
+                              aria-hidden="true"
+                              className="h-5 w-5 text-gray-300 group-hover:text-primary group-hover:fill-primary"
+                            />
+                          ) : item.svg ? (
+                            <item.svg
+                              aria-hidden="true"
+                              className="h-5 w-5 fill-current text-gray-300 group-hover:text-primary group-hover:fill-primary"
+                            />
+                          ) : null}
                           {item.name}
                         </DisclosureButton>
                       ))}
                     </DisclosurePanel>
                   </Disclosure>
 
-                  <div className="flex flex-col space-y-1">
+                  <div className="flex flex-col space-y-2">
                     {navLinks.map((link) => (
                       <a
                         key={link.name}