added styles for the category listing on browse.html

sites/demo/static/demo/less/bootstrap/navs.less

@@ -41,7 +41,6 @@
   font-weight: bold;
   line-height: @baseLineHeight;
   color: @grayLight;
-  text-shadow: 0 1px 0 rgba(255,255,255,.5);
   text-transform: uppercase;
 }
 // Space them out when they follow another list item (link)
@@ -63,7 +62,6 @@
 .nav-list .nav-header {
   margin-left:  -15px;
   margin-right: -15px;
-  text-shadow: 0 1px 0 rgba(255,255,255,.5);
 }
 .nav-list > li > a {
   padding: 3px 15px;

sites/demo/static/demo/less/page/product_lists.less

@@ -172,4 +172,59 @@
     right:0;
     top:0;
   }
+}
+//Categories
+.side_categories {
+  background:#F2F2F2;
+  li {
+    list-style: none;
+  }
+  i {
+    display:none;
+    position:absolute;
+    right:10px;
+    top:18px;
+  }
+  .nav-header {
+    background:@navbarInverseBackground;
+    color:@white;
+    text-transform: none;
+    font-size: @headingFourSize;
+  }
+  .nav-list > li > a,
+  .nav-header {
+    margin-left: 0;
+    margin-right: 0;
+  }
+  .nav-list {
+    padding-left: 0;
+    padding-right: 0;
+    > li {
+      border:1px solid #D8D8D8;
+      border-top-width:0;
+      &.nav-header {
+        border-color:@navbarInverseBackground;
+      }
+      ul {
+        margin-left:0;
+        a {
+          padding-left:30px;
+        }
+      }
+    }
+  }
+  .nav > li > a:hover, a:hover {
+    background:@blue;
+    color:@white;
+    i {
+      display: inline-block;
+    }
+  }
+  a,
+  .nav-list > li > a,
+  .nav-header {
+    position: relative;
+    padding:15px;
+    display:block;
+  }
 }

sites/demo/templates/catalogue/browse.html

@@ -20,6 +20,27 @@
 </div>
 {% endblock  %}
 
+{% block column_left %}
+    <div class="side_categories">
+        {% if categories %}
+        <ul class="nav nav-list">
+            <li class="nav-header">{% trans "Browse" %}</li>
+            {% for category in categories %}
+            <li><a href="{{ category.0.get_absolute_url }}">{{ category.0.name }} <i class="icon-arrow-right"></i></a>
+                {% if category.1 %}
+                <ul>
+                    {% for subcategory in category.1 %}
+                        <li><a href="{{ subcategory.0.get_absolute_url }}">{{ subcategory.0.name }} <i class="icon-arrow-right"></i></a>
+                    {% endfor %}
+                </ul>
+                {% endif %}
+            </li>
+            {% endfor %}
+        </ul>
+        {% endif %}
+    </div>
+{% endblock %}
+
 {% block content %}
 
 {% if products.count %}