How to make navigation bar like toast ui homepage

Issue

What I got inspired

I want to make navigation bar like these:
enter image description here
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:
enter image description here
enter image description here
Edit condescending-grass-cqm8z7

What I want

I want to get like these(These were made by image editing):
option1: center alignment
enter image description here
enter image description here

option2: left alignment
enter image description here
enter image description here

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;
};
  1. 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>
  );
};
  1. 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.

Edit condescending-grass-cqm8z7

Answered By – hyeogeon

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published