diff --git a/src/layouts/main/components/sidebar/SidebarItem.scss b/src/layouts/main/components/sidebar/SidebarItem.scss
new file mode 100644
index 0000000..1bd8f82
--- /dev/null
+++ b/src/layouts/main/components/sidebar/SidebarItem.scss
@@ -0,0 +1,15 @@
+@import "~scss/variables";
+
+#main-sidebar .nav-item {
+ .nav-link {
+ color: $main-sidebar-color;
+ }
+
+ .sidebar-icon {
+ margin-right: 0.5rem;
+ }
+
+ &:hover {
+ background: $main-sidebar-hover-bg;
+ }
+}
\ No newline at end of file
diff --git a/src/layouts/main/components/sidebar/SidebarItem.tsx b/src/layouts/main/components/sidebar/SidebarItem.tsx
new file mode 100644
index 0000000..d198cc5
--- /dev/null
+++ b/src/layouts/main/components/sidebar/SidebarItem.tsx
@@ -0,0 +1,31 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+import "./SidebarItem.scss";
+
+import Nav from "react-bootstrap/Nav";
+
+type SidebarItemProps = {
+ url: string,
+ text: string,
+ icon: string
+};
+
+export class SidebarItem extends Component {
+ public static propTypes = {
+ url: PropTypes.string.isRequired,
+ text: PropTypes.string.isRequired,
+ icon: PropTypes.string.isRequired
+ }
+
+ render() {
+ const { url, text, icon } = this.props;
+
+ return
+
+
+ {text}
+
+
+ }
+}
\ No newline at end of file
diff --git a/src/layouts/main/components/sidebar/index.scss b/src/layouts/main/components/sidebar/index.scss
index f4b42a3..7c88354 100644
--- a/src/layouts/main/components/sidebar/index.scss
+++ b/src/layouts/main/components/sidebar/index.scss
@@ -1,5 +1,4 @@
@import "~scss/variables";
-@import "~bootstrap/scss/mixins/breakpoints";
#main-sidebar {
width: $main-sidebar-width;
@@ -26,16 +25,6 @@
flex: 1;
}
- .nav-item {
- .nav-link {
- color: $main-sidebar-color;
- }
-
- &:hover {
- background: $main-sidebar-hover-bg;
- }
- }
-
/* Separator headers */
h6 {
font-size: 0.8em;
diff --git a/src/layouts/main/components/sidebar/index.tsx b/src/layouts/main/components/sidebar/index.tsx
index 5147ce8..37325e8 100644
--- a/src/layouts/main/components/sidebar/index.tsx
+++ b/src/layouts/main/components/sidebar/index.tsx
@@ -4,6 +4,7 @@
import Nav from "react-bootstrap/Nav";
import { TotalBalance } from "./TotalBalance";
+import { SidebarItem } from "./SidebarItem";
import Footer from "./Footer";
export default function() {
@@ -12,35 +13,18 @@
-
- Dashboard
-
-
- My Wallets
-
-
- Address Book
-
-
- Transactions
-
-
- Names
-
-
- Mining
-
+
+
+
+
+
+
Network
-
- Blocks
-
-
- Transactions
-
-
- Names
-
+
+
+
+
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index ed86b0e..1262472 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -8,7 +8,10 @@
$font-family-base: "Lato", sans-serif;
/* Import Bootstrap after redefining */
-@import "~bootstrap/scss/functions", "~bootstrap/scss/variables";
+@import
+ "~bootstrap/scss/functions",
+ "~bootstrap/scss/variables",
+ "~bootstrap/scss/mixins/breakpoints";
/* -------------------------------------------------------------------------- */
/* NAVBAR */