How should I build a custom menu walker for this setup?

I can only imagine that since you are adding classes and ID’s this is for styling purposes. I really don’t see the point of this. This is the exact structure of a generic WP menu and as for the classes and ID’s:

  • The current page gets a class of ‘current-menu-item’ so that id is not needed. Just point to it like:

    nav .current-menu-item
    
  • If any menu item has children it gets a class of ‘menu-item-has-children’ so you can select the li with this class and then the direct child after it like so:

    .menu-item-has-children > a
    
  • Another ul in the li with children is created automatically so and you can select it like so thus avoiding the need of ‘sf-with-ul’ class on the child of the nested ul:

    .menu-item-has-children > a ul li
    

For me the walker is for more complicated tasks like retrieving data from backend and then altering the menu with that data for example adding html data attributes to hrefs. Again I don’t know what you are trying to achieve but it it’s just styling then IMO the walker is an overkill in this case.