From 394772c32c372b5404dbf3dd6aa11c88e4048f69 Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Wed, 19 Jul 2017 17:35:25 -0400
Subject: [PATCH] more nav restyling

---
 client/components/Nav.jsx          | 190 +++++++++--------------------
 client/styles/components/_nav.scss |   9 +-
 2 files changed, 61 insertions(+), 138 deletions(-)

diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index 5b4aebcf..24d3f1e2 100644
--- a/client/components/Nav.jsx
+++ b/client/components/Nav.jsx
@@ -6,6 +6,10 @@ const triangleUrl = require('../images/down-filled-triangle.svg');
 const logoUrl = require('../images/p5js-logo-small.svg');
 
 class Nav extends React.PureComponent {
+  isUserOwner() {
+    return this.props.project.owner && this.props.project.owner.id === this.props.user.id;
+  }
+
   render() {
     return (
       <nav className="nav" role="navigation" title="main-navigation">
@@ -19,7 +23,7 @@ class Nav extends React.PureComponent {
               <InlineSVG src={triangleUrl} />
             </button>
             <ul className="nav__dropdown">
-              <li>
+              <li className="nav__dropdown-item">
                 <button
                   onClick={() => {
                     if (!this.props.unsavedChanges) {
@@ -32,25 +36,50 @@ class Nav extends React.PureComponent {
                   New
                 </button>
               </li>
-              <li>
-                <button>
+              { (!this.props.project.owner || this.isUserOwner()) &&
+              <li className="nav__dropdown-item">
+                <button
+                  onClick={() => {
+                    if (this.props.user.authenticated) {
+                      this.props.saveProject();
+                    } else {
+                      this.props.showErrorModal('forceAuthentication');
+                    }
+                  }}
+                >
                   Save
                 </button>
-              </li>
-              <li>
-                <button>
+              </li> }
+              { this.props.project.id && this.props.user.authenticated &&
+              <li className="nav__dropdown-item">
+                <button onClick={this.props.cloneProject}>
                   Duplicate
                 </button>
-              </li>
-              <li>
-                <button>
-                  Open
+              </li> }
+              { this.props.project.id &&
+              <li className="nav__dropdown-item">
+                <button onClick={this.props.showShareModal}>
+                  Share
                 </button>
-              </li>
-              <li>
-                <button>
+              </li> }
+              { this.props.project.id &&
+              <li className="nav__dropdown-item">
+                <button onClick={() => this.props.exportProjectAsZip(this.props.project.id)}>
                   Download
                 </button>
+              </li> }
+              { this.props.user.authenticated &&
+              <li className="nav__dropdown-item">
+                <Link to={`/${this.props.user.username}/sketches`}>
+                  Open
+                </Link>
+              </li> }
+              <li className="nav__dropdown-item">
+                <Link
+                  to="/p5/sketches"
+                >
+                  Examples
+                </Link>
               </li>
             </ul>
           </li>
@@ -60,10 +89,10 @@ class Nav extends React.PureComponent {
               <InlineSVG src={triangleUrl} />
             </button>
             <ul className="nav__dropdown">
-              <li>
+              <li className="nav__dropdown-item">
                 Tidy Code
               </li>
-              <li>
+              <li cclassName="nav__dropdown-item">
                 Find
               </li>
             </ul>
@@ -74,10 +103,10 @@ class Nav extends React.PureComponent {
               <InlineSVG src={triangleUrl} />
             </button>
             <ul className="nav__dropdown">
-              <li>
+              <li className="nav__dropdown-item">
                 Run
               </li>
-              <li>
+              <li className="nav__dropdown-item">
                 Stop
               </li>
             </ul>
@@ -88,128 +117,23 @@ class Nav extends React.PureComponent {
               <InlineSVG src={triangleUrl} />
             </button>
             <ul className="nav__dropdown">
-              <li>
+              <li className="nav__dropdown-item">
                 Keyboard Shortcuts
               </li>
-              <li>
-                Reference
+              <li className="nav__dropdown-item">
+                <a
+                  href="https://p5js.org/reference/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >Reference</a>
               </li>
-              <li>
-                About
+              <li className="nav__dropdown-item">
+                <Link to="/about">
+                  About
+                </Link>
               </li>
             </ul>
           </li>
-
-          <li className="nav__item">
-            <button
-              className="nav__new"
-              onClick={() => {
-                if (!this.props.unsavedChanges) {
-                  this.props.newProject();
-                } else if (this.props.warnIfUnsavedChanges()) {
-                  this.props.newProject();
-                }
-              }}
-            >
-              New
-            </button>
-          </li>
-          {(() => { // eslint-disable-line
-            if (
-              !this.props.project.owner ||
-              (this.props.project.owner && this.props.project.owner.id === this.props.user.id)
-            ) {
-              return (
-                <li className="nav__item">
-                  <button
-                    className="nav__save"
-                    onClick={() => {
-                      if (this.props.user.authenticated) {
-                        this.props.saveProject();
-                      } else {
-                        this.props.showErrorModal('forceAuthentication');
-                      }
-                    }}
-                  >
-                    Save
-                  </button>
-                </li>
-              );
-            }
-          })()}
-          {(() => { // eslint-disable-line
-            if (this.props.project.id && this.props.user.authenticated) {
-              return (
-                <li className="nav__item">
-                  <button className="nav__clone" onClick={this.props.cloneProject}>
-                    Duplicate
-                  </button>
-                </li>
-              );
-            }
-          })()}
-          {(() => { // eslint-disable-line
-            if (this.props.project.id) {
-              return (
-                <li className="nav__item">
-                  <button className="nav__export" onClick={() => this.props.exportProjectAsZip(this.props.project.id)}>
-                    Download
-                  </button>
-                </li>
-              );
-            }
-          })()}
-          {(() => { // eslint-disable-line
-            if (this.props.project.id) {
-              return (
-                <li className="nav__item">
-                  <button onClick={this.props.showShareModal}>
-                    Share
-                  </button>
-                </li>
-              );
-            }
-          })()}
-          {(() => { // eslint-disable-line
-            if (this.props.user.authenticated) {
-              return (
-                <li className="nav__item">
-                  <p className="nav__open">
-                    <Link
-                      to={`/${this.props.user.username}/sketches`}
-                    >
-                      Open
-                    </Link>
-                  </p>
-                </li>
-              );
-            }
-          })()}
-          <li className="nav__item">
-            <p className="nav__open">
-              <Link
-                to="/p5/sketches"
-              >
-                Examples
-              </Link>
-            </p>
-          </li>
-          <li className="nav__item">
-            <p className="nav__reference">
-              <a
-                href="https://p5js.org/reference/"
-                target="_blank"
-                rel="noopener noreferrer"
-              >Reference</a>
-            </p>
-          </li>
-          <li className="nav__item">
-            <p className="nav__about">
-              <Link to="/about">
-                About
-              </Link>
-            </p>
-          </li>
         </ul>
         <ul className="nav__items-right" title="user-menu">
           {(() => {
diff --git a/client/styles/components/_nav.scss b/client/styles/components/_nav.scss
index 02112a13..7bba9a1d 100644
--- a/client/styles/components/_nav.scss
+++ b/client/styles/components/_nav.scss
@@ -28,7 +28,6 @@
 .nav__item {
 	position: relative;
 	padding: 0 #{24 / $base-font-size}rem;
-	text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -49,15 +48,15 @@
 		border: 1px solid map-get($theme-map, 'modal-border-color');
 		box-shadow: 0 0 18px getThemifyVariable('shadow-color');
 	}
-  @extend %hidden-element;
+  display: none;
 	text-align: left;
 	width: #{140 / $base-font-size}rem;
-	.nav__item:hover & {
+	.nav__item:hover &, .nav__item--open & {
 		display: flex;
 		position: absolute;
 		flex-direction: column;
-  	top: #{-8 / $base-font-size}rem;;
-		left: #{-11 / $base-font-size}rem;
+  	top: 50%;
+		left: 0;
 		height: auto;
 	}
 	padding-bottom: #{8 / $base-font-size}rem;