title: How can i minimize the side bar in my website while opening another page?
body: <p>I am working on a portal, currently designing the UI. I am using frameset here. I need to minimise the left frame (ie Sidebar/Menu) when I click on any link in the sidebar and the web page loads up in the right(Right) frame. The minimised version of the sidebar only display the icons of the tabs and I want an arrow key which will again maximize the sidebar if clicked.  a </p>
  
  <p>Here is the code for my frame.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;frameset cols="15%,*" scrolling="yes"&gt;
    &lt;frame name = "left" src="menu.html" scrolling="yes"&gt;
    &lt;frame name = "center"&gt;
  &lt;/frameset&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>my code for sidebar/menu is menu.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  &lt;!--Link to the CSS style sheet--&gt;
  &lt;link rel="stylesheet" href="css/menu.css"&gt;
  &lt;script src="https://kit.fontawesome.com/5c399403c6.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;!--Sidebar/Menu--&gt;
  &lt;div class="wrapper"&gt;
    &lt;div class="menu"&gt;
      &lt;!--Logo comes here--&gt;
      &lt;h2&gt;Alfred&lt;/h2&gt;
  
      &lt;!--Search Bar--&gt;
      &lt;div class="search"&gt;
  
  
  
      &lt;!--Links in the sidebar/menu--&gt;
     &lt;ul&gt;
       &lt;li&gt;&lt;input class="search-text" type="text" placeholder="Search here" name=""&gt;
       &lt;a class="search-button" href="#"&gt;
         &lt;i class="fas fa-search"&gt;&lt;/i&gt;
       &lt;/li&gt;
      &lt;li&gt;&lt;i class="fas fa-chart-line"&gt;&lt;/i&gt;&lt;a href="dashboard.html" target ="center" &gt;Dashboard&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;i class="fas fa-building"&gt;&lt;/i&gt;&lt;a href="hq.html"target ="center" &gt;HQ&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;i class="fas fa-file-invoice-dollar"&gt;&lt;/i&gt;&lt;a href="accounts.html"target ="center"&gt;Accounts&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;i class="fas fa-users"&gt;&lt;/i&gt;&lt;a href="people.html"target ="center"&gt;People&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;i class="fas fa-at"&gt;&lt;/i&gt;&lt;a href="mail.html"target ="center"&gt;Mail&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;i class="fas fa-handshake"&gt;&lt;/i&gt;&lt;a href="crm.html"target ="center"&gt;CRM&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;i class="fas fa-calendar-alt"&gt;&lt;/i&gt;&lt;a href="calendar.html"target ="center"&gt;Calendar&lt;/li&gt;
      &lt;li&gt;&lt;i class="fas fa-clipboard-list"&gt;&lt;/i&gt;&lt;a href="board.html"target ="center"&gt;Board&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;i class="fas fa-archive"&gt;&lt;/i&gt;&lt;a href="files.html"target ="center"&gt;Files&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;i class="fas fa-headset"&gt;&lt;/i&gt;&lt;a href="desk.html"target ="center"&gt;Support Desk&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;i class="fas fa-cogs"&gt;&lt;/i&gt;&lt;a href="settings.html"target ="center"&gt;Settings&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and my stylesheet is menu.css</p>
  
  <pre><code>@import url('https://fonts.googleapis.com/css?family=Muli&amp;display=swap');
  @import url('https://fonts.googleapis.com/css?family=Raleway&amp;display=swap');
  
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    font-family: 'Muli', sans-serif;
  }
  
  i{
    margin: 10px;
  
  }
  
  body{
    background: #391E57;
  }
  
  .wrapper{
    display: flex;
    position: relative;
    color: #ECE4F4;
  
  }
  
  .wrapper .menu {
    position: fixed;
    width: 200px;
    height: 100%;
    background: #391E57;
    padding: 30px 0;
  
  }
  
  .wrapper .menu h2{
    color: #fff;
    text-align: center;
    margin-bottom: 30px;
    font-family: 'Raleway', sans-serif;
    letter-spacing: 4.5px;
    transition: all .2s ease-in-out;
  }
  
  .wrapper .menu h2:hover{
    color: #53D2F5;
    transform: scale(1.1);
  }
  
  .search-text{
    width: 140px;
    height: 25px;
  
  }
  
  
  .wrapper .menu ul li{
    padding: 5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    border-top: 1px solid rgba(225, 225, 225, 0.05);
  }
  
  .wrapper .menu ul li a{
    color: #9F9CA2;
    display: inline;
  
  }
  
  .wrapper .menu ul li .fas{
    width: 25px;
    color: #9F9CA2;
    transition: all .2s ease-in-out;
  
  }
  
  .wrapper .menu ul li:hover .fas{
    color: #53D2F5;
     transform: scale(1.1);
  }
  
  
  .wrapper .menu ul li:hover{
    background: #79668F;
  }
  
  .wrapper .menu ul li:hover a{
    color: #fff;
  }
  </code></pre>