building-complete-blog-with-symfony3_part9-sidebar.md.md

+Adding Sidebar Content
+======================
+
+**The Sidebar**
+
+Currently the sidebar of hubshark is looking a bit empty. We will update this with 2 common blog components, the Tag Cloud and a list of the Latest Comments at a later point in the tutorails. 
+
+We will though, create the place holders for them and add the "Software Verison" to the bottom of the sidebar.
+
+ 
+**Tag Cloud**
+
+The Tag Cloud shows tags for each blog emphasized in a way that displays the more common tags bolder. To achieve this we need a way to retrieve all the tags for all the blogs. The method we will use will be added at a later point. So we just add a place holder in _src/AppBundle/Resources/views/Sidebar/sidebar.html.twig_
+
+```
+{# src/AppBundle/Resources/views/Sidebar/sidebar.html.twig #}
+ 
+<section class="section">
+    <header>
+        <h3>Tag Cloud</h3>
+    </header>
+    <p class="tags">
+        
+    </p>
+</section>
+```
+
+in the same file let's add the version of our project, I add and keep this at the bottom:
+
+```
+{# Below we have the project version showing. Tray to keep at the bottom #}
+<section class="section">
+    <header>
+        <h3>Software Version:</h3>
+    </header>
+    <p>
+        HubShark<sup>&trade;</sup> <font size="-1">{{ app_version }}</font>
+    </p>
+</section>
+```
+
+Let’s replace the placeholder for the sidebar block. We do this in them main layout template located at _src/AppBundle/Resources/views/layout.html.twig_
+
+```
+{# src/AppBundle/Resources/views/layout.html.twig #}
+ 
+{# .. #}
+ 
+{% block sidebar %}
+    {{ render(controller( 'AppBundle:HomePage:sidebar' )) }}
+{% endblock %}
+```
+
+Now add the CSS for the tag cloud. Add a new stylesheet located at _src/AppBundle/Resources/public/css/sidebar.css_
+
+
+```
+.sidebar .section { margin-bottom: 20px; }
+.sidebar h3 { line-height: 1.2em; font-size: 20px; margin-bottom: 10px; font-weight: normal; background: #eee; padding: 5px;  }
+.sidebar p { line-height: 1.5em; margin-bottom: 20px; }
+.sidebar ul { list-style: none }
+.sidebar ul li { line-height: 1.5em }
+.sidebar .small { font-size: 12px; }
+.sidebar .comment p { margin-bottom: 5px; }
+.sidebar .comment { margin-bottom: 10px; padding-bottom: 10px; }
+.sidebar .tags { font-weight: bold; }
+.sidebar .tags span { color: #000; font-size: 12px; }
+.sidebar .tags .weight-1 { font-size: 12px; }
+.sidebar .tags .weight-2 { font-size: 15px; }
+.sidebar .tags .weight-3 { font-size: 18px; }
+.sidebar .tags .weight-4 { font-size: 21px; }
+.sidebar .tags .weight-5 { font-size: 24px; }
+```
+
+As we have added a new stylesheet we need to include it. Update the AppBundle main layout template located at _src/AppBundle/Resources/views/layout.html.twig_ with the following.
+
+```
+{# src/AppBundle/Resources/views/layout.html.twig #}
+ 
+{# .. #}
+ 
+{% block stylesheets %}
+    {{ parent() }}
+    <link href="{{ asset('bundles/app/css/blog.css') }}" type="text/css" rel="stylesheet" />
+    <link href="{{ asset('bundles/app/css/sidebar.css') }}" type="text/css" rel="stylesheet" />
+{% endblock %}
+ 
+{# .. #}
+```
+
+Add the latest comments placeholder in the sidebar template. Update the template located at _src/AppBundle/Resources/views/Sidebar/sidebar.html.twig_ with the following.
+
+```
+ 
+{# .. #}
+ 
+<section class="section">
+    <header>
+        <h3>Latest Comments</h3>
+    </header>
+
+        <p>There are no recent comments</p>
+</section>
+{# .. #}
+```
+
+The sidebar action located at _src/AppBundle/Controller/HomePageController.php_ gets updated to show the view.
+
+```
+//...
+
+    public function sidebarAction() {
+        return $this->render('AppBundle:Sidebar:sidebar.html.twig');
+    }
+    
+//...
+```
+
+If everything went well we should something simular to this screenshot:
+![Sidebar View](imgz/sidebar-view.png)
+![sidebar-view](/uploads/7315fdb9e1d621ba82634d53c2925693/sidebar-view.png)
+
+Next up we will create the [User Management](building-complete-blog-with-symfony3_part10-user.md).