title: How to place an image on the bottom left of a sidebar?
body: <p>My CSS skills are not the best, but I do know some basics. I am trying to put this image of my logo of my personal brand on the bottom left of the side navigation bar but I am having trouble on how to do this effectively. I want to do it in a way, that the navigation bar is not widened by the image placed there, currently, as it stands, the side navigation becomes more wide as the image tag placed there.</p>
  <p><a href="https://i.stack.imgur.com/uMc7C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uMc7C.png" alt="enter image description here" /></a></p>
  <p>This is my React code for the side navigation</p>
  <pre><code>const Sidebar = () =&gt; {
      return (
          &lt;div className=&quot;sidebar&quot;&gt;
              &lt;div className=&quot;sideBarWrapper&quot;&gt;
                  &lt;div className=&quot;sideBarMenu&quot;&gt;
                      &lt;h1 className=&quot;sideBarTitle&quot;&gt;Dashboard&lt;/h1&gt;
                          &lt;ul className=&quot;sideBarList&quot;&gt;
                              &lt;li className=&quot;sideBarListItem&quot;&gt;
                                  &lt;Home  className=&quot;sideBarIcon&quot;/&gt;
                                  Home
                              &lt;/li&gt;
  
                              &lt;li className=&quot;sideBarListItem&quot;&gt;
                              &lt;Icon 
                              icon=&quot;mdi:currency-btc&quot; 
                              className=&quot;sideBarIcon&quot;
                              /&gt;
                                  Cryptocurrency
                              &lt;/li&gt;
  
                              &lt;li className=&quot;sideBarListItem&quot;&gt;
                              &lt;Icon 
                              icon=&quot;whh:stocks&quot; 
                              
                              className=&quot;sideBarIcon&quot;
                              /&gt;
                                  Stocks
                              &lt;/li&gt;
  
                              &lt;li className=&quot;sideBarListItem&quot;&gt;
                                  &lt;Visibility  className=&quot;sideBarIcon&quot;/&gt;
                                  Watchlist
                              &lt;/li&gt;
  
                              &lt;img className=&quot;img&quot; src={Logo}/&gt;
                          &lt;/ul&gt;
                          
                  &lt;/div&gt;
                  
              &lt;/div&gt;   
          &lt;/div&gt;
      )
  }
  
  export default Sidebar
  </code></pre>
  <p>And this is the CSS for the side navigation</p>
  <pre><code>.sidebar{
      flex: 1;
      height:  calc(100vh - 50px);
      background-color: goldenrod;
      position: sticky;
      top: 50px;
  }
  
  .sideBarWrapper{
      position: relative;
      padding: 20px;
      color: #555;
  }
  
  .sideBarMenu{
      margin-bottom: 10px;
  }
  
  .sideBarTitle{
      font-size: 15px;
      color: black;
  }
  
  .sideBarList{
      list-style: none;
      padding: 5px;
  }
  
  .sideBarListItem{
      padding: 5px;
      cursor: pointer;
      display: flex;
      align-items: center;
      border-radius: 10px;
  }
  
  .sideBarListItem.active, .sideBarListItem:hover{
      background-color: whitesmoke
  }
  
  .sideBarIcon{
      margin-right: 5px;
      font-size: 50px !important;
  }
  
  .img{
     height: 300px;
     margin-right: 5px;
     bottom: 70px;
  }
  </code></pre>