talksik/clean-force
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

home page set up with nav bar

Browse Source
This commit is contained in:
talksik
2020-09-04 13:32:21 -07:00
parent 907a0476e8
commit 342c108e92
9 changed files with 125 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/home/home.js
+37 -3
View File
@@ -46,9 +46,43 @@ export default function Home() {
class ComponentSelection extends React.Component {
render() {
return (
<div>
<h2>alright we are in the component selection home page</h2>
<NavLink to="/dashboard">dashboard</NavLink>
<div class="wrapper">
<div class="nav">
<ul>
<li>
<NavLink activeClassName="active" to="/">
Home
</NavLink>
</li>
<li>
<NavLink activeClassName="active" to="/dashboard">
Dashboard
</NavLink>
</li>
<li>
<NavLink activeClassName="active" to="/start">
Get Started
</NavLink>
</li>
<li>
<NavLink activeClassName="active" to="/docs">
Docs
</NavLink>
</li>
<li>
<NavLink activeClassName="active" to="/pricing">
Pricing
</NavLink>
</li>
</ul>
</div>
<div class="pages">
<div class="card">
<div class="card-header">Rameelo</div>
</div>
<div class="card"></div>
</div>
</div>
);
}
src/components/home/home.scss
+41
View File
@@ -1 +1,42 @@
@import '../../styles/index';
.nav {
@extend %flex;
flex-direction: row;
ul {
@extend %flex;
padding-inline-start: 0 !important;
flex-direction: row;
align-items: stretch;
list-style: none;
}
li {
margin-right: 30px;
}
a {
text-decoration: none !important;
color: $secondary-text;
}
.active {
padding: 7px 10px;
background-color: $primary-color;
border-radius: 100px;
color: white;
}
}
div .pages {
@extend %flex;
margin: 20px;
flex-direction: row;
.card {
height: 200px;
width: 200px;
}
}