File size: 3,627 Bytes
0dbc9de | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 | ---
import config from "../../config.mjs"
import astroConfig from "virtual:starlight/user-config"
import { getRelativeLocaleUrl } from "astro:i18n"
import { Icon } from "@astrojs/starlight/components"
import Default from "toolbeam-docs-theme/overrides/Header.astro"
import SiteTitle from "@astrojs/starlight/components/SiteTitle.astro"
const path = Astro.url.pathname
const locale = Astro.currentLocale || "root"
const route = Astro.locals.starlightRoute
const t = Astro.locals.t as (key: string) => string
const links = astroConfig.social || []
const headerLinks = config.headerLinks
const sharePath = /\/s(\/|$)/.test(path)
function href(url: string) {
if (url === "/" || url === "/docs" || url === "/docs/") {
return getRelativeLocaleUrl(locale, "")
}
return url
}
---
{sharePath ? (
<div class="header sl-flex">
<div class="title-wrapper sl-flex">
<SiteTitle {...route} />
</div>
<div class="middle-group sl-flex">
{headerLinks?.map(({ name, url }) => (
<a class="links" href={href(url)}>{t(name)}</a>
))}
</div>
<div class="sl-hidden md:sl-flex right-group">
{links.length > 0 && (
<div class="sl-flex social-icons">
{links.map(({ href, icon }) => (
<a {href} rel="me" target="_blank">
<Icon name={icon} size="1rem" />
</a>
))}
</div>
)}
</div>
</div>
) : (
<Default {...route} />
)}
<style>
.header {
gap: var(--sl-nav-gap);
justify-content: space-between;
align-items: center;
height: 100%;
}
.title-wrapper {
/* Prevent long titles overflowing and covering the search and menu buttons on narrow viewports. */
overflow: clip;
/* Avoid clipping focus ring around link inside title wrapper. */
padding: calc(0.25rem + 2px) 0.25rem calc(0.25rem - 2px);
margin: -0.25rem;
}
.middle-group {
justify-content: flex-end;
gap: var(--sl-nav-gap);
}
@media (max-width: 50rem) {
:global(:root[data-has-sidebar]) {
.middle-group {
display: none;
}
}
}
@media (min-width: 50rem) {
.middle-group {
display: flex;
}
}
.right-group,
.social-icons {
gap: 1rem;
align-items: center;
a {
line-height: 1;
svg {
color: var(--sl-color-text-dimmed);
}
}
a.links {
text-transform: uppercase;
font-size: var(--sl-text-sm);
color: var(--sl-color-text-secondary);
line-height: normal;
}
}
@media (min-width: 50rem) {
:global(:root[data-has-sidebar]) {
--__sidebar-pad: calc(2 * var(--sl-nav-pad-x));
}
:global(:root:not([data-has-toc])) {
--__toc-width: 0rem;
}
.header {
--__sidebar-width: max(0rem, var(--sl-content-inline-start, 0rem) - var(--sl-nav-pad-x));
--__main-column-fr: calc(
(
100% + var(--__sidebar-pad, 0rem) - var(--__toc-width, var(--sl-sidebar-width)) -
(2 * var(--__toc-width, var(--sl-nav-pad-x))) - var(--sl-content-inline-start, 0rem) -
var(--sl-content-width)
) / 2
);
display: grid;
grid-template-columns:
/* 1 (site title): runs up until the main content column’s left edge or the width of the title, whichever is the largest */
minmax(calc(var(--__sidebar-width) + max(0rem, var(--__main-column-fr) - var(--sl-nav-gap))), auto)
/* 2 (search box): all free space that is available. */
1fr
/* 3 (right items): use the space that these need. */
auto;
align-content: center;
}
}
</style>
|