[FIXED] How to make navigation bar like toast ui homepage

Issue

What I got inspired

I want to make navigation bar like these: alt="enter image description here" />

toast ui hompage

What I did

I tried to copy as much as possible to achieve this.
And I got the following:

What I want

I want to get like these(These were made by image editing):
option1: center alignment
option2: left alignment
I want the position of the link-list to be dynamic depending on the position of the link-group that contains it. All I did was just left align it.
That is, I want the link-list to be positioned directly below the link-group that contains it, so I get a better UI.
Can you tell me how can I get this by editing my codesandbox?

Solution

Set link-list's paddingLeft link-group's x coordinate

1. Make useGetElementById

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

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

  return element;
};

2. Separate link-list into Component and receive linkGroupId as props. And set link-list's paddingLeft link-group's x coordinate

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

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

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

  return (
    <ul className="link-list" style={{ paddingLeft: linkGroupX - 200 }}>
      {pages.map((page) => (
        <li className="link" key={page.link}>
          <a href={page.link}>
            <span className="link-label">{page.title}</span>
          </a>
        </li>
      ))}
    </ul>
  );
};

3. Set link-group's Id

  ...

  {pagesKeys.map((key) => {
    const pages = PAGES.get(key) || [];
      return (
        <li key={key} className="link-group" id={key}>
          <span className="link-group-label">{key}</span>
          <div className="link-list-box">
            <LinkList linkGroupId={key} pages={pages} />
          </div>
         </li>
       );
     })}

    ...

Then I was able to get option2.

If 'LinkList' overflows, it seems better to not wrap until 'LinkList' fills '.link-list-box' by the left padding naturally decreases. But I don't know how to do this.

Answered By - hyeogeon
Answer Checked By - - Gilberto Lyons (ReactFix Admin)