First, avoid information on tools. The text is long and difficult to read, and at this moment most users understand the icon of the cart and do not need an additional notice. Also, if you want your site to be compatible with mobile devices, the scrolling events will not work. It is easier to design for desktops and mobile devices at the same time, by avoiding placing important information in the displacement events.
My suggestion is to leave the icon where it is in the upper left. You could make the user and cart icons. slightly bigger and a little more separated, this could help.
Then I would change the behavior so that the drop-down menu only appears when clicking. Your first example image looks good. I guess the red button says "Continue with the payment"? You should also add a little control to close this drop-down menu, maybe an X in the corner, but make sure that this is obviously visually separated from the items in the cart so that it is not confused with the Delete item icon. I think the red "X" that you currently have to delete an item could be replaced with a trash can icon. An "X" is commonly interpreted as "Cancel", while a trash can means "Delete / Delete". I know this is not directly related to your question, but I thought it was worth mentioning.
You can also go the route of your V2 image when a user clicks on the icon Cart. Your version 2 is almost there, but there should be more than one visual link between the cart icon and the side menu. Definitely, it would be useful to have a small arrow that makes it look like a call and place the icon further to the left, closer to the edge of the Cart menu.
Maybe something in this regard: (?)
Of course, everything is subjective, but I hope that at least I give you some advice to consider 🙂