feature: footer for the sidebar with avatar and dropdown (hovering up…

…wards)
oaeproject · Dec 9, 2020 · 294bb17 · 294bb17
1 parent 67c14c7
commit 294bb17
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 0 deletions.
diff --git a/src/components/sidebar.js b/src/components/sidebar.js
@@ -105,6 +105,37 @@ class Sidebar extends LitElement {
             </a>
           </li>
         </ul>
+        <footer class="footer sidebar-footer">
+          <nav class="level sidebar-avatar-logout">
+            <!-- Left side -->
+            <div class="level-left">
+              <div class="level-item">
+                <figure class="image is-48x48">
+                  <img class="is-rounded" src="/images/user.jpg" />
+                </figure>
+              </div>
+              <div class="level-item">
+                <div class="dropdown is-hoverable dropdown is-up">
+                  <div class="dropdown-trigger">
+                    <button class="button dropdown-sidebar" aria-haspopup="true" aria-controls="dropdown-menu4">
+                      <span>Sarah Jones</span>
+                      <span class="icon is-small">
+                        <i class="fas fa-angle-down" aria-hidden="true"></i>
+                      </span>
+                    </button>
+                  </div>
+                  <div class="dropdown-menu" id="dropdown-menu4" role="menu">
+                    <div class="dropdown-content">
+                      <div class="dropdown-item">
+                        <button>Logout</button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </nav>
+        </footer>
       </aside>
     `;
 

diff --git a/style/app.scss b/style/app.scss
@@ -163,6 +163,7 @@ body {
   //position: fixed;
   //top: 8.5em;
   margin-top: 1em;
+  min-height: 90vh;
 }
 
 .menu-list {
@@ -239,6 +240,19 @@ button.button.dropdown-sidebar {
   border: none;
 }
 
+// Footer
+.footer.sidebar-footer {
+  position: absolute;
+  bottom: 0;
+  padding: 0;
+  background-color: transparent;
+}
+
+// Sidebar Avatar
+.sidebar-avatar-logout {
+  padding-left: 2%;
+}
+
 // Top Bar
 .top-nav {
   margin: 0.5em 2.5em 0.5em 2.5em;

diff --git a/style/testing-styles.scss b/style/testing-styles.scss
@@ -120,6 +120,11 @@ button.button.dropdown-sidebar {
   margin-bottom: 0;
 }
 
+// Sidebar Avatar
+.sidebar-avatar-logout {
+  padding-left: 2%;
+}
+
 // Main content
 .main-content {
   height: 100%;
@@ -130,3 +135,4 @@ button.button.dropdown-sidebar {
   height: 50px;
   border-radius: 50%;
 }
+