Separate mobile menu cart code from large menu cart code

app/views/shared/menu/_mobile_menu.html.haml

@@ -9,8 +9,15 @@
         %img{src: ContentConfig.logo_mobile.url, srcset: ContentConfig.logo_mobile_svg.url, width: "75", height: "26"}
 
   %section.right{"ng-cloak" => true}
-    .cart
-      = render partial: "shared/menu/cart"
+    %span.cart-span{"ng-controller" => "CartCtrl", "ng-class" => "{ dirty: Cart.dirty || Cart.empty(), 'pure-dirty': Cart.dirty }"}
+      %a.icon{href: main_app.checkout_path}
+        %span
+          = t '.cart'
+        %span.count
+          %img{ src: "/assets/menu/icn-cart.svg" }
+          %span
+            {{ Cart.total_item_count() }}
+
     %a{href: main_app.shop_path}
       {{ CurrentHub.hub.name }}
 

config/locales/en.yml

@@ -1113,10 +1113,13 @@ en:
   shared:
     menu:
       cart:
+        cart: "Cart"
         checkout: "Checkout now"
         already_ordered_products: "Already ordered in this order cycle"
       signed_in:
         profile: "Profile"
+      mobile_menu:
+        cart: "Cart"
     register_call:
       selling_on_ofn: "Interested in getting on the Open Food Network?"
       register: "Register here"