wix-style-react/dist/es/stories/SideMenu/ExampleStandardRTL.js

wix-style-react

/* eslint-disable no-console */
import React from 'react';

import SideMenu from 'wix-style-react/SideMenu';
import Button from 'wix-style-react/Button';
import Tooltip from 'wix-style-react/Tooltip';
import Edit from 'wix-style-react/new-icons/Edit';
import ChatIcon from 'wix-style-react/new-icons/Chat';
import ExternalLink from 'wix-style-react/new-icons/ExternalLink';

export default (function () {
  return React.createElement(
    'div',
    { className: 'rtl', style: { direction: 'rtl' } },
    React.createElement(
      'div',
      { style: { width: 220, height: 700 } },
      React.createElement(
        SideMenu,
        null,
        React.createElement(
          SideMenu.Header,
          null,
          React.createElement(
            'div',
            {
              style: { padding: '26px 30px', fontSize: '20px', color: 'white' }
            },
            React.createElement(
              Tooltip,
              {
                content: 'wix-style-react',
                placement: 'bottom',
                alignment: 'left',
                dataHook: 'site-name-tooltip',
                maxWidth: '250'
              },
              React.createElement(
                'div',
                { style: { display: 'flex' } },
                React.createElement(
                  'span',
                  { style: { fontSize: '20px' } },
                  'wix-style-react'
                ),
                React.createElement(ExternalLink, null)
              )
            ),
            React.createElement(
              'div',
              { style: { marginTop: '5px', fontSize: '13px' } },
              'Role: Owner'
            )
          )
        ),
        React.createElement(
          SideMenu.Navigation,
          null,
          React.createElement(
            SideMenu.NavigationLink,
            {
              onClick: function onClick() {
                return console.log('Dashboard clicked');
              }
            },
            'Dashboard'
          ),
          React.createElement(
            SideMenu.NavigationLink,
            {
              onClick: function onClick() {
                return console.log('Rest. Menus clicked');
              }
            },
            'Rest. Menus'
          ),
          React.createElement(
            SideMenu.NavigationLink,
            {
              withArrow: true,
              onClick: function onClick() {
                return console.log('Rest. Products clicked');
              }
            },
            'Rest. Products'
          ),
          React.createElement(
            SideMenu.NavigationLink,
            {
              isActive: true,
              onClick: function onClick() {
                return console.log('Store Orders clicked');
              }
            },
            'Store Orders'
          ),
          React.createElement(
            SideMenu.NavigationLink,
            {
              withArrow: true,
              onClick: function onClick() {
                return console.log('Contacts & CRM clicked');
              }
            },
            'Contacts & CRM'
          ),
          React.createElement(
            SideMenu.NavigationLink,
            {
              withArrow: true,
              onClick: function onClick() {
                return console.log('Marketing Tools clicked');
              }
            },
            'Marketing Tools'
          ),
          React.createElement(SideMenu.NavigationSeparator, null),
          React.createElement(
            SideMenu.NavigationLink,
            {
              onClick: function onClick() {
                return console.log('Manage Website clicked');
              }
            },
            'Manage Website'
          ),
          React.createElement(
            SideMenu.NavigationLink,
            {
              badge: React.createElement(SideMenu.NavigationBadge, null),
              onClick: function onClick() {
                return console.log('Settings clicked');
              }
            },
            'Settings'
          ),
          React.createElement(
            SideMenu.NavigationLink,
            { onClick: function onClick() {
                return console.log('Apps clicked');
              } },
            'Apps'
          ),
          React.createElement(
            SideMenu.NavigationLink,
            {
              href: 'https://academy.wix.com/en/seo',
              target: '_blank',
              isDiminishedHover: true
            },
            'Dim Hover link #1'
          )
        ),
        React.createElement(
          SideMenu.Promotion,
          null,
          React.createElement(
            Button,
            {
              theme: 'fullpurple',
              onClick: function onClick() {
                return console.log('Promotion button clicked!');
              }
            },
            'Upgrade'
          )
        ),
        React.createElement(SideMenu.NavigationSeparator, null),
        React.createElement(
          SideMenu.Footer,
          null,
          React.createElement(
            SideMenu.FooterLink,
            {
              href: 'https://support.wix.com/',
              target: '_blank',
              icon: React.createElement(Edit, null)
            },
            'Edit'
          ),
          React.createElement(SideMenu.FooterTinyLink, {
            href: 'https://support.wix.com/en/article/wix-seo-wiz-suggestions-and-feedback',
            target: '_blank',
            icon: React.createElement(
              'div',
              { style: { marginTop: 2 } },
              React.createElement(ChatIcon, null)
            ),
            tooltip: 'Hey, come talk to me!',
            onClick: function onClick() {
              return console.log('clicked on tiny link yay!');
            }
          })
        )
      )
    )
  );
});