Develop custom navbar as react/bootstrap component

Develop a custom navbar component with React 16 and Bootstrap 4 as part of our client [login to view URL] corporate design, all necessary icons as well as a standard react/bootstrap structure are provided. The component itself should exactly look like the appended high-fidelity mockup. It is hierarchically divided into ‘accounts’ (google adwords, facebook ads and instagram) which contains itself ‘campaigns’ and in case of facebook and instagram another ‘subgroup’. So there is a total of three hierarchical levels. In addition the buttons ‘Konto hinzufügen’ on highest level and ‘Kampagne hinzufügen’ on the second level should be present. The complete behavior of the navbar can be described as follows: When loading the component, already existing ‘accounts’ should be displayed. If a user clicks on the button ‘Konto hinzufügen’ another component (not to implement) is shown which gives a callback with a new ‘account’. The received ‘account’ should then be added to the navbar. If a user clicks on the button ‘Kampagne hinzufügen’ another component (not to implement) is shown which gives a callback with new ‘campaigns’ contained into an ‘account’. The received ‘campaigns’ should then be added as subgroup to the related ‘account’. If a user clicks on an account it will be selected and an overview is triggered (the overview is not to implement). Also the contained ‘campaign’ should shown in the list. If the user clicks on the selected account again the list of ‘campaigns’ should be hided. If a user clicks on an campaign it will be selected and another overview is triggered (the overview is not to implement). The subgroups of an campaign will only be shown and hide if the user clicks on the “little arrow”. What skills are required? – React 16.x – Bootstrap 4 – TypeScript / HTML / CSS