Simplify code in social component

app/assets/stylesheets/layout/social.scss

@@ -1,4 +1,10 @@
 .social {
+  @include grid-column;
+  text-align: right;
+
+  @include breakpoint(medium) {
+    width: 1 * 100% / 3;
+  }
 
   li {
     display: inline-block;

app/components/layout/social_component.html.erb

@@ -1,19 +1,14 @@
-<div class="small-12 medium-4 column social">
+<div class="social">
-  <div class="text-right">
   <ul>
     <% sites.each do |name, url| %>
-        <% if setting["#{name}_handle"] %>
       <li>
-            <%= link_to "#{url}/#{setting["#{name}_handle"]}", target: "_blank",
+        <%= link_to "#{url}/#{setting["#{name}_handle"]}", target: "_blank", title: link_title(name) do %>
-              title: t("shared.go_to_page") + t("social.#{name}", org: setting["org_name"]) + t("shared.target_blank") do %>
+          <span class="show-for-sr"><%= link_text(name) %></span>
-              <span class="show-for-sr"><%= t("social.#{name}", org: setting["org_name"]) %></span>
           <span class="icon-<%= name %>" aria-hidden="true"></span>
         <% end %>
       </li>
     <% end %>
-      <% end %>
 
-      <%= raw content_block("footer", I18n.locale) %>
+    <%= raw footer_content_block %>
   </ul>
 </div>
-</div>

app/components/layout/social_component.rb

@@ -10,6 +10,18 @@ class Layout::SocialComponent < ApplicationComponent
         youtube: "https://www.youtube.com",
         telegram: "https://www.telegram.me",
         instragram: "https://www.instagram.com"
-      }
+      }.select { |name, _| setting["#{name}_handle"] }
+    end
+
+    def link_title(site_name)
+      t("shared.go_to_page") + link_text(site_name) + t("shared.target_blank")
+    end
+
+    def link_text(site_name)
+      t("social.#{site_name}", org: setting["org_name"])
+    end
+
+    def footer_content_block
+      content_block("footer", I18n.locale)
     end
 end