2023-03-04

src/views/partials/navbar.hbs

@@ -0,0 +1,30 @@
+<div class="Header-container Grid u-flexAlignItemsCenter">
+  <div class="Grid-cell u-sizeFill">
+    <div class="Header-banner Grid u-flexAlignItemsCenter">
+      <a href="/" class="Grid-cell u-sizeFit u-flexInline u-flexAlignItemsCenter u-textDecorationNone">
+        <div class="Header-bannerLogo">
+          <img class="logo" src="/media/benchcoach.svg" alt="BenchCoach Logo">
+        </div>
+      </a>
+      <div class="Grid-cell u-flexInline u-flexJustifyEnd u-sizeFill u-padSidesSm">
+        {{#if user}}
+        <div class="Popup">
+          <div class="Button Button--small Popup-toggle" onclick="this.closest('.Popup').querySelector('.Popup-container').classList.toggle('is-open')">
+            Account
+          </div>
+          <div class="Popup-container Popup-container--down Popup-container--right u-sizeFit">
+            <div class="Popup-content u-padXs u-sizeFit u-fontSizeSm">
+              <h6 class="h6 title u-textNoWrap u-fontSizeSm u-textSemiBold">{{user.first_name}} {{user.last_name}}</h6>
+              <div class="u-textNoWrap u-fontSizeSm">{{user.email}}</div>
+              <hr class="Divider u-spaceEndsNone">
+              <a href="/logout">Logout</a>
+            </div>
+          </div>
+        </div>
+
+        {{/if}}
+      </div>
+                
+    </div>
+  </div>
+</div>

src/views/partials/navbar.pug

@@ -0,0 +1,25 @@
+header.Header
+  .Header-container.Grid.u-flexAlignItemsCenter
+    .Grid-cell.u-sizeFill
+      .Header-banner.Grid.u-flexAlignItemsCenter
+        a.Grid-cell.u-sizeFit.u-flexInline.u-flexAlignItemsCenter.u-textDecorationNone href=url_for(root_path)
+          div.Header-bannerLogo
+            img(class='logo' src='/media/benchcoach.svg' alt='BenchCoach Logo')
+          span
+            - if defined?(team)
+              h1.Header-bannerTitle #{team.name}
+            - else
+                h1.Header-bannerTitle BenchCoach
+        .Grid-cell.u-flexInline.u-flexJustifyEnd.u-sizeFill.u-padSidesSm
+            - if @user
+              .Popup
+                .Button.Button--small.Popup-toggle onclick="this.closest('.Popup').querySelector('.Popup-container').classList.toggle('is-open')"
+                  | Account
+                .Popup-container.Popup-container--down.Popup-container--right.u-sizeFit
+                  .Popup-content.u-padXs.u-sizeFit.u-fontSizeSm
+                    h6.title.u-textNoWrap.u-fontSizeSm.u-textSemiBold="#{@user['first_name']} #{@user['last_name']}"
+                    .u-textNoWrap.u-fontSizeSm="#{@user['email']}"
+                    hr.Divider.u-spaceEndsNone
+                    a href=url_for(logout_path) Logout
+
+    .Grid-cell.u-sizeFit