Design a Website Mockup 2

This is single page App built in AngularJS and Bootstrap. Create navigation pane or menu (vertical) for each of the table on each side of the screen. On click tables will slide out. (Simular or same like Microsoft Access 2013 nav menu). Left pane or menu tab text “Products”. Right pane or menu tab text “Recipes and Menu". Objective of this project is to make table more compact. Tables are too big and needs to be at least 2/3 of the size. Decrease font size decrease table row height. On right is form with 2 tables. Create Tabs for each of the table. Tab order and names. 1 Recipes, 2 Main Recipes, 3 Pictures (Leave it blank content will com e later.) On left is only one table Products but still need Tab as more tables will come later. Add search box in both form above of the tables. Items in products and Recipes tables are drag able and droppable into recipe forms. I want to highlight the item once clicked and dragged. Highlight recipe item div on hover when product item or recipe item is dragged over. I did attached screenshot of current layout.