diff --git a/package-lock.json b/package-lock.json index 5901e84..b094a30 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,6 +7,7 @@ "": { "version": "0.0.0", "dependencies": { + "@docsearch/react": "^3.8.0", "@giscus/react": "^3.0.0", "@next/third-parties": "^14.2.18", "@vercel/analytics": "^1.4.0", @@ -40,6 +41,231 @@ "textlint-rule-allowed-uris": "^1.0.5" } }, + "node_modules/@algolia/autocomplete-core": { + "version": "1.17.7", + "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.17.7.tgz", + "integrity": "sha512-BjiPOW6ks90UKl7TwMv7oNQMnzU+t/wk9mgIDi6b1tXpUek7MW0lbNOUHpvam9pe3lVCf4xPFT+lK7s+e+fs7Q==", + "license": "MIT", + "dependencies": { + "@algolia/autocomplete-plugin-algolia-insights": "1.17.7", + "@algolia/autocomplete-shared": "1.17.7" + } + }, + "node_modules/@algolia/autocomplete-plugin-algolia-insights": { + "version": "1.17.7", + "resolved": "https://registry.npmjs.org/@algolia/autocomplete-plugin-algolia-insights/-/autocomplete-plugin-algolia-insights-1.17.7.tgz", + "integrity": "sha512-Jca5Ude6yUOuyzjnz57og7Et3aXjbwCSDf/8onLHSQgw1qW3ALl9mrMWaXb5FmPVkV3EtkD2F/+NkT6VHyPu9A==", + "license": "MIT", + "dependencies": { + "@algolia/autocomplete-shared": "1.17.7" + }, + "peerDependencies": { + "search-insights": ">= 1 < 3" + } + }, + "node_modules/@algolia/autocomplete-preset-algolia": { + "version": "1.17.7", + "resolved": "https://registry.npmjs.org/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.17.7.tgz", + "integrity": "sha512-ggOQ950+nwbWROq2MOCIL71RE0DdQZsceqrg32UqnhDz8FlO9rL8ONHNsI2R1MH0tkgVIDKI/D0sMiUchsFdWA==", + "license": "MIT", + "dependencies": { + "@algolia/autocomplete-shared": "1.17.7" + }, + "peerDependencies": { + "@algolia/client-search": ">= 4.9.1 < 6", + "algoliasearch": ">= 4.9.1 < 6" + } + }, + "node_modules/@algolia/autocomplete-shared": { + "version": "1.17.7", + "resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.17.7.tgz", + "integrity": "sha512-o/1Vurr42U/qskRSuhBH+VKxMvkkUVTLU6WZQr+L5lGZZLYWyhdzWjW0iGXY7EkwRTjBqvN2EsR81yCTGV/kmg==", + "license": "MIT", + "peerDependencies": { + "@algolia/client-search": ">= 4.9.1 < 6", + "algoliasearch": ">= 4.9.1 < 6" + } + }, + "node_modules/@algolia/client-abtesting": { + "version": "5.14.0", + "resolved": "https://registry.npmjs.org/@algolia/client-abtesting/-/client-abtesting-5.14.0.tgz", + "integrity": "sha512-HR4kbCmq4RO8vhafLrVcR11q3BvuPYA4o+Nn8hzJRgpDu2fauIlgIBgVDsoxaK90xuaPLSNdoT5tWXag+L8vCw==", + "license": "MIT", + "dependencies": { + "@algolia/client-common": "5.14.0", + "@algolia/requester-browser-xhr": "5.14.0", + "@algolia/requester-fetch": "5.14.0", + "@algolia/requester-node-http": "5.14.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/client-analytics": { + "version": "5.14.0", + "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-5.14.0.tgz", + "integrity": "sha512-EnmouGUQdIvwmI8plglt3HP9hXwNNwCJshszfU/Hqi2n21//iwmWLmMb5gXDfiLhyMa6u8eya8c03QT79s3/tQ==", + "license": "MIT", + "dependencies": { + "@algolia/client-common": "5.14.0", + "@algolia/requester-browser-xhr": "5.14.0", + "@algolia/requester-fetch": "5.14.0", + "@algolia/requester-node-http": "5.14.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/client-common": { + "version": "5.14.0", + "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-5.14.0.tgz", + "integrity": "sha512-xYaswEqv+mTeazOJV0PELs4LYXaETYGwlntQxvOTHsICaj1e+ylKeMr+C+ZvN74RpCRDoEN3a2n33bRU9/MHTw==", + "license": "MIT", + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/client-insights": { + "version": "5.14.0", + "resolved": "https://registry.npmjs.org/@algolia/client-insights/-/client-insights-5.14.0.tgz", + "integrity": "sha512-1dWxjTmpNCgLWLl6GSAaOACs55JvioAIdno7jvq7KVfpLLXehHaSaiij8ssbbIM8HqHZPwC8ShaUHtSt2jLdBg==", + "license": "MIT", + "dependencies": { + "@algolia/client-common": "5.14.0", + "@algolia/requester-browser-xhr": "5.14.0", + "@algolia/requester-fetch": "5.14.0", + "@algolia/requester-node-http": "5.14.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/client-personalization": { + "version": "5.14.0", + "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-5.14.0.tgz", + "integrity": "sha512-HDOYm38nUwflxaemKrxlV91pYg3L9JkmLnuSQCJ7bzivqP+aBTZ8mGRvanFzwayNMRZWLuGsstJMpGET6FYaDQ==", + "license": "MIT", + "dependencies": { + "@algolia/client-common": "5.14.0", + "@algolia/requester-browser-xhr": "5.14.0", + "@algolia/requester-fetch": "5.14.0", + "@algolia/requester-node-http": "5.14.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/client-query-suggestions": { + "version": "5.14.0", + "resolved": "https://registry.npmjs.org/@algolia/client-query-suggestions/-/client-query-suggestions-5.14.0.tgz", + "integrity": "sha512-yDPf3E3MS2RUg1br7r1+PEqKOxUftxjLLtD35yW9voZ9oV45XZnAPnHCqgmyzjcK5/dM1dzXHhmZGf4VbjYn7Q==", + "license": "MIT", + "dependencies": { + "@algolia/client-common": "5.14.0", + "@algolia/requester-browser-xhr": "5.14.0", + "@algolia/requester-fetch": "5.14.0", + "@algolia/requester-node-http": "5.14.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/client-search": { + "version": "5.14.0", + "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-5.14.0.tgz", + "integrity": "sha512-x5/GVLDyGad8aiWA/vfj8X4NXOZ3FlwXw/gb7t+Mxo3O0g3VxSFQdyrZ8Oduv/Y/Y8cxMVEOx1u3Azs6tlSZbg==", + "license": "MIT", + "dependencies": { + "@algolia/client-common": "5.14.0", + "@algolia/requester-browser-xhr": "5.14.0", + "@algolia/requester-fetch": "5.14.0", + "@algolia/requester-node-http": "5.14.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/ingestion": { + "version": "1.14.0", + "resolved": "https://registry.npmjs.org/@algolia/ingestion/-/ingestion-1.14.0.tgz", + "integrity": "sha512-HU9AoZDFMEIT/+xzIa9l1XkPRTH7S0jWbYWrNkeb/62TxQFvL5x/XYEa6Yf/WCFU6Qa0W+ivua8NDzxL15NVGQ==", + "license": "MIT", + "dependencies": { + "@algolia/client-common": "5.14.0", + "@algolia/requester-browser-xhr": "5.14.0", + "@algolia/requester-fetch": "5.14.0", + "@algolia/requester-node-http": "5.14.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/monitoring": { + "version": "1.14.0", + "resolved": "https://registry.npmjs.org/@algolia/monitoring/-/monitoring-1.14.0.tgz", + "integrity": "sha512-tGKip5Dvusw8z4ajIJBBYxdPUOGIqV1CGat55eCaAmX97Oko2adIOq9MKvdC3d7SMuQt3j28QIHpV6wvihnsKA==", + "license": "MIT", + "dependencies": { + "@algolia/client-common": "5.14.0", + "@algolia/requester-browser-xhr": "5.14.0", + "@algolia/requester-fetch": "5.14.0", + "@algolia/requester-node-http": "5.14.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/recommend": { + "version": "5.14.0", + "resolved": "https://registry.npmjs.org/@algolia/recommend/-/recommend-5.14.0.tgz", + "integrity": "sha512-wXOWFG4L0Y/EyWKuDXQA7FoB7Ukuss+O8zaxZSlla4h19UGWak+22RcZ2eDFoAhVOJxC8RoLg9opMfDbZtPW9Q==", + "license": "MIT", + "dependencies": { + "@algolia/client-common": "5.14.0", + "@algolia/requester-browser-xhr": "5.14.0", + "@algolia/requester-fetch": "5.14.0", + "@algolia/requester-node-http": "5.14.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/requester-browser-xhr": { + "version": "5.14.0", + "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-5.14.0.tgz", + "integrity": "sha512-5zk1sol+WTDskAx1AMBGGDChCVBHuPTmclGZO844/ljqH7AcJpkFnfUeAMXfx2m4tW3Ax+M+uaC+XjVoQRb9Hg==", + "license": "MIT", + "dependencies": { + "@algolia/client-common": "5.14.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/requester-fetch": { + "version": "5.14.0", + "resolved": "https://registry.npmjs.org/@algolia/requester-fetch/-/requester-fetch-5.14.0.tgz", + "integrity": "sha512-B9grYSKH34UlJPkUdds14I/m8Yp7/a4PbqRuZsrP1L4kBW2FGinMtpQOK3N6gEy8YkVNA1iKlTC24yro8z8a8A==", + "license": "MIT", + "dependencies": { + "@algolia/client-common": "5.14.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/requester-node-http": { + "version": "5.14.0", + "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-5.14.0.tgz", + "integrity": "sha512-2EPhRqbxWzrsSXX0/70jIGtjQTj8VILi+uqmgBweyQIzCNlGoNbyMs+E7iwHVtUSrE/9IDd8rrewkVHOI6h2IQ==", + "license": "MIT", + "dependencies": { + "@algolia/client-common": "5.14.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, "node_modules/@azu/format-text": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/@azu/format-text/-/format-text-1.0.2.tgz", @@ -263,6 +489,44 @@ "postcss-selector-parser": "^6.1.0" } }, + "node_modules/@docsearch/css": { + "version": "3.8.0", + "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.8.0.tgz", + "integrity": "sha512-pieeipSOW4sQ0+bE5UFC51AOZp9NGxg89wAlZ1BAQFaiRAGK1IKUaPQ0UGZeNctJXyqZ1UvBtOQh2HH+U5GtmA==", + "license": "MIT" + }, + "node_modules/@docsearch/react": { + "version": "3.8.0", + "resolved": "https://registry.npmjs.org/@docsearch/react/-/react-3.8.0.tgz", + "integrity": "sha512-WnFK720+iwTVt94CxY3u+FgX6exb3BfN5kE9xUY6uuAH/9W/UFboBZFLlrw/zxFRHoHZCOXRtOylsXF+6LHI+Q==", + "license": "MIT", + "dependencies": { + "@algolia/autocomplete-core": "1.17.7", + "@algolia/autocomplete-preset-algolia": "1.17.7", + "@docsearch/css": "3.8.0", + "algoliasearch": "^5.12.0" + }, + "peerDependencies": { + "@types/react": ">= 16.8.0 < 19.0.0", + "react": ">= 16.8.0 < 19.0.0", + "react-dom": ">= 16.8.0 < 19.0.0", + "search-insights": ">= 1 < 3" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + }, + "search-insights": { + "optional": true + } + } + }, "node_modules/@dual-bundle/import-meta-resolve": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/@dual-bundle/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz", @@ -2167,6 +2431,30 @@ "url": "https://github.com/sponsors/epoberezkin" } }, + "node_modules/algoliasearch": { + "version": "5.14.0", + "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-5.14.0.tgz", + "integrity": "sha512-qr21NtvIkpptwj9z6W5guICK8yijXIGzw7Ka26zAPofnefofVXoXtuAopjtmk1ZKDu4YpACj38n9mgKKc5Zuhw==", + "license": "MIT", + "dependencies": { + "@algolia/client-abtesting": "5.14.0", + "@algolia/client-analytics": "5.14.0", + "@algolia/client-common": "5.14.0", + "@algolia/client-insights": "5.14.0", + "@algolia/client-personalization": "5.14.0", + "@algolia/client-query-suggestions": "5.14.0", + "@algolia/client-search": "5.14.0", + "@algolia/ingestion": "1.14.0", + "@algolia/monitoring": "1.14.0", + "@algolia/recommend": "5.14.0", + "@algolia/requester-browser-xhr": "5.14.0", + "@algolia/requester-fetch": "5.14.0", + "@algolia/requester-node-http": "5.14.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, "node_modules/ansi-colors": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz", @@ -8628,6 +8916,13 @@ "loose-envify": "^1.1.0" } }, + "node_modules/search-insights": { + "version": "2.17.2", + "resolved": "https://registry.npmjs.org/search-insights/-/search-insights-2.17.2.tgz", + "integrity": "sha512-zFNpOpUO+tY2D85KrxJ+aqwnIfdEGi06UH2+xEb+Bp9Mwznmauqc9djbnBibJO5mpfUPPa8st6Sx65+vbeO45g==", + "license": "MIT", + "peer": true + }, "node_modules/section-matter": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz", diff --git a/package.json b/package.json index 2c9f414..a68ed36 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "count-docs": "ls -R src/posts/docs | grep .md | wc -l" }, "dependencies": { + "@docsearch/react": "^3.8.0", "@giscus/react": "^3.0.0", "@next/third-parties": "^14.2.18", "@vercel/analytics": "^1.4.0", diff --git a/src/app/layout.jsx b/src/app/layout.jsx index 07fcc6e..b0937ba 100644 --- a/src/app/layout.jsx +++ b/src/app/layout.jsx @@ -15,6 +15,8 @@ import Links from '@/components/aside/Links'; import Profile from '@/components/aside/Profile/Profile'; import DarkModeToggle from '@/components/header/DarkModeToggle'; +import DocSearch from '@/components/header/DocSearch'; +import FlexContainer from '@/components/header/FlexContainer'; import Title from '@/components/header/Title'; import { GOOGLE_GA_ID } from '@/constants'; @@ -43,7 +45,10 @@ export default function RootLayout({ children }) {
- <DarkModeToggle /> + <FlexContainer> + <DocSearch /> + <DarkModeToggle /> + </FlexContainer> </Header> <Aside> <Profile /> diff --git a/src/components/header/DocSearch/DocSearch.jsx b/src/components/header/DocSearch/DocSearch.jsx new file mode 100644 index 0000000..75840e5 --- /dev/null +++ b/src/components/header/DocSearch/DocSearch.jsx @@ -0,0 +1,76 @@ +'use client'; + +import { DocSearch as DocSearchOriginal } from '@docsearch/react'; + +import styles from './DocSearch.module.scss'; +import '@docsearch/css'; +import './DocSearch.scss'; + +export default function DocSearch() { + return ( + <div className={styles['doc-search']}> + <DocSearchOriginal + // required + appId="TDWHMEE0BV" + indexName="lumir" + apiKey="efdaf0563b2410865299d1ad43c1a3d7" + // optional + maxResultsPerGroup={10} + placeholder="Search / 검색" + translations={{ + button: { + buttonText: 'Search / 검색', + buttonAriaLabel: 'Search / 검색', + }, + modal: { + searchBox: { + resetButtonTitle: 'Clear the query / 검색 창 지우기', + resetButtonAriaLabel: 'Clear the query / 검색 창 지우기', + cancelButtonText: 'Cancel / 취소', + cancelButtonAriaLabel: 'Cancel / 취소', + searchInputLabel: 'Search / 검색', + }, + startScreen: { + recentSearchesTitle: 'Recent Searches / 최근 검색', + noRecentSearchesText: 'No recent searches. / 최근 검색 결과가 없습니다.', + saveRecentSearchButtonTitle: 'Save this search / 검색 결과 저장하기', + removeRecentSearchButtonTitle: + 'Remove this search from history / 히스토리에서 검색 결과 삭제하기', + favoriteSearchesTitle: 'Favorite / 즐겨찾기', + removeFavoriteSearchButtonTitle: + 'Remove this search from favorites / 즐겨찾기에서 검색 결과 삭제하기', + }, + errorScreen: { + titleText: 'Unable to fetch results / 결과를 가져올 수 없습니다', + helpText: + 'You might want to check your network connection. / 네트워크 연결을 확인해주세요.', + }, + footer: { + selectText: 'Select / 선택', + selectKeyAriaLabel: 'Enter / 엔터', + navigateText: 'Navigate / 이동', + navigateUpKeyAriaLabel: 'Arrow up / 위쪽 화살표', + navigateDownKeyAriaLabel: 'Arrow down / 아래쪽 화살표', + closeText: 'Close / 닫기', + closeKeyAriaLabel: 'Escape / 닫기', + searchByText: '', + }, + noResultsScreen: { + noResultsText: 'No results for / 검색 결과가 없습니다', + suggestedQueryText: 'Try searching for / 아래 검색어를 시도해보세요', + reportMissingResultsText: + 'Believe this query should return results? / 해당 쿼리가 결과를 반환해야 하나요?', + reportMissingResultsLinkText: 'Let us know. / 알려주세요.', + }, + }, + }} + searchParameters={{ + /** + * {@link https://www.algolia.com/doc/api-reference/api-parameters/attributesToSnippet/} + */ + attributesToSnippet: ['*:40'], + }} + /> + </div> + ); +} diff --git a/src/components/header/DocSearch/DocSearch.module.scss b/src/components/header/DocSearch/DocSearch.module.scss new file mode 100644 index 0000000..42e1ca1 --- /dev/null +++ b/src/components/header/DocSearch/DocSearch.module.scss @@ -0,0 +1,11 @@ +.doc-search { + @include props-flex-center; + + margin: $size-10 $size-8 $size-10 0; + + @include screen(md) { + width: 256px; + border: $border-default; + border-radius: $size-border-radius; + } +} diff --git a/src/components/header/DocSearch/DocSearch.scss b/src/components/header/DocSearch/DocSearch.scss new file mode 100644 index 0000000..44f0dbd --- /dev/null +++ b/src/components/header/DocSearch/DocSearch.scss @@ -0,0 +1,91 @@ +/* stylelint-disable selector-class-pattern */ + +.DocSearch { + --docsearch-text-color: var(--color-fg-default); + --docsearch-muted-color: var(--color-fg-muted); + --docsearch-highlight-color: var(--color-main); + + /* modal */ + --docsearch-modal-width: 75vw; + --docsearch-modal-height: 75vh; + --docsearch-modal-background: var(--color-bg-inset); + + /* search box */ + --docsearch-searchbox-background: var(--color-bg-inset); + --docsearch-searchbox-focus-background: var(--color-bg-inset); + --docsearch-searchbox-shadow: inset 0 0 0 1px var(--color-border-default); + + /* hit */ + --docsearch-hit-color: var(--color-fg-default); + --docsearch-hit-background: var(--color-bg-default); + + /* key */ + --docsearch-key-gradient: none; + + /* footer */ + --docsearch-footer-height: 48px; + --docsearch-footer-background: var(--color-bg-default); +} + +.DocSearch-Button { + @include selector-hover-default; + + width: 100%; + height: 100%; + margin: 0; + border-radius: $size-border-radius; + + &:hover { + border-radius: $size-border-radius; + box-shadow: none; + } +} + +.DocSearch-Button-Placeholder { + font-size: $size-14; + letter-spacing: $size-letter-spacing-medium; +} + +.DocSearch-Search-Icon { + width: $size-28; + height: $size-28; + margin: 0 $size-2; + color: var(--color-fg-default); +} + +.DocSearch-Cancel { + font-size: $size-14; + font-weight: $text-weight-semibold; + color: var(--color-fg-default); + letter-spacing: $size-letter-spacing-small; +} + +.DocSearch-Logo { + .cls-1, + .cls-2 { + fill: var(--color-fg-default); + } +} + +.DocSearch-Hit-source { + font-size: $size-16; + color: var(--color-fg-default); + letter-spacing: $size-letter-spacing-small; +} + +.DocSearch-Button-Key, +.DocSearch-Commands-Key { + width: fit-content; + padding: $size-2 $size-4; + font-family: $font-stack-monospace; + font-size: $size-12; + color: var(--color-fg-default); + background-color: var(--color-bg-muted); + border: solid 1px var(--color-border-neutral-muted); + border-radius: $size-border-radius; + box-shadow: inset 0 -1px 0 var(--color-border-neutral-muted); +} + +.DocSearch-Title { + margin: 16px 0 32px; +} diff --git a/src/components/header/DocSearch/index.js b/src/components/header/DocSearch/index.js new file mode 100644 index 0000000..19817ea --- /dev/null +++ b/src/components/header/DocSearch/index.js @@ -0,0 +1,3 @@ +import DocSearch from './DocSearch'; + +export default DocSearch; diff --git a/src/components/header/FlexContainer/FlexContainer.jsx b/src/components/header/FlexContainer/FlexContainer.jsx new file mode 100644 index 0000000..b651261 --- /dev/null +++ b/src/components/header/FlexContainer/FlexContainer.jsx @@ -0,0 +1,5 @@ +import styles from './FlexContainer.module.scss'; + +export default function FlexContainer({ children }) { + return <div className={styles['flex-container']}>{children}</div>; +} diff --git a/src/components/header/FlexContainer/FlexContainer.module.scss b/src/components/header/FlexContainer/FlexContainer.module.scss new file mode 100644 index 0000000..6422271 --- /dev/null +++ b/src/components/header/FlexContainer/FlexContainer.module.scss @@ -0,0 +1,4 @@ +.flex-container { + display: flex; + justify-content: space-between; +} diff --git a/src/components/header/FlexContainer/index.js b/src/components/header/FlexContainer/index.js new file mode 100644 index 0000000..9ba4a7c --- /dev/null +++ b/src/components/header/FlexContainer/index.js @@ -0,0 +1,3 @@ +import FlexContainer from './FlexContainer'; + +export default FlexContainer; diff --git a/src/components/layouts/Header/Header.module.scss b/src/components/layouts/Header/Header.module.scss index e33812e..45056f3 100644 --- a/src/components/layouts/Header/Header.module.scss +++ b/src/components/layouts/Header/Header.module.scss @@ -14,8 +14,8 @@ @include screen(xl) { display: grid; - grid-template-columns: $size-sidebar-width 1fr 64px; - padding: 0; + grid-template-columns: $size-sidebar-width 1fr min-content; + padding: 0 ($size-article-padding-small * 2) 0 0; > div:first-child { grid-area: 1 / 1 / 2 / 2;