Add tab navigation to get to item trade pages

app/assets/stylesheets/item_trades/_index.sass

@@ -4,8 +4,9 @@ body.item_trades-index
 	.item-header
 		+item-header
 
-	.item-page-subtitle
+	.item-subpage-title
 		text-align: left
+		margin-bottom: .5em
 
 	.trades-table
 		text-align: left

app/assets/stylesheets/partials/_item_header.sass

@@ -3,33 +3,77 @@
 =item-header
   border-bottom: 1px solid $module-border-color
   margin-bottom: 1em
-  padding: 1em 0
 
-  display: grid
+  .item-header-main
-  grid-template-areas: "img gap1" "img name" "img links" "img gap2"
+    padding: 1em 0
-  align-items: center
-  justify-content: center
-  column-gap: 1em
-  row-gap: .5em
 
-  #item-thumbnail
+    display: grid
-    grid-area: img
+    grid-template-areas: "img gap1" "img name" "img links" "img gap2" "nav nav"
+    align-items: center
+    justify-content: center
+    column-gap: 1em
+    row-gap: .5em
 
-    border: 1px solid $module-border-color
+    .item-thumbnail
-    height: 80px
+      grid-area: img
-    width: 80px
 
-  #item-name
+      border: 1px solid $module-border-color
-    grid-area: name
+      height: 80px
+      width: 80px
 
-    text-align: left
+    .item-name
-    line-height: 100%
+      grid-area: name
-    margin-bottom: 0
 
-  #item-links
+      text-align: left
-    grid-area: links
+      line-height: 100%
+      margin-bottom: 0
+      
+    .item-links
+      grid-area: links
+
+      text-align: left
+      a
+        font-size: 75%
+        margin-left: 1em
+
+  .item-subpages-nav
+    display: flex
+    align-items: flex-end
+
+    .preview-link
+      margin-right: auto
+
+    .trades-section
+      display: flex
+      gap: .5em
+
+      header
+        align-self: center
+        font-weight: bold
+
+        &::after
+          content: ":"
+
+      ul
+        align-self: flex-end
+        list-style: none
+        display: flex
+        gap: .5em
+
+        li
+          display: block
 
-    text-align: left
     a
-      font-size: 75%
+      display: block
-      margin-left: 1em
+      border: 1px solid $module-border-color
+      border-bottom: 0
+      border-radius: .5em .5em 0 0
+      padding: .5em 1em
+      text-decoration: none
+
+      &:hover, &:focus
+        text-decoration: underline
+
+      &[data-is-current=true]
+        background: $module-bg-color
+        font-weight: bold

app/views/item_trades/index.html.haml

@@ -1,9 +1,10 @@
 - title t(".title.#{@type}")
 - hide_title_header
 
-= render partial: "items/item_header", locals: {item: @item}
+= render partial: "items/item_header",
+	locals: {item: @item, current_subpage: "trades_#{@type}"}
 
-%h2.item-page-subtitle= t(".title.#{@type}")
+%h2.item-subpage-title= t(".title.#{@type}")
 
 - if @trades.present?
 	%table.trades-table

app/views/items/_item_header.haml

@@ -1,17 +1,36 @@
+- raise ArgumentError unless defined? item
+- raise ArgumentError unless defined? current_subpage
+
 %header.item-header
-  = image_tag item.thumbnail_url, id: 'item-thumbnail'
+  .item-header-main
-  %h2#item-name= item.name
+    = image_tag item.thumbnail_url, class: 'item-thumbnail'
-  %nav#item-links
+    %h2.item-name= item.name
-    = nc_icon_for(item)
+    %nav.item-links
-    - unless item.rarity.blank?
+      = nc_icon_for(item)
-      == #{t 'items.show.rarity'}: #{item.rarity_index} (#{item.rarity})
+      - unless item.rarity.blank?
-    = link_to t('items.show.resources.jn_items'), jn_items_url_for(item)
+        == #{t 'items.show.rarity'}: #{item.rarity_index} (#{item.rarity})
-    - if item.nc_trade_value
+      = link_to t('items.show.resources.jn_items'), jn_items_url_for(item)
-      = link_to t('items.show.resources.owls', value: item.nc_trade_value.value_text),
+      - if item.nc_trade_value
-        "https://www.neopets.com/~owls",
+        = link_to t('items.show.resources.owls', value: item.nc_trade_value.value_text),
-        title: nc_trade_value_updated_at_text(item.nc_trade_value)
+          "https://www.neopets.com/~owls",
-    - unless item.nc?
+          title: nc_trade_value_updated_at_text(item.nc_trade_value)
-      = link_to t('items.show.resources.shop_wizard'), shop_wizard_url_for(item)
+      - unless item.nc?
-      = link_to t('items.show.resources.super_shop_wizard'), super_shop_wizard_url_for(item)
+        = link_to t('items.show.resources.shop_wizard'), shop_wizard_url_for(item)
-      = link_to t('items.show.resources.trading_post'), trading_post_url_for(item)
+        = link_to t('items.show.resources.super_shop_wizard'), super_shop_wizard_url_for(item)
-      = link_to t('items.show.resources.auction_genie'), auction_genie_url_for(item)
+        = link_to t('items.show.resources.trading_post'), trading_post_url_for(item)
+        = link_to t('items.show.resources.auction_genie'), auction_genie_url_for(item)
+
+  %nav.item-subpages-nav
+    = link_to t('items.show.subpages_nav.preview'), item,
+      class: ['preview-link'], 'data-is-current' => current_subpage == 'preview'
+    .trades-section
+      %header= t('items.show.subpages_nav.trades.header')
+      %ul
+        %li
+          = link_to t('items.show.subpages_nav.trades.offering'),
+            item_trades_path(item, type: 'offering'),
+            'data-is-current' => current_subpage == 'trades_offering'
+        %li
+          = link_to t('items.show.subpages_nav.trades.seeking'),
+            item_trades_path(item, type: 'seeking'),
+            'data-is-current' => current_subpage == 'trades_seeking'

app/views/items/show.html.haml

@@ -1,7 +1,8 @@
 - title @item.name
 - canonical_path @item
 
-= render partial: "item_header", locals: {item: @item}
+= render partial: "item_header",
+  locals: {item: @item, current_subpage: "preview"}
 
 %section#item-info-section
   #item-info

config/locales/en.yml

@@ -326,6 +326,12 @@ en:
             other: "%{count} users want this item:"
         show_more: more
         show_less: less
+      subpages_nav:
+        preview: Preview
+        trades:
+          header: Trades
+          offering: Offering
+          seeking: Seeking
       preview:
         header: Preview
         customize_more: Customize more

config/routes.rb

@@ -19,7 +19,7 @@ OpenneoImpressItems::Application.routes.draw do
   # Our customization data! Both the item pages, and JSON API endpoints.
   resources :items, :only => [:index, :show] do
     resources :trades, path: 'trades/:type', controller: 'item_trades',
-      only: [:index], constraints: {type: ['offering', 'seeking']}
+      only: [:index], constraints: {type: /offering|seeking/}
 
     resources :appearances, controller: 'item_appearances', only: [:index]