TheOnlyFastCoder2

Используйте LocalStorage , т.е вам нужно загружать свои данные и выгружать (Удалять) на свои страницы .
Так вы можете жонглировать своими данными между вашими страницами .
А так советую вам использовать nuxt для Vue шикарный framework . Или nextJS или nestJS для react или angular

Я не понимаю , зачем вам нужно менять местами ссылку с кнопкой , в чем смысл ?
Я понимаю вы хотите сделать кнопку одну но для разных целей , но так не очень хорошо делать как по мне

//css
.submit.myStyles1 {
}
.submit.myStyles2 {
}
.submit.myStyles3 {
}

const myfunction1 = () => {}
const myfunction2 = () => {}


const PhoneBTN = ({phone}) => (
  <a className="phone" href={`tel:${phone}`}>
    <img src="./Assets/Phone.svg" alt="" />
  </a>
)

const Button = ({type,text}) => {
  
  return (
    type === "phone" ? 
    <PhoneBTN {...{phone:text}} onClick={myfunction1}/>: 
    <button className="submit myStyles" onClick={myfunction2}>{text}</button> 
  )
} 

const render = () => (
  <Button {...{type:"phone",text:""}}/>
)

Поменяйте свой код , на этот

const buttons = document.querySelectorAll('ul.sidebar-menu > li');
const divs = document.querySelectorAll('div.services-info>div.content>div');
buttons.forEach( (btn,i) => {
    btn.onclick = _ => {
        for(let j = divs.length; j--;) {
            const divsName = divs[j].classList[0];
            divsName == btn.id ?
            divs[j].classList.add('visible'):
            divs[j].classList.remove('visible') 
        } 
    }
})

(Изменил ответ)
//index.js

import React from "react";
import { render } from "react-dom";

// import react router
import { BrowserRouter, Link } from "react-router-dom";
import toLinkParams from "./toLinkParams";

const params = {
  pathname: "/signup",
  search: toLinkParams({
    lang: "ua",
    source: "3",
    offer: 1,
    country: "ua"
  })
};

const App = () => (
  <BrowserRouter>
    <div className="sans-serif">
      <Link to={params}>Button</Link>
    </div>
  </BrowserRouter>
);

render(<App />, document.getElementById("root"));

//toLinkParams.js

export default function toLinkParams(params) {
  return (
    "?" +
    Object.entries(params)
      .map((param) => {
        const [key, value] = param;
        return `${key}=${value}`;
      })
      .join("&")
  );
}

у вас ошибки были в некоторых местах , попробуйте сейчас

<template>
  <div className="container">
    <h1>Portfolio</h1>
    <ul class="portfolio__video-item">
        <li
            v-for="video in mainVideo"
            v-bind:key="video.id"
            class="portfolio__video-item__subitem"
        >
            <img v-bind:src="video.img" />
            <div class="portfolio__video-descr">
                <div class="portfolio__video-descr__title">
                    {{ video.title }}
                </div>
                <div class="portfolio__video-descr__subtitle">
                    <span>
                        {{ video.subtitle }}
                    </span>
                </div>
            </div>
        </li>
    </ul>

    <div
        class="modal"
        v-for="modal in modals"
        v-bind:key="modal.id"
    >
        <div class="modal__close">&times;</div>
        <div class="modal__wrapper" >
        <div class="modal__player">
            <iframe
                class="modal__player-item"
                v-bind:src="modal.url"
            ></iframe>
        </div>
            <div class="modal__descr-block">
                <h2 class="modal__descr-block__subtitle">
                <span>{{ modal.title }}</span>
                </h2>
                <div class="modal__descr-block__descr">
                    <span>{{ modal.description }}</span>
                </div>
            </div>
        </div>
     </div>
  </div>
  
</template>

Я так реализовал плавную прокрутку , на ванильном js. Надеюсь , что помог вам

Зависимости от расстояния регулируйте delay , чтобы погрешность была не велика
надеюсь я вам помог) поменяйте значение num1=30000 num2=20 вам можно поставить delay 0.6
чтобы узнать необходимый диапазон delay , нужно записать такую формулу num2 / num 1 * 1000 = 0.6 можно выбрать все значения до 0.6

____ШкОлЬНики:
Мне математика и физика не нужна :))____ результат ->


Мне интересно , а для чего вам этот алгоритм понадобился ?

Просто добавьте своей оболочке или телу слейдера overflow: hidden;

.slider {
    width: 100%;
    display: flex;
    justify-content: center;
    overflow:hidden;
}
или 
.slider-wrapper {
    overflow:hidden;
    max-width: 800px;
    width: 100%;
    height: 120px;
    position: relative;
    box-shadow: 10px 10px 44px -10px rgba(0,0,0,0.75);
}

Вроде по максимуму сократил и улучшил.
Если вы как-нибудь исправите(улучшите) названия своих ключей , код будет еще лучше смотреться

const SECTIONS = ['top','bottom','head','shoes','bag','accs',];

const prepareShareItems = ({person,items}) => {    
    for (var  i = 0 , res = {} ; i < SECTIONS.length; i++) {
      	const {slide,list}  = person[SECTIONS[i]];
      	Object.assign(res,{[SECTIONS[i]]: items.find((item) => item.id === list[slide]).image})
    }
    return res;
};

prepareShareItems(store.getState().globals)

Что то вроде этого : https://codepen.io/theonlyfastcoder2/pen/JjNJXyv ?
Вам всего-лишь нужно изменить дизайн этой менюшки , и изменить или добавить теги li в menu-lowerNav_ul
в принципе на этом все.

Может быть вы хотели сделать что то подобное ?

import React, { useState } from "react";

export default function App() {
  let [getID,setID] = useState(0);
  return (
    <>
      <p> {getID} </p>
      <button onClick={ () => setTimeout(() => setID(getID + 1),800)} > clickMe </button>
    </>
  )
}

или что то вроде этого

import React, { useState } from "react";

const MemoID = ({getID}) => {
  return Array.from(new Array(getID)).map( (_,i) => {
    return (<p key={i}> {i} </p>)
  })
}

export default function App() {
  let [getID,setID] = useState(0);
  return (
    <>
      <MemoID key={getID} {...{getID}}/>
      <button onClick={ () => setTimeout(() => setID(getID + 1),800)} > clickMe </button>
    </>
  )
}

Потому что getAllResponseHeaders() отображает заголовки получателя , которой дает вам доступ на запрос .
Вот разъяснение из документации :


XMLHttpRequest.getAllResponseHeaders ()

Метод XMLHttpRequest getAllResponseHeaders () возвращает все заголовки ответов, разделенные CRLF, в виде строки или возвращает null, если ответ не был получен. Если произошла сетевая ошибка, возвращается пустая строка.