head 0.0.1 → 0.0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 11835ad46d870dcdc415a869c67328331f67eff34b8d1e704c2df9b184f48e30
-  data.tar.gz: f913154fbd0cb1b807fec777b50a736b25352232d88d67ea60d2ecc9abc489e2
+  metadata.gz: 64555f34c0083982a934eab9077ed59c080d25e5c30d649c45bb72f91d5a4d7d
+  data.tar.gz: 7d56527224c27361e457345eabeea6fedacda3d820608f50bd0e2afd2463f59a
 SHA512:
-  metadata.gz: a79743be804f0101a40d6696fd4266641ac1741bd7451d2e5558ff6b6b90160c6461bb40124b4c8938a903e0101193ff383c7099a7df01c3ba8fa56df961fc92
-  data.tar.gz: 4ec8047baec015c2a05d96914ce983f81e2c4e3c4316980b86d4226a00948d8816039512f4a9a6a8a3a61a5360dbf0f6f266d8b6b734933a29fce3eee7df22cb
+  metadata.gz: d755be54df9724b2c9dea550f04bb10d3c211ea6d06028eb6dedee133f603ab80a614515f2e038a651ff6cd5c83c18598bbb14098b7f0032f7e5d52c61606629
+  data.tar.gz: 23c1c19da4691d95d45411ae3c13c15ddc847d0dfa9767d415569c2e994119015dcbe9e3daf47979d4340c1f9feaf33fdd57a377df5b5ad7238cc9a72f3402e3

data/app/assets/fonts/{icomoon.json → head/icomoon.json}

@@ -7,13 +7,21 @@
   "iconSets": [
     {
       "selection": [
+        {
+          "order": 10,
+          "id": 8,
+          "name": "volume",
+          "prevSize": 32,
+          "code": 59655,
+          "tempChar": ""
+        },
         {
           "order": 9,
           "id": 7,
           "name": "gear",
           "prevSize": 32,
           "code": 59654,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 8,
@@ -21,7 +29,7 @@
           "name": "question-mark",
           "prevSize": 32,
           "code": 59648,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 7,
@@ -29,7 +37,7 @@
           "name": "bell-ringing",
           "prevSize": 32,
           "code": 59649,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 6,
@@ -37,7 +45,7 @@
           "name": "bell",
           "prevSize": 32,
           "code": 59650,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 5,
@@ -45,7 +53,7 @@
           "name": "magnifier",
           "prevSize": 32,
           "code": 59651,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 4,
@@ -53,7 +61,7 @@
           "name": "bars-thin",
           "prevSize": 32,
           "code": 59652,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 3,
@@ -61,7 +69,7 @@
           "name": "bars-bold",
           "prevSize": 32,
           "code": 59653,
-          "tempChar": ""
+          "tempChar": ""
         }
       ],
       "id": 0,
@@ -75,6 +83,21 @@
       "height": 1024,
       "prevSize": 32,
       "icons": [
+        {
+          "id": 8,
+          "paths": [
+            "M480.896 190.848v-105.515h62.251v105.515c-10.368-0.768-20.736-1.195-31.147-1.195s-20.779 0.427-31.104 1.195zM327.808 233.6l-40.448-97.579c18.603-9.045 37.803-16.981 57.557-23.808l40.363 97.579c-8.96 2.901-17.835 6.187-26.624 9.728-10.539 4.267-20.821 8.96-30.848 14.080zM641.237 210.645l41.045-97.28c19.712 6.912 38.827 15.019 57.387 24.192l-41.045 97.237c-10.837-5.547-21.931-10.667-33.237-15.275-7.979-3.243-16-6.187-24.149-8.875zM875.691 413.056l97.579-40.405c9.045 18.603 16.981 37.76 23.851 57.515l-97.621 40.405c-2.901-8.96-6.187-17.835-9.728-26.667-4.267-10.539-8.96-20.779-14.080-30.848zM777.429 287.872l74.624-74.581c15.531 13.781 30.208 28.459 43.989 43.989l-74.624 74.624c-6.741-7.851-13.781-15.445-21.163-22.827s-15.019-14.464-22.827-21.205zM202.581 331.861l-74.624-74.581c13.739-15.531 28.459-30.251 43.989-43.989l74.624 74.581c-7.808 6.741-15.445 13.781-22.827 21.163s-14.421 15.019-21.163 22.827zM148.309 781.44l-97.579 40.363c-9.045-18.56-16.981-37.76-23.851-57.515l97.621-40.405c2.901 8.96 6.187 17.835 9.728 26.667 4.267 10.539 8.96 20.821 14.080 30.891zM898.645 726.443l97.28 41.045c-6.912 19.669-15.019 38.827-24.192 57.344l-97.237-41.003c5.547-10.837 10.667-21.931 15.275-33.28 3.243-7.936 6.187-16 8.875-24.107zM1024 628.352h-105.557c0.811-10.325 1.152-20.693 1.152-31.147 0-10.411-0.384-20.779-1.152-31.104h105.557v62.251zM821.419 862.592l74.624 74.624c-13.781 15.531-28.459 30.251-44.032 44.032l-74.581-74.624c7.851-6.741 15.445-13.824 22.827-21.205s14.421-15.019 21.163-22.827zM125.355 468.011l-97.28-41.045c6.912-19.669 15.019-38.827 24.192-57.344l97.237 41.003c-5.547 10.837-10.667 21.931-15.275 33.28-3.243 7.936-6.187 16-8.875 24.107zM105.557 628.352h-105.557v-62.251h105.557c-0.811 10.325-1.152 20.693-1.152 31.104-0.043 10.453 0.341 20.821 1.152 31.147zM246.571 906.624l-74.752 74.709-43.989-43.989 74.752-74.752c6.741 7.851 13.781 15.445 21.163 22.827s15.019 14.421 22.827 21.205zM512 274.901c-177.707 0-322.304 144.597-322.304 322.304s144.597 322.304 322.304 322.304 322.304-144.597 322.304-322.304-144.597-322.304-322.304-322.304zM414.933 567.765l-92.075-92.075 60.288-60.373 92.075 92.075-60.288 60.373z"
+          ],
+          "attrs": [
+            {}
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 0,
+          "tags": [
+            "volume"
+          ]
+        },
         {
           "id": 7,
           "paths": [
@@ -138,7 +161,7 @@
         {
           "id": 3,
           "paths": [
-            "M1015.851 923.563l-264.747-264.747c49.792-68.48 79.232-152.704 79.232-243.669 0-228.907-186.24-415.147-415.189-415.147-228.907 0-415.147 186.24-415.147 415.147 0 228.949 186.24 415.147 415.147 415.147 86.784 0 167.381-26.752 234.112-72.448l266.155 266.155 100.437-100.437zM121.771 415.147c0-161.792 131.627-293.419 293.419-293.419s293.419 131.627 293.419 293.419-131.627 293.419-293.419 293.419c-161.835 0-293.419-131.627-293.419-293.419z"
+            "M903.339 1024l-315.179-315.179c-59.221 37.291-129.024 59.179-204.16 59.179-212.096 0-384-171.904-384-384s171.904-384 384-384 384 171.904 384 384c0 75.136-21.931 144.981-59.179 204.16l315.179 315.179-120.661 120.661zM384 682.667c164.651 0 298.667-133.973 298.667-298.667s-134.016-298.667-298.667-298.667-298.667 133.973-298.667 298.667 134.016 298.667 298.667 298.667z"
           ],
           "attrs": [
             {}

data/app/assets/javascript/head/index.js

@@ -1,2 +1,3 @@
 import "head/knob"
 import "head/wing"
+import "head/sidebar"

data/app/assets/javascript/head/knob.js

@@ -14,7 +14,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
       // Check screen size
       const mainMenuWing = document.querySelector(`.js-head-wing[data-identifier="mainmenu"]`)
-      const tight = getComputedStyle(mainMenuWing).getPropertyValue('position') == 'absolute'
+      const tight = mainMenuWing ? getComputedStyle(mainMenuWing).getPropertyValue('position') === 'absolute' : false
 
       // Handle current wing
       const wing = document.querySelector(`.js-head-wing[data-identifier="${identifier}"]`)

data/app/assets/javascript/head/sidebar.js

@@ -0,0 +1,39 @@
+document.addEventListener('DOMContentLoaded', function() {
+  document.querySelectorAll('.js-head-sidebar__category').forEach(function (category) {
+    console.debug("Binding to Sidebar Category")
+    const href = category.getAttribute('href')
+
+    // If this category doesn't open a secondary sidebar, it is a standalone link.
+    if (href != '#') return
+
+    category.addEventListener('click', function(event) {
+      event.preventDefault()
+      const category = event.currentTarget
+
+      // The identifier of a category always matches that of its links list.
+      const identifier = category.dataset.identifier
+      const active = category.classList.contains('is-active')
+      const links = document.querySelector(`.js-head-sidebar__links[data-identifier="${identifier}"]`)
+
+      // Close all others
+      document.querySelectorAll('.js-head-sidebar__links').forEach((someLinks) => {
+        if (links == someLinks) return
+
+        someLinks.classList.remove('is-active')
+          const categoryClass = `.js-head-sidebar__category[data-identifier="${someLinks.dataset.identifier}"]`
+          document.querySelectorAll(categoryClass).forEach((someCategory) => {
+            someCategory.classList.remove('is-active')
+          })
+      })
+
+      // Now toggle the desired one.
+      if (active) {
+        category.classList.remove('is-active')
+        links.classList.remove('is-active')
+      } else {
+        category.classList.add('is-active')
+        links.classList.add('is-active')
+      }
+    })
+  })
+})

data/app/assets/stylesheets/head/components/knob.sass

@@ -1,3 +1,4 @@
+@use "iglu/responsive"
 @use "iglu/font-size"
 @use "iglu/spacing"
 @use "head/settings/colors"
@@ -20,9 +21,11 @@
   &:active
     color: colors.$white
 
+  &--mainmenu
+    display: grid
+
   &--identicon
     max-width: 1em
-    border-radius: 50%
     aspect-ratio: 1
     display: grid
     place-items: center
@@ -34,12 +37,14 @@
       object-fit: contain
 
   &--avatar
-    max-width: 1em
-    border-radius: 50%
+    max-width: 1.4em
     aspect-ratio: 1
     display: grid
     place-items: center
     overflow: hidden
+    padding: 0
+    // padding-right: 0.25em
+    padding-left: 0.25em
 
     img
       width: 100%
@@ -47,3 +52,12 @@
       object-fit: contain
       clip-path: circle()
       background-color: #fff
+
+
+// Keep this breakpoint analogous to wing.sass
++responsive.xlarge
+  .c-head-knob
+
+    &--mainmenu
+      display: none
+

data/app/assets/stylesheets/head/components/sidebar.sass

@@ -0,0 +1,99 @@
+@use "iglu/spacing"
+@use "iglu/font-size"
+@use "head/settings/colors"
+@use "head/tools/link"
+
+.c-head-sidebar
+  display: grid
+  grid-template-columns: auto 1fr
+  height: 100%
+  align-items: start
+  +font-size.default
+
+  &__categories
+    display: grid
+
+  &--right
+    .c-head-sidebar__categories
+      order: 2
+
+  &__secondary
+    overflow: hidden
+    background-color: rgba(255, 255, 255, 0.14) // Corrsponds to 10% change in underlying color
+    height: 100%
+
+  &__category
+    display: grid
+    justify-content: center
+    grid-template-areas: "icon" "name"
+    padding-top: 0.2em
+    padding-bottom: 0.2em
+    position: relative
+    text-decoration: none
+    +spacing.padding-horizontal--tiny
+
+    @each $column in category-icon category-name
+      &__#{$column}
+        grid-area: #{$column}
+
+    +link.states
+      color: colors.$moon-gray
+
+    &:hover
+      color: colors.$white
+
+    &.is-active
+      color: colors.$white
+      background-color: rgba(255, 255, 255, 0.14) // Corrsponds to 10% change in underlying color
+
+    &-icon
+      text-align: center
+      +font-size.huge
+
+    &-name
+      +font-size.smaller
+
+  &__links
+    display: none
+
+    &.is-active
+      display: block
+
+  &__link
+    grid-column-gap: 0.6rem
+    display: grid
+    align-items: center
+    grid-template-columns: auto 1fr
+    grid-template-areas: "icon name"
+    padding-right: 0.5rem
+    padding-left: 0.5rem
+    text-decoration: none
+    height: 100%
+    +spacing.padding-vertical--tiny
+
+    @each $column in link-icon link-name
+      &__#{$column}
+        grid-area: #{$column}
+
+    +link.states
+      color: colors.$moon-gray
+
+    &:hover
+      color: colors.$white
+
+    &:active
+      color: colors.$white
+
+    &.is-active
+      color: colors.$white
+      background-color: rgba(255, 255, 255, 0.14)
+
+    &-name
+      white-space: nowrap
+      +font-size.small
+
+    &-icon
+      +font-size.larger
+
+    &-separator
+      +spacing.margin-top--smaller

data/app/assets/stylesheets/head/components/theater.sass

@@ -1,5 +1,6 @@
 @use "iglu/spacing"
 @use "head/settings/colors"
+@use "iglu/font-size"
 
 .c-head-theater
   height: 100%
@@ -7,10 +8,12 @@
   grid-template-rows: auto 1fr
 
   &__roof
-    background-color: #444
+    background-color: colors.$granite-gray
     display: grid
+    line-height: 1 // Conformity of knobs
     align-items: center
-    grid-template-columns: auto 1fr auto
+    // Keep Logo centered even if left and right menus differ in width
+    grid-template-columns: 1fr 1fr 1fr
     grid-template-areas: "knobs--left logo knobs--right"
 
   @each $column in knobs--left logo knobs--right
@@ -35,6 +38,7 @@
     color: colors.$white
     padding: 0.3rem
     overflow: auto // Clip wide logos on small screens
+    +font-size.gigantic
 
     &:active
       top: 1px

data/app/assets/stylesheets/head/components/wing.sass

@@ -4,8 +4,9 @@
 .c-head-wing
   display: none
   // 320px is the min screen width we support.
-  // Our sidebar cannot be bigger, and it needs to leave some space
-  // at the right so that a click/tap there can close the sidebar.
+  // On devices that are that narrow, the sidebar needs to fit in,
+  // as well as a blank area on the right to close the sidebar with a tap.
+  // So the sidebar is limited to less than 320px on narrow devices.
   max-width: 265px
   height: 100%
   z-index: 1000
@@ -13,22 +14,12 @@
   background: colors.$granite-gray
   color: colors.$white
 
-  &--left
-    // On rather large screens, always show the main menu in left sidebar
-    +responsive.xlarge-container
-      position: static
-
-      &[data-identifier="mainmenu"]
-        // We "force" this item to be active without having the `is-active` class.
-        display: block
-        // So we need some way to deactivate it again using JS.
-        &.is-force-deactive
-          display: none
-
   &--right
     right: 0
+    position: inherit
 
-    // On very very large screens, show notifications sidebar on the right.
+    // On very very large screens, permanently show notifications sidebar on the right.
+    // Using container queries for this, because the main menu on the left may affect the layout.
     +responsive.xxlarge-container
       position: static
 
@@ -57,14 +48,19 @@
     +responsive.xlarge-container
       display: none
 
+// Keep this breakpoint analogous to knob.sass
++responsive.xlarge
+  .c-head-wing
 
-// +responsive.xxlarge
-//   .c-head-wing
-
-//     // We "force" this item to be active without having the `is-active` class.
-//     &[data-identifier="mainmenu"]
-//       display: block
+    &--left
+      // On rather large screens, always show the main menu in left sidebar
+      position: static
+      // On wide screens, it's ok to have a wider sidebar to fit all text.
+      max-width: 350px
 
-//       // So we need some way to deactivate it again using JS.
-//       &.is-force-deactive
-//         display: none
+      &[data-identifier="mainmenu"]
+        // We "force" this item to be active without having the `is-active` class.
+        display: block
+        // // So we need some way to deactivate it again using JS.
+        // &.is-force-deactive
+        //   display: none

data/app/assets/stylesheets/head/generics/fonts.sass

@@ -2,5 +2,5 @@
   font-family: 'headicons'
   font-weight: normal
   font-style: normal
-  src: url('head/headicons.woff') format('woff')
+  src: url('/head/headicons.woff') format('woff')
 

data/app/assets/stylesheets/head/index.sass

@@ -3,6 +3,7 @@
 @use "./generics/flip"
 @use "./generics/fonts"
 
+@use "./components/sidebar"
 @use "./components/theater"
 @use "./components/knob"
 @use "./components/wing"

data/app/assets/stylesheets/head/objects/headicon.sass

@@ -1,4 +1,4 @@
-@use 'head/settings/icons'
+@use 'head/settings/headicons'
 
 .o-headicon
   font-family: "headicons"
@@ -13,16 +13,28 @@
 
 .o-headicon--bars-bold
   &:before
-    content: icons.$bars-bold
+    content: headicons.$bars-bold
+
+.o-headicon--bars-thin
+  &:before
+    content: headicons.$bars-bold
 
 .o-headicon--magnifier
   &:before
-    content: icons.$magnifier
+    content: headicons.$magnifier
 
 .o-headicon--bell
   &:before
-    content: icons.$bell
+    content: headicons.$bell
+
+.o-headicon--bell-ringing
+  &:before
+    content: headicons.$bell-ringing
 
 .o-headicon--gear
   &:before
-    content: icons.$gear
+    content: headicons.$gear
+
+.o-headicon--question-mark
+  &:before
+    content: headicons.$question-mark

data/app/assets/stylesheets/head/settings/_colors.sass

@@ -10,5 +10,6 @@ $jade-green: rgb(0, 190, 130)
 $granite-gray: rgb(70, 70, 70)
 $steel-gray: color.adjust($granite-gray, $lightness: 25%)
 $silver-gray: color.adjust($granite-gray, $lightness: 50%)
+$moon-gray: color.adjust($granite-gray, $lightness: 65%)
 
 $transparent-gray: rgba(100, 100, 100, 0.5)

data/app/assets/stylesheets/head/settings/{_icons.scss → _headicons.scss}

@@ -1,3 +1,4 @@
+$volume: "\e907";
 $gear: "\e906";
 $question-mark: "\e900";
 $bell-ringing: "\e901";

data/app/components/head/knob.rb

@@ -1,11 +1,11 @@
 # frozen_string_literal: true
 
 module Head
-  class Knob < ApplicationComponent
+  class Knob < ::Head::ApplicationComponent
     erb_template <<~ERB
       <%= link_to(url, class: classes, data: { identifier: id, group: group }, **options.except(:url)) do %>
         <% if icon %>
-          <i class="o-headicon <%= icon_class%><%=  %>"></i>
+          <i class="o-headicon <%= icon_class%>"></i>
         <% end %>
 
         <%= content %>
@@ -25,9 +25,10 @@ module Head
 
     def icon
       return manual_icon if manual_icon
-      return :'bars-bold' if preset_mainmenu?
+      return :'bars-thin' if preset_mainmenu?
       return :bell if preset_notifications?
       return :gear if preset_settings?
+      return :'question-mark' if preset_help?
 
       :magnifier if preset_search?
     end
@@ -44,6 +45,7 @@ module Head
       result = %w[c-head-knob js-head-knob]
       result.push 'c-head-knob--identicon' if preset_identicon?
       result.push 'c-head-knob--avatar' if preset_avatar?
+      result.push 'c-head-knob--mainmenu' if preset_mainmenu?
       result
     end
 
@@ -67,6 +69,10 @@ module Head
       preset == :search
     end
 
+    def preset_help?
+      preset == :help
+    end
+
     def preset_identicon?
       preset == :identicon
     end

data/app/components/head/sidebar.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Head
+  class Sidebar < ::Head::ApplicationComponent
+    erb_template <<~ERB
+      <div data-group="<%= right ? :right : :left %>" class="c-head-sidebar <%= 'c-head-sidebar--right' if right %> ">
+        <% if categories.any? %>
+          <div class="c-head-sidebar__categories">
+            <% categories.each do |category| %>
+              <%= category %>
+            <% end %>
+          </div>
+
+          <div class="c-head-sidebar__secondary">
+            <% categories.select(&:submenu?).each do |category| %>
+              <div class="c-head-sidebar__links js-head-sidebar__links" data-identifier="<%= category.identifier %>">
+                <% category.links.each do |link| %>
+                  <%= link %>
+                <% end %>
+              </div>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+    ERB
+
+    renders_many :categories, -> (**options) do
+      ::Head::Sidebars::Category.new(icon_class_prefix:, **options)
+    end
+
+    option :right, default: -> { false }
+    option :icon_class_prefix, default: -> {}
+  end
+end

data/app/components/head/sidebars/category.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module Head
+  module Sidebars
+    class Category < ::Head::ApplicationComponent
+      erb_template <<~ERB
+        <%= link_to(url, data:,
+                         class: 'c-head-sidebar__category js-head-sidebar__category', **link) do %>
+          <%= content_tag :i, nil, class: icon_classes %>
+          <%= content_tag :div, name, class: 'c-head-sidebar__category-name' %>
+        <% end %>
+      ERB
+
+      renders_many :links, -> (**options) do
+        ::Head::Sidebars::Link.new(icon_class_prefix:, **options)
+      end
+
+      option :url, default: -> { '#' }
+      option :icon_class_prefix, default: -> {}
+      option :name
+      option :icon
+      option :link, default: -> { {} }
+
+      def css_classes
+        "c-head-sidebar__category #{'js-head-sidebar__category' if submenu?}"
+      end
+
+      def icon_classes
+        "#{icon_class_prefix}#{icon.to_s.gsub('_', '-')} c-head-sidebar__category-icon"
+      end
+
+      def data
+        return unless submenu?
+
+        { identifier: }
+      end
+
+      def submenu?
+        url == '#'
+      end
+
+      def with_separator
+        with_link(name: nil, icon: nil)
+      end
+
+      def identifier
+        @identifier ||= SecureRandom.hex
+      end
+    end
+  end
+end

data/app/components/head/sidebars/headline.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Head
+  module Sidebars
+    class Headline < ::Head::ApplicationComponent
+      erb_template <<~ERB
+       Headline
+      ERB
+    end
+  end
+end

data/app/components/head/sidebars/link.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Head
+  module Sidebars
+    class Link < ::Head::ApplicationComponent
+      erb_template <<~ERB
+        <%= link_to(url, class: link_classess, **link) do %>
+          <% if icon %>
+            <%= content_tag :i, nil, class: icon_classes %>
+            <% end %>
+          <%= content_tag :div, name, class: 'c-head-sidebar__link-name' %>
+        <% end %>
+      ERB
+
+      option :url, default: -> { '#' }
+      option :name
+      option :icon
+      option :link, default: -> { {} }
+      option :icon_class_prefix, default: -> {}
+      option :active, default: -> {}
+
+      def link_classess
+        "c-head-sidebar__link #{'c-head-sidebar__link-separator' unless icon}  #{active?}".squish
+      end
+
+      def icon_classes
+        "#{icon_class_prefix}#{icon.to_s.gsub('_', '-')} c-head-sidebar__link-icon"
+      end
+
+      def active?
+        ::Head::Active.call(url: url_for(url),
+                            condition: active,
+                            current_path: request.original_fullpath)
+      end
+    end
+  end
+end

data/app/components/head/theater.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Head
-  class Theater < ApplicationComponent
+  class Theater < ::Head::ApplicationComponent
     erb_template <<~ERB
       <div class="c-head-theater">
         <div class="c-head-theater__roof">
@@ -50,6 +50,11 @@ module Head
       with_wing(id: :mainmenu, &)
     end
 
+    def with_help(&)
+      with_knob(preset: :help, right: true)
+      with_wing(id: :help, right: true, &)
+    end
+
     def with_notifications(&)
       with_knob(preset: :notifications, right: true)
       with_wing(id: :notifications, right: true, &)

data/app/components/head/wing.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Head
-  class Wing < ApplicationComponent
+  class Wing < ::Head::ApplicationComponent
     erb_template <<~ERB
       <div class="<%= classes.join(' ') %>" data-identifier="<%= id %>" data-group="<%= group %>">
         <%= content %>

data/config/importmap.rb

@@ -4,3 +4,4 @@ pin 'head', to: 'head/index.js'
 
 pin 'head/knob', to: 'head/knob.js'
 pin 'head/wing', to: 'head/wing.js'
+pin 'head/sidebar', to: 'head/sidebar.js'

data/lib/head/active.rb

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+module Head
+  class Active
+    include Calls
+
+    option :url
+    option :current_path
+    option :condition
+
+    def call
+      :'is-active' if active?
+    end
+
+    private
+
+    def linked_path
+      ::URI.parse(url).path
+    end
+
+    def active?
+      return false if url == '#'
+
+      # Adapted from https://github.com/comfy/active_link_to (MIT license)
+      case condition
+
+      when :inclusive, nil # default
+        !current_path.match(%r{^#{Regexp.escape(linked_path).chomp('/')}(/.*|\?.*)?$}).blank?
+
+      when :exclusive
+        !current_path.match(%r{^#{Regexp.escape(linked_path)}/?(\?.*)?$}).blank?
+
+      when :exact
+        current_path == linked_path
+
+      when Regexp
+        !current_path.match(condition).blank?
+
+      when Array
+        controllers = [*condition[0]]
+        actions     = [*condition[1]]
+        ((controllers.blank? || controllers.member?(params[:controller])) &&
+          (actions.blank? || actions.member?(params[:action]))) ||
+          controllers.any? do |controller, action|
+            params[:controller] == controller.to_s && params[:action] == action.to_s
+          end
+
+      when TrueClass
+        true
+
+      when FalseClass
+        false
+
+      when Hash
+        condition.all? do |key, value|
+          params[key].to_s == value.to_s
+        end
+      end
+    end
+  end
+end

data/lib/head/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Head
-  VERSION = '0.0.1'
+  VERSION = '0.0.3'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: head
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.0.3
 platform: ruby
 authors:
 - halo
@@ -118,11 +118,13 @@ files:
 - LICENSE.txt
 - README.md
 - app/assets/fonts/head/headicons.woff
-- app/assets/fonts/icomoon.json
+- app/assets/fonts/head/icomoon.json
 - app/assets/javascript/head/index.js
 - app/assets/javascript/head/knob.js
+- app/assets/javascript/head/sidebar.js
 - app/assets/javascript/head/wing.js
 - app/assets/stylesheets/head/components/knob.sass
+- app/assets/stylesheets/head/components/sidebar.sass
 - app/assets/stylesheets/head/components/theater.sass
 - app/assets/stylesheets/head/components/wing.sass
 - app/assets/stylesheets/head/generics/flip.sass
@@ -131,7 +133,7 @@ files:
 - app/assets/stylesheets/head/objects/headicon.sass
 - app/assets/stylesheets/head/package.json
 - app/assets/stylesheets/head/settings/_colors.sass
-- app/assets/stylesheets/head/settings/_icons.scss
+- app/assets/stylesheets/head/settings/_headicons.scss
 - app/assets/stylesheets/head/tools/_cloud.sass
 - app/assets/stylesheets/head/tools/_link.sass
 - app/assets/stylesheets/head/tools/_mandatory.sass
@@ -140,11 +142,16 @@ files:
 - app/assets/stylesheets/head/utilities/smokescreen.sass
 - app/components/head/application_component.rb
 - app/components/head/knob.rb
+- app/components/head/sidebar.rb
+- app/components/head/sidebars/category.rb
+- app/components/head/sidebars/headline.rb
+- app/components/head/sidebars/link.rb
 - app/components/head/theater.rb
 - app/components/head/wing.rb
 - config/importmap.rb
 - config/locales/head.en.yml
 - lib/head.rb
+- lib/head/active.rb
 - lib/head/css.rb
 - lib/head/engine.rb
 - lib/head/identicon.rb