Для начала, на мобильной версии, элементу .takeout-nav задайте ширину 100vw, чтобы он прокручивался. Далее, в том месте, где вы добавляете пункту меню активный класс, добавьте примерно такой код:
const container = document.querySelector('.takeout-nav');
let containerRect = container.getBoundingClientRect();
let activeOptionRect = activeOption.getBoundingClientRect(); //activeOption - пункт меню, на который навешивается .active
if (containerRect.left + containerRect.width < activeOptionRect.left + activeOptionRect.width){
container.scrollLeft += activeOptionRect.left - containerRect.left;
}
else if (activeOptionRect.left < containerRect.left){
container.scrollLeft -= containerRect.left - activeOptionRect.left;
}
Первое что пришло в голову, возможно нужно допилить.
