sidebar title updated

docs/interaction-styles.mdx

@@ -1,6 +1,6 @@
 ---
 id: pseudo-props
-title: Pseudo props in Detail
+title: 'Pseudo props: Overview'
 ---
 
 import {

docs/pseudoProps.md

@@ -1,6 +1,6 @@
 ---
 id: pseudo-props-101
-title: Pseudo Props 101
+title: 'Pseudo props: Do’s & Dont’s'
 ---
 
 Before getting into details of all the common Pseudo Props NativeBase has to offer let's check some key points that these pseudo props follow.

src/components/TileLink/index.js

@@ -10,12 +10,13 @@ export default function TileLink({
   imgStyle,
   titleClassName = 'text-white',
   descriptionClassName = 'text-gray-100',
+  wide = false
 }) {
   return (
     <Link
       to={url}
       className={
-        'relative overflow-hidden no-underline col col--5 rounded-md pt-6 px-4 shadow-2xl mx-2 mb-2 ' +
+        'relative overflow-hidden no-underline col rounded-md pt-6 px-4 shadow-2xl mx-2 mb-2 ' +
         className
       }
     >

src/components/index.js

@@ -6,6 +6,7 @@ export { default as AndroidBadge } from './AndroidBadge';
 export { default as WebBadge } from './WebBadge';
 export { default as KitchenSinkIframe } from './KitchenSinkIframe';
 export { default as TileLink } from './TileLink';
+export { default as NativeStartupBanner } from './NativeStartupBanner';
 export { default as NBHistory } from './NBHistory';
 export { default as InstallationTiles } from './InstallationTiles';
 export { UtilityFirstExample } from './UtilityFirstExample';

src/theme/Navbar.js

@@ -79,17 +79,15 @@ function Navbar() {
         [styles.navbarHideable]: hideOnScroll,
         [styles.navbarHidden]: !isNavbarVisible,
       })}
-      // style={{ paddingLeft: '2rem' }}
+    // style={{ paddingLeft: '2rem' }}
     >
       <div
-        className={`navbar__inner bg-transparent backdrop-blur-sm  ${
-          isLandingPage ? 'lg:px-4' : ''
-        }`}
+        className={`navbar__inner bg-transparent backdrop-blur-sm  ${isLandingPage ? 'lg:px-4' : ''
+          }`}
       >
         <div
-          className={`flex px-4 navbar-small bg-blueGray-50 justify-around mx-auto md:px-6 lg:px-2 w-full  ${
-            isLandingPage ? 'max-w-6xl' : ''
-          }`}
+          className={`flex px-4 navbar-small bg-blueGray-50 justify-around mx-auto md:px-6 lg:px-2 w-full  ${isLandingPage ? 'max-w-6xl' : ''
+            }`}
         >
           <div className="navbar__items ">
             {items != null && items.length !== 0 && (
@@ -116,19 +114,16 @@ function Navbar() {
                 return (
                   <div
                     key={i}
-                    className={`hidden xl:block text-base ${nativeBaseV2Color}`}
+                    className={`ml-2 hidden xl:block text-base ${nativeBaseV2Color}`}
                   >
-                    Looking for{' '}
                     <a
-                      href="https://v2.nativebase.io/"
+                      href="https://startup.nativebase.io/?utm_source=DocsHeader&utm_medium=ad-banner&utm_campaign=NativeBase_3_Docs"
                       target="_blank"
-                      className={`leading-5 text-cyan-${
-                        isDarkTheme ? '600' : '700'
-                      } font-medium`}
+                      className={`leading-5 text-cyan-${isDarkTheme ? '600' : '700'
+                        } font-medium`}
                     >
-                      v2.0
+                      Announcing NativeBase Startup+ bundle{'  '}🎉
                     </a>
-                    <span>?</span>
                   </div>
                 );
               else return <NavbarItem {...item} key={i} />;
@@ -157,13 +152,11 @@ function Navbar() {
                     <a
                       href={item.to}
                       key={i}
-                      className={`${
-                        !isDarkTheme
-                          ? 'text-gray-500 hover:bg-gray-100'
-                          : 'text-white hover:bg-gray-600'
-                      } px-0 border border-solid ${
-                        !isDarkTheme ? 'border-gray-200' : 'border-gray-600'
-                      }  font-semibold py-1 px-5 rounded no-underline hidden md:inline-block`}
+                      className={`${!isDarkTheme
+                        ? 'text-gray-500 hover:bg-gray-100'
+                        : 'text-white hover:bg-gray-600'
+                        } px-0 border border-solid ${!isDarkTheme ? 'border-gray-200' : 'border-gray-600'
+                        }  font-semibold py-1 px-5 rounded no-underline hidden md:inline-block`}
                     >
                       Docs
                     </a>
@@ -173,14 +166,12 @@ function Navbar() {
                     <a
                       href={item.to}
                       key={i}
-                      className={`border-0 ${
-                        !isDarkTheme
-                          ? 'text-gray-500 hover:bg-gray-100'
-                          : 'text-white hover:bg-gray-600'
-                      }
-                       px-0 border border-solid ${
-                         !isDarkTheme ? 'border-gray-200' : 'border-gray-600'
-                       }  font-semibold py-1 rounded no-underline hidden md:inline-block px-2 ml-4`}
+                      className={`border-0 ${!isDarkTheme
+                        ? 'text-gray-500 hover:bg-gray-100'
+                        : 'text-white hover:bg-gray-600'
+                        }
+                       px-0 border border-solid ${!isDarkTheme ? 'border-gray-200' : 'border-gray-600'
+                        }  font-semibold py-1 rounded no-underline hidden md:inline-block px-2 ml-4`}
                     >
                       <svg
                         xmlns="http://www.w3.org/2000/svg"

versioned_docs/version-3.2.1/getting-started.mdx

@@ -4,15 +4,15 @@ title: Getting Started
 slug: /
 ---
 
-import { KitchenSinkIframe, TileLink, NBHistory } from '../../src/components';
+import { KitchenSinkIframe, TileLink, NBHistory, NativeStartupBanner } from '../../src/components';
 import TOCInline from '@theme/TOCInline';
 
 <div className='tailwind'>
   <div className='row m-0'>
     <div className="col col--9 mb-12 p-0">
       <p className='text-md'>
         NativeBase is a component library that enables devs to build universal
-        design systems. It is built on top of React Native, allowing you to
+        apps. It is built on top of React Native, allowing you to
         develop apps for Android, iOS and the Web.
       </p>
       <div className='mt-8 pl-2 -ml-1'>
@@ -44,6 +44,9 @@ import TOCInline from '@theme/TOCInline';
             className='bg-indigo-600'
           />
         </div>
+        <div className='row m-0 -ml-3'>
+           <NativeStartupBanner />
+        </div>
       </div>
     </div>
     <div className='col col--3 mb-12'>

versioned_docs/version-3.2.1/interaction-styles.mdx

@@ -1,6 +1,6 @@
 ---
 id: pseudo-props
-title: Pseudo props in Detail
+title: Pseudo Props Basics
 ---
 
 import {

versioned_docs/version-3.2.1/pseudoProps.md

@@ -1,6 +1,6 @@
 ---
 id: pseudo-props-101
-title: Pseudo Props 101
+title: Pseudo Props Advanced
 ---
 
 Before getting into details of all the common Pseudo Props NativeBase has to offer let's check some key points that these pseudo props follow.