Créer une barre de navigation similaire à la page d'accueil de Toast UI

Question

Ma source d'inspiration

Je souhaite créer une barre de navigation comme celle-ci :

Page d'accueil de l'interface utilisateur de Toast

Qu'est-ce que j'ai fait

J'essaie de reproduire autant que possible pour y parvenir.

Je reçois le message suivant :

Qu'est-ce que je veux

Je veux quelque chose comme ça (ceux-ci ont été réalisés avec retouche d'image) :

选项1：居中对齐

选项2：左对齐

Je souhaite que la position de la liste chaînée soit dynamique, en fonction de la position du groupe de liens qui la contient. Tout ce que j'ai fait, c'est l'aligner à gauche.

Autrement dit, je souhaite que la liste de liens soit directement sous le groupe de liens qui la contient pour une meilleure interface utilisateur.

Pouvez-vous me dire comment obtenir cela en modifiant mon code et ma boîte ?

Answer 1

Définissez la coordonnée x de link-list 的 paddingLeft link-group

1. Utilisez GetElementById

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

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

  return element;
};

2. Séparez link-list en un composant et recevez linkGroupId comme accessoire. Et définissez la coordonnée x de link-list 的 paddingLeft 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. Définir link-groupId

  ...

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

          {key}
          

            
          
         
       );
     })}

    ...

Ensuite, j'ai pu obtenir option2.

Si "LinkList" déborde, il est préférable de ne pas effectuer de retour à la ligne jusqu'à ce que "LinkList" remplisse ".link-list-box", et le remplissage gauche diminue naturellement. Mais je ne sais pas comment faire.