<div class="vertical_menu d_flex">
  <div class="vertical_menu_div flex-column d_flex">
    <div class="home_logo_div menu__under-line">
      <a class="logo-image" data-href="/"> </a>
      <div class="toggle-menu" id="toggle" style="width: 16px; height: 16px">
        <img
          style="width: 16px; height: 16px"
          data-src="/images/menu_open.svg"
          id="toggle-menu-icon"
          alt=""
        />
      </div>
    </div>

    <div class="flex-column d_flex menu_vertical_block">

      <div class="menu-group menu__under-line" >
        <a data-href="pages/group" class="menu-item" >
          <div class="menu-icon menu-icon3"></div>
          <div class="menu-item-text" data-text="#{pages.menu.groups}"></div>
        </a>  
        <div id="menu-item-add" class="menu-item-add menu-item-text"></div>
        <div id="sub-groups-menu"></div>
      </div>
      </div>
      

      <div class="menu-group menu__under-line">

        <div class="menu-item saved_templates_side_menu"></div>

        <a class="menu-item" data-href="pages/work_log/view/index.html">
          <div class="menu-icon menu-icon9"></div>
          <div class="menu-item-text" data-text="#{pages.menu.work.log}"></div>
        </a>

        <a class="menu-item" data-href="pages/bonus/">
          <div class="menu-icon menu-icon9"></div>
          <div class="menu-item-text" data-text="#{pages.menu.bonus}"></div>
        </a>

        <a class="menu-item" data-href="pages/currency/">
          <div class="menu-icon menu-icon9"></div>
          <div class="menu-item-text" data-text="#{pages.menu.currency}"></div>
        </a>

        <a class="menu-item" data-href="pages/group_type/">
          <div class="menu-icon menu-icon9"></div>
          <div class="menu-item-text" data-text="#{pages.menu.group.type}"></div>
        </a>

        <a class="menu-item" data-href="pages/salary/">
          <div class="menu-icon menu-icon9"></div>
          <div class="menu-item-text" data-text="#{pages.menu.salary}"></div>
        </a>

        <a class="menu-item" data-href="pages/working_calendar/">
          <div class="menu-icon menu-icon9"></div>
          <div class="menu-item-text" data-text="#{pages.menu.working_calendar}"></div>
        </a>

        <a class="menu-item" data-href="pages/working_rate/">
          <div class="menu-icon menu-icon9"></div>
          <div class="menu-item-text" data-text="#{pages.menu.working_rate}"></div>
        </a>

        <a class="menu-item" data-href="pages/work_log/">
          <div class="menu-icon menu-icon9"></div>
          <div class="menu-item-text" data-text="#{pages.menu.worklog}"></div>
        </a>



        <a class="menu-item" data-href="pages/user_in_team/">
          <div class="menu-icon menu-icon9"></div>
          <div class="menu-item-text" data-text="#{pages.menu.user.in.team}"></div>
        </a>

      </div>

      <div class="menu-group menu__under-line">
        <a class="menu-item" data-href="pages/hr/">
          <div class="menu-icon menu-icon8"></div>
          <div class="menu-item-text" data-text="#{pages.menu.hr}"></div>
        </a>
        <a class="menu-item" data-href="pages/team/">
          <div class="menu-icon menu-icon9"></div>
          <div class="menu-item-text" data-text="#{pages.menu.teams}"></div>
        </a>
      </div>

      <div class="menu-group">
        <a class="menu-item" href="https://docs.dennis.systems" target="_blank">
          <div class="menu-icon menu-icon10"></div>
          <div class="menu-item-text" data-text="#{pages.menu.help}"></div>
        </a>
      </div>
    </div>
  </div>
</div>

<div style="clear: both"></div>

