Profile dropdown updates (#11184)

* tooltips 1.0.1

* tooltips 1.0.1

* dropdown fun

app/assets/stylesheets/components/header.scss

@@ -2,7 +2,6 @@
 
 .crayons-header {
   --indicator-outline: var(--header-bg);
-  --dropdown-display: none;
 
   height: var(--header-height);
   background: var(--header-bg);
@@ -95,6 +94,11 @@
   display: flex;
   align-items: center;
   z-index: 20;
+
+  @media (min-width: $breakpoint-s) {
+    perspective: 1000px;
+  }
+
   &__trigger {
     all: unset;
     padding: var(--su-1);
@@ -105,14 +109,26 @@
   }
 
   &__dropdown {
-    display: var(--dropdown-display);
+    transform-style: preserve-3d;
     top: var(--header-height);
+    transform-origin: top right;
+    transition: all var(--transition-props);
+    transition-delay: var(--dropdown-delay, 0.25s);
+    transform: var(
+      --dropdown-transform,
+      translateY(calc(1 * var(--su-1))) rotateX(-10deg)
+    );
+    opacity: var(--dropdown-opacity, 0);
+    visibility: var(--dropdown-visibility, hidden);
   }
 
   &.showing,
   &.desktop:hover,
   &.desktop:focus {
-    --dropdown-display: block;
+    --dropdown-transform: translateY(0) rotateX(0);
+    --dropdown-delay: 0;
+    --dropdown-opacity: 1;
+    --dropdown-visibility: visible;
 
     .crayons-header__menu__trigger {
       color: var(--header-icons-color-hover);

app/assets/stylesheets/components/navigation.scss

@@ -67,6 +67,7 @@
   align-items: center;
   padding: var(--su-3);
   border-radius: var(--radius);
+  transition: background var(--transition-props), color var(--transition-props);
 
   &:hover:not(.crayons-link--current) {
     background: var(--link-bg-hover);

app/views/layouts/_nav_menu.html.erb

@@ -1,4 +1,4 @@
-<div class="crayons-dropdown left-2 right-2 s:left-auto p-0 crayons-header__menu__dropdown">
+<div class="crayons-dropdown left-2 right-2 s:left-auto p-0 crayons-header__menu__dropdown block">
   <% if user_signed_in? %>
     <div id="user-profile-link-placeholder" class="border-0 border-b-1 border-solid border-base-20 p-1">
       <a id="first-nav-link" class="crayons-link crayons-link--block">

app/views/layouts/_top_bar.html.erb

@@ -51,7 +51,7 @@
       <div class="crayons-header__menu <% unless user_signed_in? %>s:hidden<% end %>" id="crayons-header__menu">
         <button type="button" class="crayons-header__menu__trigger" id="navigation-butt" aria-label="Navigation menu">
           <% if user_signed_in? %>
-            <span class="crayons-avatar crayons-avatar--l"><img class="crayons-avatar__image" alt="" id="nav-profile-image" /></span>
+            <span class="crayons-avatar crayons-avatar--l"><img class="crayons-avatar__image" alt="" id="nav-profile-image" width="32" height="32" /></span>
           <% else %>
             <%= inline_svg_tag("hamburger.svg", aria: true, class: "crayons-icon", title: "Navigation menu") %>
           <% end %>