建立一個類似toast ui主頁的導覽欄

Question

我的靈感來源

我想製作這樣的導覽列：

Toast ui首頁

我做了什麼

我嘗試盡可能複製來實現這一目標。

我得到以下資訊：

我想要什麼

我想要像這樣的（這些是透過圖像編輯製作的）：

#選項1：居中對齊

選項2：左對齊

我希望連結列表的位置是動態的，具體取決於包含它的連結組的位置。 我所做的只是將其左對齊。

也就是說，我希望連結列表直接位於包含它的連結群組下方，以便獲得更好的 UI。

你能告訴我如何透過編輯我的程式碼和框來獲得這個嗎？

Answer 1

設定 link-list 的 paddingLeft link-group 的 x 座標

1. 使用GetElementById

export const useGetElementById = (id) => {
  const [element, setElement] = useState(null);

  useEffect(() => {
    setElement(document.getElementById(id));
  }, [id]);

  return element;
};

2. 將 link-list 分離到元件中並接收 linkGroupId 作為 props。 並設定 link-list 的 paddingLeft link-group 的 x 座標

interface Props {
  linkGroupId: string;
  pages: AppPage[];
}

export const LinkList = ({ linkGroupId, pages }: Props) => {
  const [linkGroupX, setLinkGroupX] = useState(0);
  const linkGroupEl = useGetElementById(linkGroupId);

  useEffect(() => {
    if (!linkGroupEl) return;
    const linkGroupRect = linkGroupEl.getBoundingClientRect();
    setLinkGroupX(linkGroupRect.left);
  }, [linkGroupEl]);

  return (
    

      {pages.map((page) => (
        

          
            {page.title}
          
        
      ))}
    
  );
};

3. 設定link-group的Id

  ...

  {pagesKeys.map((key) => {
    const pages = PAGES.get(key) || [];
      return (
        

          {key}
          

            
          
         
       );
     })}

    ...

然後我就能夠取得 option2。

如果“LinkList”溢出，最好不要換行，直到“LinkList”填滿“.link-list-box”，左側填滿會自然減少。但我不知道該怎麼做。