Представьте веб-приложение, где пользователю выводится древовидный список (todolist). В мобильной версии это список, при клике на элемент показывается новый список (подзадачи), при клике "назад" возвращается предыдущий список (верхнего уровня), переход анимируется в материальном стиле (как на андроиде). На планшете к этому добавляется левое меню (которое на мобилке скрыто), теперь анимируется не весь экран, а только основная часть со списком (т.е. меню всегда статично). В настольной версии это древовидный список, который можно разворачивать-сворачивать, меню м.б. расширено верхней навигацией.
Вопрос: как это организовать? Не связываются у меня эти три представления, ведь в мобильной версии подзадача открывает новый экран со своим урлом, который добавляется в стек, на планшете похожая история, но из-за статичного меню уже сложнее организовывать экраны в виде стека, а в настольной версии это вообще один экран с единственным урлом и непонятно, как он должен вести себя при уменьшении окна браузера - какой элемент этого большого списка показывать
Приведите, пожалуйста, пример для моего случая. Не представляю, как можно дробить настольный экран на различные страницы, задача которого - показывать единственный компонент с древовидным списком.
URL - это состояние приложения, фактически. У древовидного списка тоже есть состояние, которое неплохо мапится на URL: раскрыли ветвь - добавили её идентификатор в адрес. Можно все развёрнутые хранить, можно только последний. А можно вообще в адресе менять уникальный код, а непосредственное состояние хранить на сервере.
Смысл в том, чтобы человек мог сам себе послать ссылку, открыть её и увидеть ровно то же самое.
1. Урл должен меняться везде одинаково либо не менятся вообще.
2.
Не связываются у меня эти три представления,
Взгляните на него как на одно представляние, у которого есть 2 зависимости
Наличие бок панели => Ширина экрана
Ширина экрана => максимальное число родительских веток доступных одновременно для просмотра