Navbar Components

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vant-react",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Lightweight Mobile UI Components built in React & Typescript, inspired by Vant: https://youzan.github.io/vant",
   "author": "mxdi9i7",
   "license": "MIT",

src/components/Button/index.scss

@@ -13,7 +13,6 @@ a.#{$baseClass} {
   justify-content: center;
   align-items: center;
   position: relative;
-  box-sizing: border-box;
   color: $dark-text;
   background-color: $default;
   padding: 0 $padding-sm;

src/components/Button/stories/index.stories.tsx → src/components/Button/index.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Button from '../';
-import '../../../styles/stories.scss';
+import Button from '.';
+import '../../styles/stories.scss';
 
 export default {
   title: 'Button',
@@ -124,5 +124,3 @@ export const ButtonAction = () => (
     <Button touchstart={(e) => alert(e.target)}>Handle Touchstart</Button>
   </div>
 );
-
-// export const Emoji = () => <Button text='😀 😎 👍 💯' />;

src/components/Icons/index.tsx

@@ -35,8 +35,7 @@ export default function Icon({
   const iconProps = {
     className: `${classPrefix} ${classPrefix}-${name}`,
     style: {
-      fontSize: '28px',
-      color: '#000'
+      fontSize: '28px'
     }
   };
 

src/components/Navbar/index.scss

@@ -0,0 +1,57 @@
+@import '../../styles/colors.scss';
+@import '../../styles/spacing.scss';
+@import '../../styles/variables.scss';
+@import '../../styles/typography.scss';
+
+$baseClass: 'vant-navbar';
+
+nav.#{$baseClass} {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: $default;
+  height: $navbar-height;
+  width: 100%;
+
+  .#{$baseClass}__title {
+    @include nav-title;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .#{$baseClass}__left,
+  .#{$baseClass}__right {
+    @include nav-link;
+    display: flex;
+    align-items: center;
+    padding: 0 $space-lg;
+    cursor: pointer;
+
+    .vant-icon__container {
+      height: auto;
+      width: auto;
+      .vant-icon {
+        color: $info;
+      }
+    }
+  }
+
+  .#{$baseClass}__left {
+    .vant-icon {
+      margin-right: $space-sm;
+    }
+  }
+  .#{$baseClass}__right {
+    .vant-icon {
+      margin-left: $space-sm;
+    }
+  }
+
+  &__fixed {
+    position: fixed;
+    top: 0;
+  }
+}

src/components/Navbar/index.stories.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import Navbar from '.';
+import '../../styles/stories.scss';
+
+export default {
+  title: 'Navbar',
+  component: Navbar
+};
+
+export const NavbarTitle = () => (
+  <div className='container grey'>
+    <Navbar title='Settings' />
+  </div>
+);
+
+export const NavbarLeftAndRightText = () => (
+  <div className='container column grey'>
+    <Navbar title='Settings' leftText='Back' rightText='More' />
+    <Navbar
+      title='Profile'
+      leftIcon='arrow-left'
+      leftText='Back'
+      rightIcon='search'
+      rightText='Search'
+    />
+    <Navbar title='Home' leftIcon='user-o' rightIcon='search' />
+  </div>
+);
+
+export const NavbarFixed = () => (
+  <div className='container column grey'>
+    <Navbar
+      fixed
+      title='Profile'
+      leftIcon='arrow-left'
+      leftText='Back'
+      rightIcon='search'
+    />
+  </div>
+);
+
+export const NavbarWithLongTitle = () => (
+  <div className='container column grey'>
+    <Navbar
+      title='This is a very very very very very very very very very very long text'
+      leftIcon='arrow-left'
+      leftText='Back'
+      rightIcon='search'
+    />
+  </div>
+);
+
+export const NavbarClickHandler = () => (
+  <div className='container column grey'>
+    <Navbar
+      title='Title'
+      leftIcon='arrow-left'
+      leftText='Back'
+      rightIcon='search'
+      clickLeft={(e) => alert(e.target.innerHTML + ' Left Click')}
+      clickRight={(e) => alert(e.target.innerHTML + ' Right Click')}
+    />
+  </div>
+);

src/components/Navbar/index.tsx

@@ -0,0 +1,61 @@
+import React, { ReactElement } from 'react';
+
+import Icon from '../Icons';
+
+import classnames from '../../utils/classNames';
+
+import './index.scss';
+
+interface Props {
+  title?: string;
+  leftText?: string;
+  rightText?: string;
+  border?: boolean;
+  fixed?: boolean;
+  leftIcon?: string;
+  rightIcon?: string;
+  clickLeft?: Function;
+  clickRight?: Function;
+  zIndex: number;
+}
+
+const baseClass = 'vant-navbar';
+
+// TODO: Enable placeholder: Whether to generate a placeholder element when fixed
+
+export default function Navbar({
+  title,
+  leftText,
+  rightText,
+  leftIcon,
+  rightIcon,
+  border,
+  fixed,
+  zIndex,
+  clickLeft = () => {},
+  clickRight = () => {}
+}: Props): ReactElement {
+  const navProps = {
+    style: {},
+    className: classnames(baseClass, [{ border }, { fixed }])
+  };
+
+  const NAV_ICON_SIZE = '16px';
+
+  if (zIndex) Object.assign(navProps, { style: { ...navProps.style, zIndex } });
+
+  return (
+    <nav {...navProps}>
+      <div className={`${baseClass}__left`} onClick={(e) => clickLeft(e)}>
+        <div className={`${baseClass}__icon--left`} />
+        {leftIcon && <Icon name={leftIcon} size={NAV_ICON_SIZE} />}
+        <div className={`${baseClass}__text--left`}>{leftText}</div>
+      </div>
+      <div className={`${baseClass}__title`}>{title || 'Title'}</div>
+      <div className={`${baseClass}__right`} onClick={(e) => clickRight(e)}>
+        <div className={`${baseClass}__text--right`}>{rightText}</div>
+        {rightIcon && <Icon name={rightIcon} size={NAV_ICON_SIZE} />}
+      </div>
+    </nav>
+  );
+}

src/styles/global.scss

@@ -1,3 +1,6 @@
 * {
   box-sizing: border-box;
+  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,
+    Segoe UI, Arial, Roboto, 'PingFang SC', 'Hiragino Sans GB',
+    'Microsoft Yahei', sans-serif;
 }

src/styles/stories.scss

@@ -26,6 +26,14 @@ body {
     }
   }
 
+  nav {
+    margin-bottom: 20px;
+
+    .vant-icon__container {
+      margin: 0;
+    }
+  }
+
   button,
   a {
     margin-right: 20px;

src/styles/typography.scss

@@ -1,5 +1,26 @@
+@import './global.scss';
+@import './colors.scss';
+
 @mixin normal {
   font-size: 14px;
   line-height: 1.2;
   text-align: center;
 }
+
+@mixin nav-title {
+  font-size: 16px;
+  text-transform: capitalize;
+  font-weight: 500;
+  color: $dark-text;
+  overflow-x: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 60%;
+}
+
+@mixin nav-link {
+  font-size: 14px;
+  font-weight: 100;
+  line-height: 21px;
+  color: $info;
+}

src/styles/variables.scss

@@ -6,6 +6,9 @@ $loader-circular-duration: 1.4s;
 // buttons
 $button-height: 44px;
 
+// navbar
+$navbar-height: 56px;
+
 // icons
 $icon-container-size: 32px;
 $icon-dot-size: 8px;