Add dropdown menu for user stuff

3 files changed, 76 insertions, 41 deletions

diff --git a/app/scss/main.scss b/app/scss/main.scss
index 160d180..d853758 100644
--- a/app/scss/main.scss
+++ b/app/scss/main.scss
@@ -1,4 +1,5 @@
 @import "page.scss";
 @import "components.scss";
+@import "nav.scss";
 @import "packages.scss";
 @import "packagegrid.scss";
diff --git a/app/scss/nav.scss b/app/scss/nav.scss
new file mode 100644
index 0000000..9cfaeae
--- /dev/null
+++ b/app/scss/nav.scss
@@ -0,0 +1,75 @@
+nav {
+	margin: 0 auto 0 auto;
+	list-style: none;
+	background: #333;
+}
+
+nav .navbar-nav {
+	float: left;
+}
+
+nav .navbar-right {
+	float: right;
+}
+
+nav ul {
+	margin: 0 auto 0 auto;
+	padding: 0;
+	list-style: none;
+}
+
+nav li {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	display: inline-block;
+}
+
+nav li a {
+	color: #ddd;
+	margin: 0;
+	padding: 1em 1em;
+	display: block;
+	border-left: 1px solid #444;
+}
+
+nav a:hover {
+	color: #eee;
+	background: #444;
+	text-decoration: none;
+}
+
+li.dropdown {
+	position: relative;
+	display: inline-block;
+}
+
+.dropdown-menu {
+	display: none;
+	position: absolute;
+	margin: 0;
+	padding: 0;
+	min-width:160px;
+	background: #333;
+	z-index: 1;
+	right: 0;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
+	// display: none;
+}
+
+.dropdown:hover ul {
+	display: block;
+}
+
+.dropdown li {
+	display: block;
+}
+
+.dropdown li a {
+	border: none;
+	border-top: 1px solid #444;
+}
+
+.dropdown li:last-child a {
+	border-bottom: 1px solid #444;
+}
diff --git a/app/scss/page.scss b/app/scss/page.scss
index ae00dc4..ab6d3c4 100644
--- a/app/scss/page.scss
+++ b/app/scss/page.scss
@@ -14,47 +14,6 @@ nav, main, #alerts {
 	display: block;
 }
 
-nav {
-	margin: 0 auto 0 auto;
-	list-style: none;
-	background: #333;
-}
-
-nav .navbar-nav {
-	float: left;
-}
-
-nav .navbar-right {
-	float: right;
-}
-
-nav ul {
-	margin: 0 auto 0 auto;
-	padding: 0;
-	list-style: none;
-}
-
-nav li {
-	margin: 0;
-	padding: 0;
-	list-style: none;
-	display: inline-block;
-}
-
-nav li a {
-	color: #ddd;
-	margin: 0;
-	padding: 1em 1em;
-	display: block;
-	border-left: 1px solid #444;
-}
-
-nav a:hover {
-	color: #eee;
-	background: #444;
-	text-decoration: none;
-}
-
 header {
 	padding: 20px;
 	background: #258;