Navigation bar

src/__test__/__snapshots__/NavigationBar.test.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NavigationBar renders correctly 1`] = `
+.c6 {
+  color: #0B65CB;
+  cursor: pointer;
+  color: #0B65CB;
+  font: 'Fira Sans Condensed';
+  font-size: 16px;
+  font-weight: normal;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-transform: none;
+  -webkit-transition: 0.2s ease;
+  transition: 0.2s ease;
+  position: relative;
+}
+
+.c6:hover,
+.c6:focus,
+.c6:active {
+  background: none;
+  color: #0B65CB;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c6:hover,
+.c6:focus,
+.c6:active {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c6:before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 2px;
+  bottom: 0;
+  left: 0;
+  background-color: #0B65CB;
+  visibility: hidden;
+}
+
+.c6:hover:before {
+  visibility: visible;
+}
+
+.c6:before {
+  -webkit-transition: 0.2s ease;
+  transition: 0.2s ease;
+  opacity: 0;
+}
+
+.c6:hover:before {
+  opacity: 1;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  min-height: calc(8px * 6);
+  box-shadow: 0 0 1px #0B65CB;
+  margin-bottom: 1px;
+}
+
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c5 {
+  margin: calc(8px * 2) 1rem calc(8px * 2) 1rem;
+}
+
+.c7 > * {
+  height: calc(8px * 6);
+}
+
+.c7:hover:before {
+  visibility: hidden;
+}
+
+.c9 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  margin: calc(8px * 3) 1rem calc(8px * 3) 0;
+}
+
+.c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+  background-color: #cccccc;
+  font-family: 'Fira Sans Condensed';
+}
+
+.c1 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c10 {
+  color: #FFF;
+  margin: 0;
+}
+
+.c3 {
+  box-shadow: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c8 {
+  color: #FFF;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <nav
+      className="c2 c3"
+    >
+      <div
+        className="c4"
+      >
+        <span
+          className="c5"
+        >
+          <a
+            className="c6 c7"
+            href="/"
+            onClick={[Function]}
+          >
+            <span
+              className="c8"
+            >
+              NCBI
+            </span>
+          </a>
+        </span>
+        <span>
+          <span
+            className="c9"
+          >
+            <a
+              className="c6 c10"
+              data-testid="navigationBarLinkId"
+              href="/"
+              onClick={[Function]}
+            >
+              Item1 
+            </a>
+          </span>
+        </span>
+        <span>
+          <span
+            className="c9"
+          >
+            <a
+              className="c6 c10"
+              data-testid="navigationBarLinkId"
+              href="/"
+              onClick={[Function]}
+            >
+              Item2 
+            </a>
+          </span>
+        </span>
+      </div>
+      <div
+        className="c4"
+      >
+        <span
+          className="c9"
+        >
+          <a
+            className="c6"
+            href="/login"
+            onClick={[Function]}
+          >
+            Login
+          </a>
+        </span>
+      </div>
+    </nav>
+  </div>
+</div>
+`;