How to organize an adaptive SPA application?

Question

Software design

Imagine a web application where a tree-like list (todolist) is displayed to the user. In the mobile version, this is a list, when you click on an element, a new list (subtasks) is shown, when you click "back", the previous list (of the top level) is returned, the transition is animated in a material style (like on android). On the tablet, the left menu is added to this (which is hidden on the mobile phone), now not the entire screen is animated, but only the main part with the list (i.e. the menu is always static). In the desktop version, this is a tree-like list that can be expanded and collapsed, the menu can be. expanded with top navigation.
Question: how to organize it? These three views don’t connect for me, because in the mobile version the subtask opens a new screen with its url, which is added to the stack, on the tablet it’s a similar story, but because of the static menu it’s already more difficult to organize screens in the form of a stack, but in the desktop version it’s generally one screen with a single url and it is not clear how it should behave when the browser window is reduced - which element of this large list should be shown

Answer 1

in the desktop version, this is generally one screen with a single url

This is your mistake - if this is a SPA, then each "page" should still have its own URL. Then your problem will be solved.

Answer 2

1. Url must change everywhere the same or not change at all.
2.

These three ideas do not connect with me,

Think of it as a single view that has 2 dependencies
Having a sidebar => Screen
width Screen width => maximum number of parent branches available to view at the same time