luxyachts-header v1.0.0

About the elements

luxyachts-header

About the element

used to show header of the page.

Available actions

• create account/sign in - on click navigates to /account/login url
• Search - on the enter key press or on the search button click sends get request on https://www.luxyachts.com/search
• Menu icon - opens navigation dialog in which available actions are as below: - create account / login - on click navigates to /account/login - sales - on click navigates to /sales - charter - on click navigates to /charter - management - on click navigates to /management - crew - on click navigates to /crew - about us - on click navigates to /about-us - contact us - on click navigates to /contact-us

How to use

<luxyachts-header loggedIn userName="Desktop1 iDwear" page="/crew"></luxyachts-header>

Property Usage

• loggedIn

  • Type: Boolean
  • Default value: false
  • set true to show logged in user header

• page

  • Type: String
  • Default value: Null
  • holds Current page url
  • used for logged in user to show tooltip of badge

• userName

  • Type: String
  • Default value: Null
  • Name of the current logged in user
  • used to show name of user under “Welcome” label

• logoImageUrl

  • Type: String
  • Default value: './images/luxyachts_logo.png'
  • url of the logo
  • Used to show logo

luxyachts-sidebar

About the element

Used to show sidebar of the page. It's shows list of menu. on the click of menu it nagivates to clicked menu's url.

How to use

<luxyachts-sidebar page="/crew"></luxyachts-sidebar>

Property Usage

• page

  • Type: String
  • Default value: Null
  • url of the current page
  • Used to show the current active menu in the sidebar panel

• navItems
  • Type: Array
    • Array of object
    • Note: Object must have imgUrl, pageLink and tooltip keys

      	 ```
      	[{
      imgUrl: '/images/sidebar/find_jobs_neg.gif',
      	  pageLink: '/client/crew',
      	  tooltipText: 'Find Work’  
      	}]

    • Used to show list of menu items in sidebar

luxyachts-footer

About the element

Used to show footer of the page.

How to use

<luxyachts-footer></luxyachts-footer>