New nav, 2025

app/assets/javascripts/reimagine2/accessible_global_nav.coffee

@@ -1,18 +1,20 @@
 # Addresses the impossibility to reach the dropdown menus in
 # the global nav bar with the keyboard (using tab)
 @Reimagine2.accessibleGlobalNav = ->
-  $dropDown = $('#global-nav-user-dropdown')
+  $dropDown = $('nav.top-bar .has-dropdown')
 
-  $dropDown.on 'focus', 'a', ->
+  $dropDown.on 'focus', 'a', (e) ->
+    $currentDropdown = $(e.currentTarget).closest('.has-dropdown')
     # Foundation4's top-bar styles support the class
     # hover to open the menu
-    $dropDown.addClass('hover')
+    $currentDropdown.addClass('hover')
 
-  $dropDown.on 'blur', 'a', ->
+  $dropDown.on 'blur', 'a', (e) ->
+    $currentDropdown = $(e.currentTarget).closest('.has-dropdown')
     # need to delay this until after the new element has been focused
     setTimeout( ->
       # if the newly focused element is not inside the dropdown
-      if $(':focus').closest('#global-nav-user-dropdown').length == 0
+      if $(':focus').parents().filter($currentDropdown).length == 0
         # hide the menu
-        $dropDown.removeClass('hover')
+        $currentDropdown.removeClass('hover')
     , 15)

app/assets/javascripts/reimagine2/mobile_global_nav.coffee

@@ -28,3 +28,15 @@
 
     if !$mobileSearchContainer.hasClass("hide")
       $mobileSearchContainer.find("#search").focus()
+
+  $("[data-accordion-tab]").on "click", (e) =>
+    e.preventDefault()
+
+    $link = $(e.currentTarget)
+    $link.toggleClass('expanded')
+
+    targetId = $link.attr('href').substring(1)
+
+    $targetSection = $("[data-accordion-section='#{targetId}']")
+    $targetSection.slideToggle()
+    $('[data-accordion-section').not($targetSection).slideUp();

app/assets/stylesheets/reimagine2/devpost/_global_nav_bar.sass

@@ -1,15 +1,36 @@
 @import "./global_nav_active_states"
 
+$dropdown-links-line-height: 28px
+
 #global-nav
   background: white
   box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px 0px
   box-shadow: 0px 1px 3px rgba(0,0,0,0.3)
   position: relative
 
   .top-bar-section
-    .has-dropdown > a:after
-      border-top-color: transparent
-      border-left-color: $grey-3
+    .dropdown.main-menu-dropdown
+      li a
+        padding: 0
+        line-height: $dropdown-links-line-height
+
+        &:hover
+          background: none
+
+    .has-dropdown
+      & > a:after
+        border-top-color: transparent
+        border-left-color: $grey-3
+
+      .fa-angle-up
+        display: none
+
+      &:hover, &.hover
+        .fa-angle-up
+          display: inline-block
+
+        .fa-angle-down
+          display: none
 
     .logged-out
       @media (max-width: 329px)
@@ -102,13 +123,18 @@
           display: flex
           flex-direction: column
           padding-top: 3px
-          padding-left: 53px
+
+          &.with-icon-offset
+            padding-left: 50px
 
           a
             padding: 6px 6px
             line-height: 16px
             color: $primary-1
 
+    .resource-title
+      font-weight: bold
+
   .name
     float: left
 
@@ -157,8 +183,13 @@
       strong
         display: inline
 
-      @media only screen and (max-width: 1076px)
-        padding: 0 1.18em
+      &:after
+        border: 0 !important
+
+      i
+        margin-left: 4px
+        position: relative
+        top: 1px
 
   .alpha
     display: none
@@ -345,13 +376,42 @@
     color: $grey-3
     font-size: 1.1rem
 
+  .accordion-tab
+    color: $dark
+    font-weight: 500
+    display: block
+    padding: 24px 16px !important
+    max-height: none
+    line-height: $dropdown-links-line-height !important
+    border-bottom: 1px solid $grey-2
+    font-size: 16px !important
+    display: flex
+    align-items: center
+    justify-content: space-between
+
+    .fa-angle-up
+      display: none
+
+    &.expanded
+      .fa-angle-down
+        display: none
+
+      .fa-angle-up
+        display: block
+
+  .accordion-section
+    display: none
+    background: $grey-1
+
+    .panel-section
+      border-bottom: 1px solid #DDE3E6
+
 .ui-autocomplete
   max-width: 300px
 
 .dropdown
   &.float-left
     position: absolute
-    left: -12.125em
     z-index: 1001
 
 .panel-product-content
@@ -362,42 +422,99 @@
     margin-bottom: 0
     line-height: 16px
 
-#floating-menu-wrapper
-  .floating-menu
+.floating-menu-wrapper
+  padding: 32px
+
+  .mobile &
+    padding: 0
+
+  .panel-container
+    flex: 1
+    margin-right: 32px
+    font-size: 14px
+
+    &:last-child, &.mr-0
+      margin-right: 0
+
+    &.mb-4
+      margin-bottom: 16px
+
+    &.bordered
+      border: 1px solid #DDE3E6
+      border-radius: 8px
+
+  .panel-product
     display: flex
-    height: 226px
-    width: 768px
-
-    .panel-container
-      flex: 1
-      padding: 20px 30px 40px
-      font-size: 14px
-
-    .panel-product
-      display: flex
-      grid-column-gap: 12px
-      align-items: flex-start
-      padding: 10px
-      border-radius: 3px
-      font-size: 14px
+    grid-column-gap: 12px
+    align-items: flex-start
+    border-radius: 3px
+    font-size: 14px
+    white-space: normal
+    max-height: initial !important
+    padding: 0 !important
+
+    > *
       white-space: normal
-      max-height: initial
 
-      .title
-        padding-top: 4px
-        padding-bottom: 4px
+  .title
+    margin: 4px 0 6px
+
+  .subtitle
+    color: $blue-grey-6
 
-      .subtitle
-        color: $blue-grey-4
+  .panel-content
+    display: flex
+    flex-direction: column
 
-    .panel-content
-      display: flex
-      flex-direction: column
+    &.with-icon-offset
       padding-top: 10px
-      padding-left: 53px
+      padding-left: 50px
 
-      a
-        padding: 6px 6px
-        border-radius: 3px
-        line-height: 16px
-        color: $primary-1
+    a
+      line-height: $dropdown-links-line-height !important
+      padding: 0 !important
+      border-radius: 3px
+      color: $primary-1
+
+  .panel-section
+    display: block
+    padding: 16px !important
+    max-height: none !important
+
+    &.bordered
+      border-radius: 8px
+      border: 1px solid #DDE3E6
+
+      &.bordered-hover
+        &:hover, &:focus
+          border-color: $anchor-font-color-hover
+
+    &.pt-0
+      padding-top: 0
+
+    .fa-arrow-right
+      float: right
+      line-height: $dropdown-links-line-height
+      color: $blue-grey-4
+
+    a:hover, a:focus
+      .fa-arrow-right
+        color: $anchor-font-color-hover
+
+    p:not(.title)
+      margin-bottom: 0
+
+#join-a-hackathon-dropdown
+  left: -194px
+  width: 820px
+
+#host-a-hackathon-dropdown
+  min-width: 1000px
+
+  @media #{$large}
+    min-width: 1100px
+
+  left: -402px
+
+#resources-dropdown
+  left: -100px

app/assets/stylesheets/reimagine2/foundation/extensions/_flex.sass

@@ -28,6 +28,9 @@
   @media #{$small}
     +align-stretch
 
+.align-start
+  align-items: flex-start
+
 .flex-column
   -ms-flex-direction: column
   -webkit-flex-direction: column
@@ -67,3 +70,6 @@
 
 .flex-columns
   +flex(1)
+
+.is-flex-grow-1
+  flex-grow: 1

app/views/reimagine2/devpost/_global_nav_desktop.html.erb

@@ -11,10 +11,6 @@
 
       <div class="right">
         <ul>
-          <li>
-            <%= link_to 'Host a hackathon', 'https://info.devpost.com', class: 'main-link', data: { role: 'for-orgs' } %>
-          </li>
-
           <li class="search-expand-container desktop main-link">
             <a data-toggle-desktop-search><i class="fas fa-search"></i></a>
           </li>

app/views/reimagine2/devpost/global_nav/_host_a_hackathon_by_use_case_section.html.erb

@@ -0,0 +1,23 @@
+<% arrow_icon = '<i class="fa-arrow-right fas" aria-hidden="true" aria-label="Arrow icon"></i>'.html_safe %>
+
+<%= content_tag :div, class: ["panel-section", local_assigns[:panel_classes]] do %>
+  <div class="panel-content">
+    <p class="title bold">By use case</p>
+
+    <%
+      entries = [
+        ['AI hackathons', 'https://info.devpost.com/product/ai-hackathons'],
+        ['Customer hackathons', 'https://info.devpost.com/product/customer-hackathons'],
+        ['Employee hackathons', 'https://info.devpost.com/product/devpost-for-teams'],
+        ['Public hackathons', 'https://info.devpost.com/product/public-hackathons'],
+      ]
+    %>
+
+    <% entries.each do |entry| %>
+      <% link_copy, link_url = entry %>
+      <%= link_to link_url do %>
+        <%= link_copy %> <%= arrow_icon %>
+      <% end %>
+    <% end %>
+  </div>
+<% end %>

app/views/reimagine2/devpost/global_nav/_host_a_hackathon_devpost_section.html.erb

@@ -0,0 +1,17 @@
+<% arrow_icon = '<i class="fa-arrow-right fas" aria-hidden="true" aria-label="Arrow icon"></i>'.html_safe %>
+
+<div class="panel-section">
+  <a class="panel-product panel-product-content" href="https://info.devpost.com/product/public-hackathons">
+    <%= image_tag 'reimagine2/devpost-logo-mobile.svg', alt: 'Devpost' %>
+    <div>
+      <p class="title bold">Devpost</p>
+      <p class="subtitle">Grow your developer ecosystem and promote your platform</p>
+    </div>
+  </a>
+
+  <div class="panel-content with-icon-offset">
+    <%= link_to "https://info.devpost.com/product/public-hackathons" do %>
+      Host a public hackathon <%= arrow_icon %>
+    <% end %>
+  </div>
+</div>

app/views/reimagine2/devpost/global_nav/_host_a_hackathon_dft_section.html.erb

@@ -0,0 +1,17 @@
+<% arrow_icon = '<i class="fa-arrow-right fas" aria-hidden="true" aria-label="Arrow icon"></i>'.html_safe %>
+
+<div class="panel-section">
+  <a class="panel-product panel-product-content" href="https://info.devpost.com/product/devpost-for-teams">
+    <%= image_tag 'reimagine2/dft-logo-mobile.svg', alt: 'Devpost for Teams logo' %>
+    <div>
+      <p class="title bold">Devpost for Teams</p>
+      <p class="subtitle">Drive innovation, collaboration, and retention within your organization</p>
+    </div>
+  </a>
+
+  <div class="panel-content with-icon-offset">
+    <%= link_to "https://info.devpost.com/product/devpost-for-teams" do %>
+      Host an internal hackathon <%= arrow_icon %>
+    <% end %>
+  </div>
+</div>