es6-react-admin-lte

# HeaderBar Components > ./src/js/components/header-bar/ Notes ## Purpose A group of components that comprise what can and do make the header bar of your AdminLTE page awesome. ## Important Items * header-tasks.jsx * header-sidebar-toggle/header-sidebar-toggle.jsx * header-user-menu/header-user-menu.jsx * header-tasks/header-tasks.jsx * header-notifications/header-notifications.jsx * header-messages/header-messages.jsx --- --- ## HeaderBar - _header-tasks.jsx_ ### Purpose Is the entirety of the headerbar, which holds all of its child components. ### Props __clientName__ * Required - _false_ * Data Type - _STRING | JSX_ * Functionality - _A textual display of the client's logo. Can be a string or a stylish element insert_ * Default - _`AdminLTE`_ __clientNameAbbr__ * Required - _false_ * Data Type - _STRING | JSX_ * Functionality - _A textual display of a miniaturized or abbreviated version of the client's logo. Can be a string or a stylish element insert_ * Default - _`ALT`_ __clientLogo__ * Required - _false_ * Data Type - _STRING_ * Functionality - _A string link to a logo file_ * Default - _''_ __clientLogoMini__ * Required - _false_ * Data Type - _STRING_ * Functionality - _A string link to a miniaturized version of a logo file_ * Default - _''_ __logoBackgroundColor__ * Required - _false_ * Data Type - _STRING_ * Functionality - _A color string for the color the header bar will be when in smaller or miniaturized forms_ * Default - _'' (NOTE: Will default to whatever the panel's theme decrees it to be)_ __logoLink__ * Required - _false_ * Data Type - _STRING_ * Functionality - _A url that can be opened upon clicking the logo._ __onLogoClick__ * Required - _false_ * Data Type - _FUNCTION_ * Functionality - _A function that can be alternatively executed when the provided logoLink prop is clicked._ __Takes Children__ * Expected Type - _A `<li>` element_ * Displays Inside - _A `<ul>` element_ ### Example ``` import HeaderBar from './src/js/components/header-bar/header-bar.jsx'; <HeaderBar clientName={YOUR BRAND HERE} clientNameAbbr="BRAND" > <li>Header Item</li> </HeaderBar> ``` --- ## HeaderSidebarToggle - _header-sidebar-toggle.jsx_ ### Purpose Is a little button on the right side of the header that is used in tandem with, to open, the [ControlsMenu](CONTROLS-MENU.md) component. Should be inserted as a child of HeaderBar_ ### Example ``` import HeaderBar from './src/js/components/header-bar/header-bar.jsx'; import HeaderSidebarToggle from './src/js/components/header-bar/header-sidebar-toggle/header-sidebar-toggle.jsx'; <HeaderBar> <HeaderSidebarToggle /> </HeaderBar> ``` --- ## HeaderUserMenu - _header-user-menu.jsx_ ### Purpose A basic drop-down to display logged-in user data. ### Props __username__ * Required - _false_ * Data Type - _STRING_ * Functionality - _The user's username detail_ * Default - _''_ __name__ * Required - _false_ * Data Type - _STRING_ * Functionality - _The user's name detail to accompany user name._ * Default - _''_ __jobTitle__ * Required - _false_ * Data Type - _STRING_ * Functionality - _A quick synopsis of the user's job title. For show._ __img__ * Required - _false_ * Data Type - _STRING_ * Functionality - _An image link to display the user's profile image / avatar._ __profileLink__ * Required - _false_ * Data Type - _STRING_ * Functionality - _A url whose function should be evident by the prop name._ __profileOnClick__ * Required - _false_ * Data Type - _FUNCTION_ * Functionality - _A function called upon clicking the profile link_ __followersLink__ * Required - _false_ * Data Type - _STRING_ * Functionality - _A url to a followers page, assuming there is one. If its not there, this wont display._ __followersOnClick__ * Required - _false_ * Data Type - _FUNCTION_ * Functionality - _A function called upon clicking the followers link_ __salesLink__ * Required - _false_ * Data Type - _STRING_ * Functionality - _A url to a sales page, assuming there is one. If its not there, this wont display._ __salesOnClick__ * Required - _false_ * Data Type - _FUNCTION_ * Functionality - _A function called upon clicking the sales link_ __friendsLink__ * Required - _false_ * Data Type - _STRING_ * Functionality - _A url to a friends page, assuming there is one. If its not there, this wont display._ __friendsOnClick__ * Required - _false_ * Data Type - _FUNCTION_ * Functionality - _A function called upon clicking the friends link_ __joined__ * Required - _false_ * Data Type - _STRING_ * Functionality - _A string to a date of the user's joinage to the application._ * Default - _''_ __signOut__ * Required - _false_ * Data Type - _FUNCTION_ * Functionality - _A function called upon clicking a sign-out button._ * Default - _() => {}_ __Takes Children__ * Displays Inside - _A `<li className="user-body">` element_ ### Example ``` import HeaderBar from './src/js/components/header-bar/header-bar.jsx'; import HeaderSidebarToggle from './src/js/components/header-bar/header-user-menu/header-user-menu.jsx'; <HeaderBar> <HeaderUserMenu name="Brucey C." username="eljef" jobTitle="Deadite Slayer" joined="1 Jan 2017" /> </HeaderBar> ``` --- ## HeaderTasks - _header-tasks.jsx_ ### Purpose A simple dropdown-toggle that displays a list of remaining tasks linked to a user. ### Props __count__ * Required - _false_ * Data Type - _NUMBER_ * Functionality - _The amount of items you want to show on the list._ __tasks__ * Required - _false_ * Data Type - _ARRAY_ * Functionality - _A list of task data to be displayed in the component._ * Expected Data - [{ subject: '', percentage: 0, link: '#', onClick: () => { /* Alternative for clicking the link */ } }] * Default - _[]_ __clickHandler__ * Required - _false_ * Data Type - _FUNCTION_ * Functionality - _A function that assumably takes user to a task-viewing / list page. A button appears in footer of the list if used._ ### Example ``` import HeaderBar from './src/js/components/header-bar/header-bar.jsx'; import HeaderTasks from './src/js/components/header-bar/header-tasks/header-tasks.jsx'; <HeaderBar> <HeaderTasks tasks={[ { subject: '9 Slam Dunks', percentage: 75, link: '#', onClick: () => { // Alternative for clicking the link } }, { subject: '52 Emails Responded', percentage: 0, onClick: () => { // Alternative for clicking the link } }, { subject: '42 Meanings Found', percentage: 100 } ]} /> </HeaderBar> ``` --- ## HeaderNotifications - _header-notifications.jsx_ ### Purpose A simple dropdown-toggle that displays a list of notifications a user should see. ### Props __count__ * Required - _false_ * Data Type - _NUMBER_ * Functionality - _The amount of items you want to show on the list._ __notifications__ * Required - _false_ * Data Type - _ARRAY_ * Functionality - _A list of notification data to be displayed in the component._ * Expected Data - [{ content: '', icon: '', link: '', onClick: () => { /* Alternative for clicking the link */ } }] * Default - _[]_ __clickHandler__ * Required - _false_ * Data Type - _FUNCTION_ * Functionality - _A function that assumably takes user to a task-viewing / list page. A button appears in footer of the list if used._ ### Example ``` import HeaderBar from './src/js/components/header-bar/header-bar.jsx'; import HeaderNotifications from './src/js/components/header-bar/header-notifications/header-notifications.jsx'; <HeaderBar> <HeaderNotifications notifications={[ { content: 'You\'ve got mail!', theme: 'bg-yellow', link: '#', onClick: () => { // Alternative for clicking the link } }, { content: 'Janet says "Hi".', theme: 'bg-green', link: '#', onClick: () => { // Alternative for clicking the link } }, { content: '...7 Days...', theme: 'bg-blue', link: '#', onClick: () => { // Alternative for clicking the link } } ]} /> </HeaderBar> ``` --- ## HeaderMessages - _header-messages.jsx_ ### Purpose A simple dropdown-toggle that displays a list of recent messages a user has. ### Props __count__ * Required - _false_ * Data Type - _NUMBER_ * Functionality - _The amount of items you want to show on the list._ __messages__ * Required - _false_ * Data Type - _ARRAY_ * Functionality - _A list of message data to be displayed in the component._ * Expected Data - [{ title: '', displayImg: '', content: '', time: '', link: '', onClick: () => { /* Alternative for clicking the link */ } }] * Default - _[]_ __clickHandler__ * Required - _false_ * Data Type - _FUNCTION_ * Functionality - _A function that assumably takes user to a task-viewing / list page. A button appears in footer of the list if used._ ### Example ``` import HeaderBar from './src/js/components/header-bar/header-bar.jsx'; import HeaderMessages from './src/js/components/header-bar/header-messages/header-messages.jsx'; <HeaderBar> <HeaderMessages messages={[ { title: 'Shanaya Twain', displayImg: '', content: 'I have transcended time.', time: '1 Jan 1947, 6:53pm', link: '#', onClick: () => { // Alternative for clicking the link } }, { title: 'Jennisica Johnson', displayImg: '', content: 'How have you been', time: '1 Jan 2017, 8:42 am' }, { title: 'Brucey C.', displayImg: '', content: 'Groovey...', time: '9:45 pm' } ]} /> </HeaderBar> ```