Create a navigation bar similar to toast ui home page

Question

My source of inspiration

I want to make a navigation bar like this:

Toast ui homepage

what did I do

I try to replicate as much as possible to achieve this.

I get the following message:

What do I want

I want something like this (these were made with image editing):

Option 1: Center alignment

Option 2: Left alignment

I want the position of the linked list to be dynamic, depending on the position of the link group that contains it. All I did was align it left.

That is, I want the link list to be directly below the link group that contains it for better UI.

Can you tell me how to get this by editing my code and box?

Answer 1

Set the paddingLeft of link-list and the x coordinate of link-group

1. Use GetElementById

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

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

  return element;
};

2. Separate link-list into a component and receive linkGroupId as props. And set the paddingLeft of link-list and the x coordinate of link-group

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. Set the Id of link-group

  ...

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

          {key}
          

            
          
         
       );
     })}

    ...

Then I was able to get

option2.

If "LinkList" overflows, it is best not to wrap until "LinkList" fills ".link-list-box", and the left padding will naturally decrease. But I don't know how to do it.