Skip to content

Commit 3c9cf62

Browse files
zzq0826zzq0826
committed
update
1 parent 087d84a commit 3c9cf62

File tree

19 files changed

+302
-222
lines changed

19 files changed

+302
-222
lines changed

‎public/assets/search.svg‎

Lines changed: 2 additions & 10 deletions
Loading

‎src/components/Header/Header.astro‎

Lines changed: 48 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -31,29 +31,32 @@ const section = frontmatter?.section ?? ""
3131
<img src="/scroll.svg" style="height:22px; width: 80px" alt={CONFIG.SITE.title ?? "Documentation"} />
3232
</a>
3333
</div>
34-
<div class="navbar">
35-
{
36-
MENU[i18next.language].map((link) => (
37-
<a class="nav-link" href={link.link} aria-current={link.section === section}>
38-
{link.text}
39-
</a>
40-
))
41-
}
42-
</div>
43-
44-
{
45-
CONFIG.ALGOLIA && (
46-
<div class="search-item">
47-
<Search client:visible />
34+
<div class="right-box">
35+
<div class="navbar">
36+
{
37+
MENU[i18next.language].map((link) => (
38+
<a class="nav-link" href={link.link} aria-current={link.section === section}>
39+
{link.text}
40+
</a>
41+
))
42+
}
43+
</div>
44+
<div class="tools">
45+
{
46+
CONFIG.ALGOLIA && (
47+
<div class="search-item">
48+
<Search client:visible />
49+
</div>
50+
)
51+
}
52+
<LanguageSelector class="language-selector" />
53+
<a href="https://github.com/scroll-tech/scroll-documentation" class="github-url" target="_blank" rel="nofollow">
54+
<img src="/assets/github.svg" />
55+
</a>
56+
<div class="menu-toggle">
57+
<SidebarToggle client:idle />
4858
</div>
49-
)
50-
}
51-
<LanguageSelector class="language-selector" />
52-
<a href="https://github.com/scroll-tech/scroll-documentation" class="github-url" target="_blank" rel="nofollow">
53-
<img src="/assets/github.svg" />
54-
</a>
55-
<div class="menu-toggle">
56-
<SidebarToggle client:idle />
59+
</div>
5760
</div>
5861
</nav>
5962
</header>
@@ -63,12 +66,11 @@ const section = frontmatter?.section ?? ""
6366
header {
6467
z-index: 11;
6568
width: 100%;
66-
display: flex;
67-
align-items: center;
68-
justify-content: center;
69-
overflow: hidden;
69+
/* overflow: hidden; */
7070
position: sticky;
7171
top: 0;
72+
display: flex;
73+
align-items: center;
7274
@apply h-navbar;
7375
}
7476

@@ -89,6 +91,7 @@ const section = frontmatter?.section ?? ""
8991
background-size: 1em;
9092
}
9193
.nav-link {
94+
line-height: 40px;
9295
@apply text-primary;
9396
}
9497

@@ -108,7 +111,7 @@ const section = frontmatter?.section ?? ""
108111
color: hsla(var(--color-base-white), 100%, 1);
109112
gap: 0.25em;
110113
z-index: -1;
111-
flex-grow: 1;
114+
/* flex-grow: 1; */
112115
}
113116

114117
.logo a {
@@ -137,33 +140,32 @@ const section = frontmatter?.section ?? ""
137140
}
138141

139142
.nav-wrapper {
140-
display: flex;
141-
align-items: center;
142-
justify-content: flex-end;
143+
display: grid;
144+
grid-template-columns: 1fr 5fr;
143145
gap: 1em;
144146
width: 100%;
145-
max-width: 92em;
147+
/* max-width: 92em; */
146148
margin: 0 1.25rem;
147149
}
148150
.spacer {
149151
display: none;
150-
flex-grow: 0.5;
152+
/* flex-grow: 0.5; */
151153
}
152154
.github-url {
153155
display: none;
154156
}
155157

156158
@media (min-width: 50em) {
157159
.logo {
158-
flex-grow: 0;
160+
/* flex-grow: 0; */
159161
}
160162

161163
.spacer {
162164
display: block;
163165
}
164166
header {
165167
position: static;
166-
padding: 1rem 0rem;
168+
/* padding: 1rem 0rem; */
167169
}
168170

169171
.logo {
@@ -183,11 +185,20 @@ const section = frontmatter?.section ?? ""
183185
.navbar {
184186
display: none;
185187
}
188+
.right-box {
189+
display: flex;
190+
justify-content: space-between;
191+
}
192+
.tools {
193+
display: flex;
194+
align-items: center;
195+
gap: 15px;
196+
}
186197
@media (min-width: 50em) {
187198
.navbar {
188199
display: flex;
189-
gap: 2rem;
190-
flex-grow: 1;
200+
gap: 45px;
201+
/* flex-grow: 1; */
191202
justify-content: center;
192203
}
193204
.navbar a[aria-current="true"] {
@@ -207,6 +218,6 @@ const section = frontmatter?.section ?? ""
207218
}
208219

209220
:global(.search-item > *) {
210-
flex-grow: 1;
221+
/* flex-grow: 1; */
211222
}
212223
</style>

‎src/components/Header/Search/Search.module.css‎

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,21 @@
11
/** Style Algolia */
22
#searchModal {
3-
@apply p-6;
3+
/* padding: 12px 12px 12px 4px; */
4+
border-radius: 17.5px;
5+
background: white;
6+
position: absolute;
7+
top: 0;
8+
left: 0;
9+
right: 0;
410
}
511

612
.searchInput {
13+
position: relative;
714
display: none;
815
flex-grow: 1;
916
box-sizing: border-box;
1017
margin: 0;
11-
padding: 0.62em 0.5em;
18+
padding: 0.62em 12px;
1219
overflow: visible;
1320
font-weight: 500;
1421
font-size: 1rem;
@@ -106,11 +113,14 @@
106113
}
107114

108115
.resultsWrapper {
109-
@apply my-4 mx-0;
116+
/* @apply my-4 mx-0; */
110117
overflow: overlay;
111-
max-height: calc(100vh - 109px);
112-
margin: 0 calc(var(--modal-padding) * -1) calc(var(--modal-padding) * -1);
113-
padding: var(--modal-padding) var(--modal-padding) var(--modal-padding) var(--space-6x);
118+
background: white;
119+
border-radius: 17.5px;
120+
padding: 20px 4px 1rem;
121+
/* max-height: calc(100vh - 109px); */
122+
/* margin: 0 calc(var(--modal-padding) * -1) calc(var(--modal-padding) * -1); */
123+
/* padding: var(--modal-padding) var(--modal-padding) var(--modal-padding) var(--space-6x); */
114124
}
115125

116126
.hitWrapper ol {
@@ -126,6 +136,7 @@
126136
}
127137

128138
.queryResults h6 {
139+
font-size: 14px;
129140
@apply mt-4;
130141
}
131142
.hitList {
@@ -141,6 +152,8 @@
141152

142153
.hitList li a {
143154
line-height: 1.5rem;
155+
padding-left: 8px;
156+
font-size: 15px;
144157
}
145158

146159
.hitList mark {
@@ -150,18 +163,18 @@
150163
.hit {
151164
line-height: 32px;
152165
display: block;
153-
@apply text-secondary;
166+
@apply text-primary;
154167
}
155168
.hideSm {
156169
display: none;
157170
}
158171
@media (min-width: 50em) {
159172
#searchModal {
160-
top: 50px;
173+
top: 0;
161174
height: fit-content;
162-
transform: translateX(-50%);
175+
/* transform: translateX(-50%); */
163176
max-height: 80vh;
164-
@apply p-8;
177+
/* @apply p-8; */
165178
}
166179
.queryResults {
167180
grid-template-columns: 1fr 1fr;
@@ -177,7 +190,7 @@
177190
display: block;
178191
}
179192
.resultsWrapper {
180-
max-height: calc(80vh - 115px);
193+
/* max-height: calc(80vh - 115px); */
181194
}
182195

183196
.modalDivider {

‎src/components/Header/Search/Search.tsx‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import styles from "./Search.module.css"
33

44
import { useKeyPress } from "~/hooks/useKeyPress"
55
import { SearchModal } from "./SearchModal"
6+
import { SearchInput } from "./SearchInput"
67

78
export default function Search() {
89
const [isOpen, setIsOpen] = useState(false)
@@ -22,17 +23,26 @@ export default function Search() {
2223
})
2324

2425
return (
25-
<>
26-
<button onClick={onOpen} className={styles.searchInput}>
27-
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none">
28-
<path d="M16 16L11.4562 11.45C12.5625 10.3437 13.2438 8.8125 13.2438 7.125C13.2438 3.74375 10.5 1 7.11875 1C3.7375 1 1 3.74375 1 7.125C1 10.5063 3.74375 13.25 7.125 13.25C7.5375 13.25 7.94375 13.2062 8.33125 13.1312" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
29-
</svg>
30-
</button>
26+
<div style={{ position: 'relative'}}>
27+
<div onClick={onOpen} className={styles.searchInput}>
28+
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none">
29+
<path
30+
d="M16 16L11.4562 11.45C12.5625 10.3437 13.2438 8.8125 13.2438 7.125C13.2438 3.74375 10.5 1 7.11875 1C3.7375 1 1 3.74375 1 7.125C1 10.5063 3.74375 13.25 7.125 13.25C7.5375 13.25 7.94375 13.2062 8.33125 13.1312"
31+
stroke="black"
32+
stroke-width="1.5"
33+
stroke-linecap="round"
34+
stroke-linejoin="round"
35+
/>
36+
</svg>
37+
</div>
38+
{/* <SearchInput onOpen={onOpen} onClose={onClose}>
39+
</SearchInput> */}
40+
{ isOpen && <SearchModal isOpen={isOpen} onClose={onClose} />}
41+
3142
<button onClick={onOpen} className={styles.searchInputMobile}>
3243
<img src="/assets/search.svg" alt="search" aria-label="Search" width={16} height={16} />
3344
</button>
3445

35-
<SearchModal isOpen={isOpen} onClose={onClose} />
36-
</>
46+
</div>
3747
)
3848
}

0 commit comments

Comments
 (0)