yusufipek/trillo-react
1
0
Fork 0
mirror of https://github.com/yusufipk/trillo-react.git synced 2026-09-11 19:06:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

styled navbar

Browse Source
This commit is contained in:
Yusuf Ipek
2021-05-09 12:37:40 +03:00
parent 42355f9430
commit e09f62bb39
4 changed files with 124 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/commons/navigation/navigation.jsx
+44 -1
View File
@@ -1,5 +1,48 @@
import sprite from "../img/sprite.svg";
function Nav() {
return <nav className="sidebar">Navigation</nav>;
return (
<nav className="sidebar">
<ul className="sidebar__side-nav">
<li className="sidebar__side-nav--item sidebar__side-nav--item--active">
<a href="#" className="sidebar__side-nav--link">
<svg className="sidebar__side-nav--icon">
<use href={`${sprite}#icon-home`}></use>
</svg>
<span>Hotel</span>
</a>
</li>
<li className="sidebar__side-nav--item">
<a href="#" className="sidebar__side-nav--link">
<svg className="sidebar__side-nav--icon">
<use href={`${sprite}#icon-aircraft-take-off`}></use>
</svg>
<span>Flight</span>
</a>
</li>
<li className="sidebar__side-nav--item">
<a href="#" className="sidebar__side-nav--link">
<svg className="sidebar__side-nav--icon">
<use href={`${sprite}#icon-key`}></use>
</svg>
<span>Car rental</span>
</a>
</li>
<li className="sidebar__side-nav--item">
<a href="#" className="sidebar__side-nav--link">
<svg className="sidebar__side-nav--icon">
<use href={`${sprite}#icon-map`}></use>
</svg>
<span>Tours</span>
</a>
</li>
</ul>
<div className="legal">&copy; 2017 by trillo. All rights reserved.</div>
</nav>
);
}
export default Nav;