Feat/custom navbar cta (ionic-team#2135)

* chore(): Add navbar cta schema * chore(navbar): Add Custom NavbarItem * chore(): Update config for cta navbar item
skyus · Dec 14, 2021 · fdba096 · fdba096
1 parent ba7b418
commit fdba096
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 1 deletion.
diff --git a/docusaurus-theme-classic/src/index.js b/docusaurus-theme-classic/src/index.js
@@ -10,6 +10,12 @@ let { ThemeConfigSchema } = require(path.resolve(
   '../../node_modules/@docusaurus/theme-classic/lib/validateThemeConfig.js'
 ));
 
+const NavbarCtaSchema = Joi.object({
+  type: Joi.string().equal('cta').required(),
+  position: Joi.string().default('left'),
+  text: Joi.string().required(),
+  href: Joi.string().required(),
+});
 const NavbarIconLinkSchema = Joi.object({
   type: Joi.string().equal('iconLink').required(),
   position: Joi.string().default('left'),
@@ -29,7 +35,7 @@ const NavbarSeparatorSchema = Joi.object({
 
 ThemeConfigSchema = ThemeConfigSchema.concat(
   Joi.object({
-    navbar: { items: Joi.array().items(NavbarIconLinkSchema).items(NavbarSeparatorSchema) },
+    navbar: { items: Joi.array().items(NavbarIconLinkSchema).items(NavbarSeparatorSchema).items(NavbarCtaSchema) },
   })
 );
 

diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -61,6 +61,12 @@ module.exports = {
           label: 'Native',
           position: 'left',
         },
+        {
+          type: 'cta',
+          position: 'left',
+          text: 'Ionic v6.0.0 Upgrade Guide',
+          href: `${BASE_URL}/intro/upgrading-to-ionic-6`,
+        },
         {
           type: 'docsVersionDropdown',
           position: 'right',

diff --git a/src/styles/components/_navbar.scss b/src/styles/components/_navbar.scss
@@ -51,6 +51,42 @@ html[data-theme='dark'] {
           }
         }
       }
+
+      .cta {
+        display: flex;
+        align-items: center;
+
+        padding: 0.375rem 0.625rem;
+
+        background: linear-gradient(90deg, #495fff 0%, #18c6ff 114.68%);
+
+        color: #fff;
+
+        border-radius: 200px;
+
+        white-space: nowrap;
+
+        font-weight: 600;
+        font-size: 0.75rem;
+        line-height: 100%;
+
+        transition: opacity 0.2s ease-out;
+
+        margin-inline-start: 0.5rem;
+
+        @media (max-width: 1400px) {
+          display: none;
+        }
+
+        &:hover,
+        &:active {
+          opacity: 0.8;
+        }
+
+        svg {
+          margin-inline-start: 0.125rem;
+        }
+      }
     }
 
     &__items--right {

diff --git a/src/theme/NavbarItem/NavbarCta.tsx b/src/theme/NavbarItem/NavbarCta.tsx
@@ -0,0 +1,21 @@
+import clsx from 'clsx';
+import React from 'react';
+
+export default function NavbarCta({ text, ...props }) {
+  return (
+    <a {...props} className={clsx(props.className, 'cta')}>
+      {text}
+      <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512" width="12" height="12">
+        <title>Arrow Forward</title>
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="48"
+          d="M268 112l144 144-144 144M392 256H100"
+        />
+      </svg>
+    </a>
+  );
+}
diff --git a/src/theme/NavbarItem/index.tsx b/src/theme/NavbarItem/index.tsx
@@ -2,10 +2,12 @@ import OriginalNavbarItem from '@theme-original/NavbarItem';
 import React from 'react';
 import NavbarIconLink from '@theme/NavbarItem/NavbarIconLink';
 import NavbarSeparator from '@theme/NavbarItem/NavbarSeparator';
+import NavbarCta from '@theme/NavbarItem/NavbarCta';
 
 const CustomNavbarItemComponents = {
   iconLink: () => NavbarIconLink,
   separator: () => NavbarSeparator,
+  cta: () => NavbarCta,
 } as const;
 
 export default function NavbarItem({ type, ...props }) {