diff --git a/components/LinkPanel.module.css b/components/LinkPanel.module.css index b4d0c32..ed3ab20 100644 --- a/components/LinkPanel.module.css +++ b/components/LinkPanel.module.css @@ -1,6 +1,9 @@ .linkPanel { - text-decoration: none; white-space: nowrap; + + flex-direction: row; + gap: 8px; + align-items: center; } .linkPanel:hover, .linkPanel:focus { @@ -10,3 +13,14 @@ .linkPanel:active { --bhsl-current-lightness: calc(var(--bhsl-link-lightness) + 40%); } + +.linkPanelIcon { + justify-self: center; + width: 20px; + flex-shrink: 0; +} + +.linkPanelText { + flex-grow: 1; + justify-self: flex-start; +} \ No newline at end of file diff --git a/components/LinkPanel.tsx b/components/LinkPanel.tsx index e97e808..71e8308 100644 --- a/components/LinkPanel.tsx +++ b/components/LinkPanel.tsx @@ -17,9 +17,12 @@ export type LinkPanelProps = { export const LinkPanel = ({href, icon, text, me, fade}: LinkPanelProps) => { const panel = ( - -  {text} - + <> + + + {text} + + ) if(href) {