@fortawesome/free-solid-svg-icons#faAngleLeft JavaScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faAngleLeft.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: pagination.js From open-jobboard with Apache License 2.0 | 5 votes |
|
Filters = props => {
const [page, setPage] = useState(props.meta.page)
const [maxPage, setmaxPage] = useState(props.meta.maxPage)
const isMounted = useRef(false);
useEffect(() => {
if(isMounted.current) {
props.fetchJobs({...props.boardFilters, page})
} else {
isMounted.current = true;
}
}, [page])
let keysList = [...Array(maxPage).keys()];
let slicedKeysList = [];
if (page < 4) {
slicedKeysList = keysList.slice(0, 5);
} else {
slicedKeysList = keysList.slice(page - 2, page + 5);
}
const paginationHtml = slicedKeysList.map(p => {
let className = [styles.paginationItem];
if (page === p + 1 ) {
className.push(styles.active)
}
return (<li key={p} onClick={() => setPage(p+1)} className={className.join(' ')}>{p+1}</li>)
})
let nextClass = page === maxPage ? [styles.paginationItem, styles.disabled].join(' ') : styles.paginationItem
let prevClass = page === 1 ? [styles.paginationItem, styles.disabled].join(' ') : styles.paginationItem
return (
<div className={styles.pagination}>
<span className={prevClass} onClick={() => setPage(1)}>
<FontAwesomeIcon icon={faAngleDoubleLeft} />
</span>
<span className={prevClass} onClick={() => setPage(prevPage => prevPage - 1)}>
<FontAwesomeIcon icon={faAngleLeft} />
</span>
<ul className={styles.pagination__list}>
{paginationHtml}
</ul>
<span className={nextClass}>
<FontAwesomeIcon icon={faAngleRight} onClick={() => setPage(prevPage => prevPage + 1)} />
</span>
<span className={nextClass}>
<FontAwesomeIcon icon={faAngleDoubleRight} onClick={() => setPage(maxPage)}/>
</span>
</div>
)
}
Example #2
| Source File: previewlayout.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
PreviewLayout = (props) => {
const { changeScreenHandler } = props;
return (
<div className="preview-layout-form">
{/* <div className="preview-layout-back">
<Link
className="back-link"
onClick={() => changeScreenHandler("addactivity")}
>
<FontAwesomeIcon icon="chevron-left" className="icon-link" />
Back
</Link>
</div> */}
<div className="preview-layout-tabs">
<Tabs text="1. Select an activity" tabActive={true} />
<Tabs text="2. Add activities to Layout" className="ml-10 mt-10" tabActive={true} />
<Tabs text="3. Preview Activity" className="ml-10" tabActive={true} />
</div>
<div className="preview-layout-title-select">
<div className="preview-layout-title">
<HeadingTwo text="Interactive Video" color="#084892" />
</div>
{/* <div className="preview-layout-change-layout">
<select>
<option>Change Layout</option>
<option>Interactive video</option>
<option>Column layout</option>
<option>Interactive book</option>
<option>Course presentation</option>
<option>Quiz</option>
<option>Single activity</option>
</select>
</div> */}
</div>
<div className="preview-layout-card-project">
<div className="preview-layout-dialogcard">
<div className="dialogcard-subtitle">
<HeadingThree text="Activity title" color="#084892" />
</div>
<div>
<HeadingText text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam." />
</div>
<div className="preview-layout-panel">
<div className="layout-panel">
<HeadingThree text="First panel " color="#084892" />
<FontAwesomeIcon icon="chevron-down" color="#084892" />
</div>
<div className="layout-panel mt-8">
<HeadingThree text="Second panel " color="#084892" />
<FontAwesomeIcon icon="chevron-down" color="#084892" />
</div>
</div>
<div className="preview-layout-footer">
<div className="footer-dowload">
<p>
<FontAwesomeIcon icon={faArrowDown} /> Download
</p>
</div>
<div>
<p>
<FontAwesomeIcon icon={faAngleLeft} /> <FontAwesomeIcon icon={faAngleRight} />
Embed
</p>
</div>
<div>
<img src={ExplanatoryH5P} />
</div>
</div>
{/* <div className="dialogcard-subtitle">
<HeadingText
text="Dialog Card"
color="#084892"
className="subtitle-text"
/>
</div>
<div className="dialogcard-title">
<HeadingTwo
text="Activity Title"
color="#084892"
className="title-heading"
/>
<HeadingThree
text="Heading"
color="#084892"
className="sub-heading"
/>
</div>
<div className="detail-dialogcard">
<div className="card-actvity">
<img src={CarDImage} alt="" />
<div>
<FontAwesomeIcon
icon="volume-up"
className="card-actvity-icon"
/>
</div>
<HeadingThree
text="Activity Title"
className="card-actvity-title"
/>
<Buttons
icon="sync-alt"
text="Turn"
primary={true}
width="96px"
height="35px"
className="card-actvity-btn"
/>
</div>
</div>
<div className="card-pagination">
<div className="pagination-text">
<HeadingText text="Card 1 of 5" />
</div>
<div className="pagination-icon">
<FontAwesomeIcon icon="angle-right" className="icon-next" />
</div>
</div> */}
</div>
<div className="preview-layout-project">
<div className="project-title-link">
<div className="project-title">
<HeadingTwo text="Project: " color="#084892" className="project-heading" />
<HeadingText text="Project title here" color="#515151" />
<HeadingTwo text="Playlist:" color="#084892" className="playlist-heading" />
<HeadingText text="Playlist name here" color="#515151" />
</div>
<div className="project-link">
<Link className="get-link">
{/* <FontAwesomeIcon icon="link" className="icon-link" />*/}
Get link
</Link>
</div>
</div>
<div className="dialog-card-box">
<img src={DialogCardImage} alt="" />
<HeadingText text="Dialog Cards" color="#084892" className="ml-15" />
</div>
{/* <div className="add-more-activity">
<div className="more-activity-icon">
<FontAwesomeIcon icon="link" className="icon-link" />
</div>
<Link className="more-activity-link" to="/">
Add More Activity
</Link>
</div> */}
<div className="project-link-button">
<Buttons text="Back to Editor" primary={true} width="126px" height="43px" hover={true} onClick={() => changeScreenHandler('addactivity')} />
<Buttons text="Finish Layout" secondary={true} width="126px" height="43px" hover={true} onClick={() => changeScreenHandler('')} />
</div>
</div>
</div>
</div>
);
}
Example #3
| Source File: addteamprojects.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
AddTeamProjects = ({ setPageLoad }) => {
const primaryColor = getGlobalColor('--main-primary-color');
return (
<div className="add-team-projects">
<div className="team-projects-top-section">
<div>
<div className="organization-name">CurrikiStudio</div>
<div className="title-image">
<div>
<h1 className="title">Add projects</h1>
</div>
</div>
</div>
<div
className="back-to-section"
onClick={() => {
setPageLoad((oldStatus) => !oldStatus);
}}
>
<FontAwesomeIcon icon={faAngleLeft} className="back-icon" />
<span>Back to team</span>
</div>
</div>
<div className="project-tabs">
<Tabs className="main-tabs" defaultActiveKey="Projects" id="uncontrolled-tab-example">
<Tab eventKey="Projects" title="Projects">
<div className="flex-button-top">
<div className="team-controller">
<div className="search-and-filters">
<div className="search-bar">
<input type="text" className="search-input" placeholder="Search project" />
{/* <img src={searchimg} alt="search" />*/}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" css-inspector-installed="true">
<path
d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58175 3 3.00003 6.58172 3.00003 11C3.00003 15.4183 6.58175 19 11 19Z"
stroke={primaryColor}
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path d="M21 20.9984L16.65 16.6484" stroke={primaryColor} stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
<div className="team-project-btns">
<div className="project-selection">
<p>5 projects have been selected. </p>
</div>
<Buttons icon={faPlus} text="Add projects to team" primary={true} width="188px" height="32px" hover={true} />
</div>
</div>
</div>
<div className="list-of-team-projects">
<TeamProjectCard backgroundImg={Project1} title="The Curriki Vision" className="mrt" />
<TeamProjectCard backgroundImg={Project2} title="The Curriki Vision" className="mrt" />
<TeamProjectCard backgroundImg={Project3} title="The Curriki Vision" className="mrt" />
<TeamProjectCard backgroundImg={Project1} title="The Curriki Vision" className="mrt" />
<TeamProjectCard backgroundImg={Project2} title="The Curriki Vision" className="mrt" />
<TeamProjectCard backgroundImg={Project3} title="The Curriki Vision" className="mrt" />
</div>
</Tab>
<Tab eventKey="Search" title="Search">
<div className="flex-button-top">
<div className="team-controller">
<div className="search-and-filters">
<div className="search-bar">
<input type="text" className="search-input" placeholder="Search project" />
<img src={searchimg} alt="search" />
</div>
</div>
<div className="team-project-btns">
<div className="project-selection">
<p>5 projects have been selected. </p>
</div>
<Buttons icon={faPlus} text="Add projects to team" primary={true} width="188px" height="32px" hover={true} />
</div>
</div>
</div>
<SearchInterface fromTeam={true} />
</Tab>
</Tabs>
</div>
{/* <div className="flex-button-top">
<div className="team-controller">
<div className="search-and-filters">
<div className="search-bar">
<input
type="text"
className="search-input"
placeholder="Search project"
/>
<img src={searchimg} alt="search" />
</div>
</div>
<div className="team-project-btns">
<div className="project-selection">
<p>5 projects have been selected. </p>
</div>
<Buttons
icon={faPlus}
text="Add projects to team"
primary={true}
width="188px"
height="32px"
hover={true}
/>
</div>
</div>
</div> */}
</div>
);
}
Example #4
| Source File: index.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
AddTeamProjects = (props) => {
const { location, organization, team, newTeam, newTeamData, createTeam, loadTeam, loadTeams, addProjectToTeam } = props;
const dispatch = useDispatch();
const history = useHistory();
const [allPersonalProjects, setAllPersonalProjects] = useState([]);
const [loading, setLoading] = useState(true);
const [selectProject, setSelectProject] = useState([]);
const projectReduxState = useSelector((state) => state.project);
const { teamPermission } = useSelector((state) => state.team);
// use effect to redirect user to team page if newTeam is not found
useEffect(() => {
if (location.pathname.includes('/teams/add-projects') && !newTeam?.name && organization?.domain) {
history.push(`/org/${organization?.domain}/teams`);
} else if (!team?.id && !newTeam?.name && organization?.domain) {
const teamId = parseInt(location.pathname.split('teams/')[1], 10);
loadTeam(teamId);
}
}, [organization]);
// useEffect to add projects to new team as we select them
useEffect(() => {
if (newTeam?.projects && newTeam?.name) {
newTeamData({ ...newTeam, projects: [...selectProject] });
} else if (selectProject.length > 0 && newTeam?.name) {
newTeamData({ ...newTeam, projects: [...selectProject] });
}
}, [selectProject]);
// USE EFFECT FOR FETCHING ALL PROJECTS IF COMPONENT IS NOT FETCHED IN CREATION STAGE
useEffect(() => {
// Edit mode
if (team?.id && projectReduxState?.projects?.length > 0) {
const allProjects = projectReduxState?.projects.filter((project) => !team?.projects.includes(project.id));
setAllPersonalProjects(allProjects);
setLoading(false);
} else if (team?.id && projectReduxState?.projects?.length === 0 && organization?.id) {
dispatch(loadMyProjectsAction());
}
// Creation mode
if (!team?.id && projectReduxState?.projects?.length > 0) {
setAllPersonalProjects(projectReduxState?.projects);
setLoading(false);
} else if (!team?.id && projectReduxState?.projects?.length === 0 && organization?.id) {
dispatch(loadMyProjectsAction());
}
}, [dispatch, projectReduxState?.projects, team, organization?.id]);
const searchProjects = ({ target }) => {
const { value } = target;
if (value.length > 0) {
const filteredProjects = allPersonalProjects.filter((project) => project.name.toLowerCase().includes(value.toLowerCase()));
setAllPersonalProjects(filteredProjects);
} else if (team?.id) {
const allProjects = projectReduxState?.projects.filter((project) => !team?.projects.includes(project.id));
setAllPersonalProjects(allProjects);
} else if (!team?.id) {
setAllPersonalProjects(projectReduxState?.projects);
setLoading(false);
}
};
const primaryColor = getGlobalColor('--main-primary-color');
return (
<div className="team-project-page">
<div className="content">
<div className="inner-content">
<div className="add-team-projects">
<div className="team-projects-top-section">
<div>
<div className="organization-name">{organization?.name}</div>
<div className="title-image">
<div>
<h1 className="title">Add projects</h1>
</div>
</div>
</div>
<div
className="back-to-section"
onClick={() => {
if (team?.id) {
history.push(`/org/${organization?.domain}/teams/${team?.id}`);
} else {
history.push(`/org/${organization?.domain}/teams`);
}
}}
>
<FontAwesomeIcon icon={faAngleLeft} className="back-icon" />
<span>Back to team</span>
</div>
</div>
<div className="project-tabs">
<Tabs className="main-tabs" defaultActiveKey="Projects" id="uncontrolled-tab-example">
<Tab eventKey="Projects" title="Projects">
<div className="flex-button-top">
<div className="team-controller">
{team?.id && (
<div className="search-and-filters">
<div className="search-bar">
<input type="text" className="search-input" placeholder="Search project" onChange={searchProjects} />
{/* <img src={searchimg} alt="search" /> */}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" css-inspector-installed="true">
<path
d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58175 3 3.00003 6.58172 3.00003 11C3.00003 15.4183 6.58175 19 11 19Z"
stroke={primaryColor}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M21 20.9984L16.65 16.6484" stroke={primaryColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
</div>
)}
<div className="team-project-btns">
<div className="project-selection">
<p>{selectProject?.length} projects have been selected. </p>
</div>
{teamPermission?.Team?.includes('team:add-project') && team?.id && (
<Buttons
icon={faPlus}
type="button"
text="Add projects to team"
primary
width="188px"
height="32px"
hover
onClick={() => {
if (selectProject.length > 0) {
addProjectToTeam(team?.id, selectProject)
.then((result) => {
Swal.fire({
icon: 'success',
title: result?.message,
});
loadTeam(team?.id);
history.push(`/org/${organization?.domain}/teams/${team?.id}`);
}).catch((err) => {
Swal.fire({
icon: 'error',
title: err?.message,
});
});
}
}}
/>
)}
{newTeam?.name && (
<Buttons
type="button"
text="Finish"
primary
width="100px"
height="32px"
hover
onClick={() => {
Swal.showLoading();
createTeam({ ...newTeam, organization_id: organization?.id })
.then(() => {
Swal.fire({
icon: 'success',
title: 'Team added successfully.',
});
loadTeams();
history.push(`/org/${organization?.domain}/teams`);
})
.catch((err) => {
console.log(err);
Swal.fire({
icon: 'error',
title: 'Error',
text: 'Create Team failed, kindly try again.',
});
});
}}
/>
)}
</div>
</div>
</div>
<div className="list-of-team-projects">
{loading ? (
<Alert variant="primary" className="alert">
Loading...
</Alert>
) : allPersonalProjects.length > 0 ? (
allPersonalProjects?.map((project) => (
<TeamProjectCard
backgroundImg={project?.thumb_url}
title={project?.name}
className="mrt"
key={project?.id}
selectProject={selectProject}
setSelectProject={setSelectProject}
project={project}
/>
))
) : (
<Alert variant="danger" className="alert">
No project found.
</Alert>
)}
</div>
</Tab>
<Tab eventKey="Search" title="Search">
<div className="flex-button-top">
<div className="team-controller">
<div className="team-project-btns">
<div className="project-selection">
<p>{selectProject?.length} projects have been selected. </p>
</div>
<Buttons icon={faPlus} text="Add projects to team" type="button" primary width="188px" height="32px" hover disabled={selectProject?.length === 0} onClick={() => {
if (selectProject.length > 0) {
addProjectToTeam(team?.id, selectProject)
.then((result) => {
Swal.fire({
icon: 'success',
title: result?.message,
});
loadTeam(team?.id);
history.push(`/org/${organization?.domain}/teams/${team?.id}`);
}).catch((err) => {
Swal.fire({
icon: 'error',
title: err?.message,
});
});
}
}} />
</div>
</div>
</div>
<SearchInterface fromTeam selectProject={selectProject} setSelectProject={setSelectProject} />
</Tab>
</Tabs>
</div>
</div>
</div>
</div>
</div>
);
}
Example #5
| Source File: LaddersQuestionPage.js From Frontend with Apache License 2.0 | 4 votes |
|
function LaddersQuestionPage(props) {
// console.log(props);
const [type1, setType1] = useState(
props.type === 'list' ? 'practice' : 'ladder'
)
const [problems, setProblems] = useState(null)
const [show, setShow] = useState(true)
const creds = JSON.parse(localStorage.getItem('creds'))
const [prevPage, setPrevPage] = useState('')
const [firstPage, setFirstPage] = useState(
'/' + props.wise + '/' + type1 + '/' + props.slug + '?page=1'
)
const [nextPage, setNextPage] = useState('')
const [lastPage, setLastPage] = useState('')
const [locked, setlocked] = useState(false)
//for reload button after doing the question
const updateReload = () => {
window.location.reload()
}
useEffect(() => {
if (problems != null) {
//URLs for related pages
setPrevPage(
'/' +
props.wise +
'/' +
type1 +
'/' +
props.slug +
'?page=' +
(problems.meta.current_page - 1)
)
setNextPage(
'/' +
props.wise +
'/' +
type1 +
'/' +
props.slug +
'?page=' +
(problems.meta.current_page + 1)
)
setLastPage(
'/' +
props.wise +
'/' +
type1 +
'/' +
props.slug +
'?page=' +
problems.meta.last_page
)
//if the last unsolved question is not at this page
if (problems.meta.curr_unsolved_page != problems.meta.current_page) {
setlocked(true)
}
}
})
useEffect(() => {
if (creds) {
async function fetchData() {
const res = await fetch(
`https://api.codedigger.tech/lists/${props.wise}/${props.type}/${props.slug}${props.pageNo}`,
{
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${creds.access}`,
},
}
)
res
.json()
.then((res) => setProblems(res))
.then((show) => setShow(false))
}
fetchData()
} else {
async function fetchData() {
const res = await fetch(
`https://api.codedigger.tech/lists/${props.wise}/${props.type}/${props.slug}${props.pageNo}`,
{
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
}
)
res
.json()
.then((res) => setProblems(res))
.then((show) => setShow(false))
}
fetchData()
}
}, [])
var count = 0
var solvedBtn = -1
var button = false
return show == true ? (
<Loading />
) : (
<div>
<Navbar />
<h2 style={{ textAlign: 'center', marginTop: '120px', fontSize: '45px' }}>
{problems.meta.name}
</h2>
{/* Button to reload the page whenever the user solves a question */}
<Button variant="success" className="updateBtn" onClick={updateReload}>
Update
</Button>
<div
className="container-fluid"
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
padding: '0rem 0rem',
}}
>
{/* if it is first page dont display prev and first page pointers */}
{problems.meta.current_page != 1 ? (
<>
<OverlayTrigger placement="top" overlay={renderTooltip1}>
<a href={firstPage}>
<FontAwesomeIcon
className="pageNavIcons"
icon={faAngleDoubleLeft}
/>
</a>
</OverlayTrigger>
<OverlayTrigger placement="top" overlay={renderTooltip2}>
<a href={prevPage}>
<FontAwesomeIcon
className="pageNavIcons"
icon={faAngleLeft}
style={{ marginLeft: '13px' }}
/>
</a>
</OverlayTrigger>
</>
) : (
<></>
)}
{problems.meta.current_page === 1 ? (
<div
className="container-card marginLeftOfCards"
style={{ marginTop: '75px' }}
>
{problems.result.map((ProblemData) => {
count++
if (ProblemData.solved === false && solvedBtn === -1) {
solvedBtn = count
}
return (
<>
{locked ? (
<MainCard
type={props.type}
count={20}
ProblemData={ProblemData}
solvedBtn={10}
/>
) : (
<MainCard
type={props.type}
count={count}
ProblemData={ProblemData}
solvedBtn={solvedBtn}
/>
)}
</>
)
})}
</div>
) : problems.meta.current_page == problems.meta.last_page ? (
<div className="container-card" style={{ marginTop: '75px' }}>
{problems.result.map((ProblemData) => {
count++
if (ProblemData.solved === false && solvedBtn === -1) {
solvedBtn = count
}
return (
<>
{locked ? (
<MainCard
type={props.type}
count={20}
ProblemData={ProblemData}
solvedBtn={10}
last={'true'}
/>
) : (
<MainCard
type={props.type}
count={count}
ProblemData={ProblemData}
solvedBtn={solvedBtn}
last={'true'}
/>
)}
</>
)
})}
</div>
) : (
<div className="container-card" style={{ marginTop: '75px' }}>
{problems.result.map((ProblemData) => {
count++
if (ProblemData.solved === false && solvedBtn === -1) {
solvedBtn = count
}
return (
<>
{locked ? (
<MainCard
type={props.type}
count={20}
ProblemData={ProblemData}
solvedBtn={10}
/>
) : (
<MainCard
type={props.type}
count={count}
ProblemData={ProblemData}
solvedBtn={solvedBtn}
/>
)}
</>
)
})}
</div>
)}
{/* if it is last page, dont display last and next pointers */}
{problems.meta.current_page != problems.meta.last_page ? (
<>
<OverlayTrigger placement="top" overlay={renderTooltip3}>
<a href={nextPage} style={{ position: 'absolute', right: '7%' }}>
<FontAwesomeIcon className="pageNavIcons" icon={faAngleRight} />
</a>
</OverlayTrigger>
<OverlayTrigger placement="top" overlay={renderTooltip4}>
<a href={lastPage} style={{ position: 'absolute', right: '2%' }}>
<FontAwesomeIcon
className="pageNavIcons"
icon={faAngleDoubleRight}
/>
</a>
</OverlayTrigger>
</>
) : (
<></>
)}
</div>
<FooterSmall />
</div>
)
}
Example #6
| Source File: DemoSidebar.jsx From react-lte with MIT License | 4 votes |
|
export default function DemoSidebar() {
return (
<MainSidebar logo={logo} brandName='AdminLTE 3'>
<SidebarUser avatar={user2} href='#' name='Alexander Pierce' />
<NavSidebar>
<NavItem>
<NavLink tag={Link} to='/'>
<FontAwesomeIcon icon={faTachometerAlt} className='nav-icon' />
<p>Dashboard</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink tag={Link} to='/widgets'>
<FontAwesomeIcon icon={faTh} className='nav-icon' />
<p>
Widgets
<Badge color='danger' className='right'>
New
</Badge>
</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink href='#'>
<FontAwesomeIcon icon={faCopy} className='nav-icon' />
<p>
Layout Options
<FontAwesomeIcon icon={faAngleLeft} className='right' />
<Badge color='info' className='right'>
6
</Badge>
</p>
</NavLink>
<ul className='nav nav-treeview'>
<NavItem>
<NavLink tag={Link} to='#'>
<FontAwesomeIcon icon={farCircle} className='nav-icon' />
<p>Top Navigation</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink tag={Link} to='#'>
<FontAwesomeIcon icon={farCircle} className='nav-icon' />
<small>Top Navigation + Sidebar</small>
</NavLink>
</NavItem>
<NavItem>
<NavLink tag={Link} to='#'>
<FontAwesomeIcon icon={farCircle} className='nav-icon' />
<p>Boxed</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink tag={Link} to='#'>
<FontAwesomeIcon icon={farCircle} className='nav-icon' />
<p>Fixed Sidebar</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink tag={Link} to='#'>
<FontAwesomeIcon icon={farCircle} className='nav-icon' />
<small>Fixed Sidebar + Custom Area</small>
</NavLink>
</NavItem>
<NavItem>
<NavLink tag={Link} to='#'>
<FontAwesomeIcon icon={farCircle} className='nav-icon' />
<p>Fixed Navbar</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink tag={Link} to='#'>
<FontAwesomeIcon icon={farCircle} className='nav-icon' />
<p>Fixed Footer</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink tag={Link} to='#'>
<FontAwesomeIcon icon={farCircle} className='nav-icon' />
<p>Collapsed Sidebar</p>
</NavLink>
</NavItem>
</ul>
</NavItem>
<NavItem>
<NavLink href='#'>
<FontAwesomeIcon icon={faChartPie} className='nav-icon' />
<p>
Charts
<FontAwesomeIcon icon={faAngleLeft} className='right' />
</p>
</NavLink>
<ul className='nav nav-treeview'>
<NavItem>
<NavLink tag={Link} to='#'>
<FontAwesomeIcon icon={farCircle} className='nav-icon' />
<p>ChartJS</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink tag={Link} to='#'>
<FontAwesomeIcon icon={farCircle} className='nav-icon' />
<p>Flot</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink tag={Link} to='#'>
<FontAwesomeIcon icon={farCircle} className='nav-icon' />
<p>Inline</p>
</NavLink>
</NavItem>
</ul>
</NavItem>
<NavItem>
<NavLink href='#'>
<FontAwesomeIcon icon={faTree} className='nav-icon' />
<p>
UI Elements
<FontAwesomeIcon icon={faAngleLeft} className='right' />
</p>
</NavLink>
<ul className='nav nav-treeview'>
<NavItem>
<NavLink tag={Link} to='#'>
<FontAwesomeIcon icon={farCircle} className='nav-icon' />
<p>General</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink tag={Link} to='#'>
<FontAwesomeIcon icon={farCircle} className='nav-icon' />
<p>Icons</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink tag={Link} to='#'>
<FontAwesomeIcon icon={farCircle} className='nav-icon' />
<p>Buttons</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink tag={Link} to='#'>
<FontAwesomeIcon icon={farCircle} className='nav-icon' />
<p>Sliders</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink tag={Link} to='#'>
<FontAwesomeIcon icon={farCircle} className='nav-icon' />
<p>Modals & Alerts</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink tag={Link} to='#'>
<FontAwesomeIcon icon={farCircle} className='nav-icon' />
<p>Navbar & Tabs</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink tag={Link} to='#'>
<FontAwesomeIcon icon={farCircle} className='nav-icon' />
<p>Timeline</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink tag={Link} to='#'>
<FontAwesomeIcon icon={farCircle} className='nav-icon' />
<p>Ribbons</p>
</NavLink>
</NavItem>
</ul>
</NavItem>
<NavItem>
<NavLink href='#'>
<FontAwesomeIcon icon={faEdit} className='nav-icon' />
<p>
Forms
<FontAwesomeIcon icon={faAngleLeft} className='right' />
</p>
</NavLink>
<ul className='nav nav-treeview'>
<NavItem>
<NavLink tag={Link} to='#'>
<FontAwesomeIcon icon={farCircle} className='nav-icon' />
<p>General Elements</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink tag={Link} to='#'>
<FontAwesomeIcon icon={farCircle} className='nav-icon' />
<p>Advanced Elements</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink tag={Link} to='#'>
<FontAwesomeIcon icon={farCircle} className='nav-icon' />
<p>Editors</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink tag={Link} to='#'>
<FontAwesomeIcon icon={farCircle} className='nav-icon' />
<p>Validation</p>
</NavLink>
</NavItem>
</ul>
</NavItem>
<NavItem>
<NavLink href='#'>
<FontAwesomeIcon icon={faTable} className='nav-icon' />
<p>
Tables
<FontAwesomeIcon icon={faAngleLeft} className='right' />
</p>
</NavLink>
<ul className='nav nav-treeview'>
<NavItem>
<NavLink tag={Link} to='#'>
<FontAwesomeIcon icon={farCircle} className='nav-icon' />
<p>Simple Tables</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink tag={Link} to='#'>
<FontAwesomeIcon icon={farCircle} className='nav-icon' />
<p>DataTables</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink tag={Link} to='#'>
<FontAwesomeIcon icon={farCircle} className='nav-icon' />
<p>jsGrid</p>
</NavLink>
</NavItem>
</ul>
</NavItem>
</NavSidebar>
</MainSidebar>
);
}
