创建一个类似于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”，左侧填充自然减少。但我不知道该怎么做。