Skip to content

Commit 09ceaf5

Browse files
carlagncarlagn
authored
feat: DC-5512 Update navbar per website (#7149)
* Update navbar per website * update border * Update logo-link * update searchbar * Update stylings for input * Update colros * update theme highlight * Update theming variables * update themings * update backgrounds * Update searchbar * update themings for darkmode * update navbar unnevenness * Update active css seector * update font color
1 parent 9f6d249 commit 09ceaf5

File tree

6 files changed

+138
-40
lines changed

6 files changed

+138
-40
lines changed

‎src/css/custom.css‎

Lines changed: 41 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -510,26 +510,33 @@ hr {
510510
background: var(--border-color);
511511
}
512512

513-
.navbar__link--active,
514-
.menu__link--active {
515-
color: var(--selected);
513+
.navbar .navbar__link--active {
514+
color: var(--surface-brand-default);
515+
background: var(--surface-brand-grey-strong);
516516
}
517517

518-
519-
.navbar__link--active:hover {
520-
color: var(--selected-hover);
518+
.navbar__link {
519+
position: relative;
521520
}
522521

523-
.navbar__link {
522+
.navbar__item.navbar__link:not(.logo-link):not(.navbar-login-btn):hover {
524523
position: relative;
525524
}
526525

527-
.navbar__item.navbar__link:not(.logo-link):hover {
528-
color: var(--normal-hover);
526+
.navbar__item.navbar__link:not(.logo-link):not(.navbar-login-btn):is(:hover, :focus-visible)::after { position: absolute;
527+
height: 2px;
528+
width: 100%;
529+
content: "";
530+
background: var(--surface-brand-default);
531+
bottom: -24px;
532+
left: 0;
533+
z-index: 2;
534+
pointer-events: none;
529535
}
530536

537+
531538
.navbar__item {
532-
padding: 12px 16px;
539+
padding: 8px;
533540
border-radius: 8px;
534541
font-family: Inter;
535542
font-size: 16px;
@@ -664,49 +671,59 @@ hr {
664671
}
665672

666673
.navbar__items--middle {
667-
background: var(--navbar-items-bg);
668674
padding: 0 16px;
669675
border-radius: 99px;
676+
display: flex;
677+
gap: 16px;
670678
margin: 0 auto;
671679
}
672680
.navbar__inner {
673-
margin: auto;
681+
background: var(--surface-primary);
674682
padding: 16px 24px;
675683
display: grid;
676-
grid-template-columns: 324px 1fr auto;
684+
gap: 40px;
685+
grid-template-columns: auto auto 1fr;
677686
}
678687
@media (max-width: 1191px) {
679-
.navbar__inner {
680-
grid-template-columns: repeat(3, auto);
681-
}
682688
.header-github-link {
683689
display: none;
684690
}
691+
.navbar__inner {
692+
gap: 16px;
693+
}
685694
}
686695

687696
.navbar__items--right > :last-child {
688697
display: flex;
689698
align-items: center;
690699
}
700+
.navbar__items:first-child {
701+
transform: translateY(-2px);
702+
}
703+
691704
@media (max-width: 996px) {
705+
.navbar__items:first-child {
706+
transform: unset;
707+
}
692708
.navbar__items:not(.navbar__items--right) {
693709
width: 100%;
694710
flex-direction: row-reverse;
695711
justify-content: space-between;
696712
max-width: unset;
713+
height: 48px;
697714
}
698715

699716
.navbar__inner {
700717
position: relative;
701-
display: flex;
702718
padding: 16px 32px;
719+
display: flex;
703720
}
704721

705722
.navbar__items--right > :last-child {
706-
left: 32px;
723+
left: 0;
707724
z-index: 1;
708-
top: calc(100% + 24px);
709-
width: calc(100% - 64px);
725+
top: 100%;
726+
width: calc(100% - 16px);
710727
}
711728

712729
.navbar__items--right > :last-child > * {
@@ -785,6 +802,9 @@ hr {
785802
top: 50%;
786803
transform: translateY(-50%);
787804
}
805+
.logo-link::before {
806+
content: "/"
807+
}
788808
.logo-link:hover {
789809
transform: translateY(-60%);
790810
}
@@ -870,7 +890,7 @@ hr {
870890
padding: 0;
871891
backdrop-filter: blur(7px);
872892
background: var(--navbar-gradient);
873-
box-shadow: var(--navbar-shadow);
893+
border-bottom: 1px solid var(--border-color);
874894
}
875895

876896
@media (max-width: 996px) {

‎src/css/theming.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -207,6 +207,7 @@
207207
/* For readability concerns, you should choose a lighter palette in dark mode. */
208208
/* PRIMITES WITH THEME DEFINED BY TOGGLER */
209209
html[data-theme="dark"] {
210+
--surface-brand-default: #16a394;
210211
--code-with-result: var(--gray-1000);
211212
--code-with-result-border: var(--code-bgd-color);
212213
--docsearch-searchbox-background: var(--gray-900) !important;
@@ -329,6 +330,7 @@ html[data-theme="dark"] {
329330
:root[data-theme="light"] {
330331
--code-with-result: var(--gray-800);
331332
--code-with-result-border: var(--code-with-result);
333+
--surface-brand-default: #16a394;
332334
--docsearch-searchbox-background: var(--ifm-color-secondary);
333335
--table-of-contents-link: rgb(113, 128, 150);
334336
--ifm-background-color: #fff;
@@ -507,6 +509,7 @@ html[data-theme="dark"] {
507509
:root[data-theme="dark"] {
508510
--code-with-result: var(--gray-1000);
509511
--code-with-result-border: var(--code-bgd-color);
512+
--surface-brand-default: #16a394;
510513
--docsearch-searchbox-background: var(--gray-900) !important;
511514
--table-of-contents-link: #a0aec0;
512515
--ifm-color-primary: var(--teal-600);

‎src/pages/index.module.scss‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
.mainHome {
77
overflow: hidden;
88
padding: 0;
9-
@media (max-width: 974px) {
9+
@media (max-width: 996px) {
1010
margin-top: 68px;
1111
}
1212
}
@@ -113,14 +113,14 @@
113113
gap: 40px;
114114
margin-top: 36px;
115115
grid-template-columns: 1fr;
116-
@media (min-width: 974px) {
116+
@media (min-width: 996px) {
117117
grid-template-columns: repeat(2, calc(50% - 20px));
118118
}
119119
.tabBox {
120120
width: 100%;
121121
height: 100%;
122122
max-width: 100%;
123-
@media (min-width: 974px) {
123+
@media (min-width: 996px) {
124124
height: 100%;
125125
}
126126
.heading {
@@ -210,7 +210,7 @@
210210
line-height: 52.8px;
211211
letter-spacing: -0.02em;
212212
text-align: left;
213-
@media (min-width: 974px) {
213+
@media (min-width: 996px) {
214214
font-size: 48px;
215215
}
216216
}
@@ -223,7 +223,7 @@
223223
letter-spacing: -2%;
224224
margin: 40px 0 24px;
225225

226-
@media (min-width: 974px) {
226+
@media (min-width: 996px) {
227227
margin: 80px 0 24px;
228228
font-size: 36px;
229229
}
@@ -243,7 +243,7 @@
243243
gap: 24px;
244244
flex-wrap: wrap;
245245
display: grid;
246-
@media (min-width: 974px) {
246+
@media (min-width: 996px) {
247247
grid-template-columns: repeat(3, 1fr);
248248
}
249249
}
@@ -264,7 +264,7 @@
264264
display: grid;
265265
gap: 40px;
266266
grid-template-columns: 1fr;
267-
@media (min-width: 974px) {
267+
@media (min-width: 996px) {
268268
grid-template-columns: repeat(3, 1fr);
269269
}
270270
.howItem {
@@ -301,7 +301,7 @@
301301
line-height: 140%;
302302
letter-spacing: 0%;
303303
margin: 16px 0 0;
304-
@media (min-width: 974px) {
304+
@media (min-width: 996px) {
305305
height: 98px;
306306
}
307307
}
@@ -371,7 +371,7 @@
371371
display: grid;
372372
gap: 40px;
373373
grid-template-columns: 1fr;
374-
@media (min-width: 974px) {
374+
@media (min-width: 996px) {
375375
grid-template-columns: repeat(3, 1fr);
376376
}
377377
.helpItem {
@@ -441,7 +441,7 @@
441441
max-width: 1272px;
442442
text-align: left;
443443
padding: 40px 16px;
444-
@media (min-width: 974px) {
444+
@media (min-width: 996px) {
445445
grid-template-columns: repeat(2, 1fr);
446446
padding: 80px 16px;
447447
}
@@ -469,7 +469,7 @@
469469
justify-content: left;
470470
align-items: center;
471471
gap: 24px;
472-
@media (min-width: 974px) {
472+
@media (min-width: 996px) {
473473
justify-content: center;
474474
}
475475
.link {

‎src/theme/Navbar/Content/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,8 @@ export default function NavbarContent(): ReactNode {
7272
<>
7373
{!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
7474
<NavbarLogo />
75-
<Link to={baseUrl} className="logo-link">/docs</Link>
75+
<span className={styles.separator}>/</span>
76+
<Link to={baseUrl} className="logo-link">docs</Link>
7677
</>
7778
}
7879
middle={

‎src/theme/Navbar/Content/styles.module.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,13 @@ Hide color mode toggle in small viewports
55
.colorModeToggle {
66
display: none;
77
}
8+
.separator {
9+
display: none;
10+
}
811
}
12+
13+
.separator {
14+
color: var(--border-color);
15+
font-size: 28px;
16+
margin-right: 4px;
17+
}

‎src/theme/SearchBar/index.tsx‎

Lines changed: 72 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
1-
import React, { useCallback, useMemo, useRef, useState, type ReactNode } from "react";
2-
import { createPortal } from "react-dom";
31
import { DocSearchButton, useDocSearchKeyboardEvents } from "@docsearch/react";
42
import Head from "@docusaurus/Head";
53
import Link from "@docusaurus/Link";
64
import { useHistory } from "@docusaurus/router";
75
import { isRegexpStringMatch, useSearchLinkCreator } from "@docusaurus/theme-common";
8-
import {
9-
useAlgoliaContextualFacetFilters,
10-
useSearchResultUrlProcessor,
11-
} from "@docusaurus/theme-search-algolia/client";
6+
import { useAlgoliaContextualFacetFilters, useSearchResultUrlProcessor } from "@docusaurus/theme-search-algolia/client";
127
import Translate from "@docusaurus/Translate";
138
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
149
import translations from "@theme/SearchTranslations";
10+
import React, { useCallback, useMemo, useRef, useState } from "react";
11+
import type { ReactNode } from "react";
12+
import { createPortal } from "react-dom";
13+
1514
import type {
1615
InternalDocSearchHit,
1716
DocSearchModal as DocSearchModalType,
@@ -53,7 +52,7 @@ const kapaStyles = `
5352
width: fit-content;
5453
border: none;
5554
background: transparent; font-size: 14px;
56-
color: var(--docsearch-highlight-color);
55+
color: var(--surface-brand-default);
5756
cursor: pointer;
5857
transition: all 0.2s ease;
5958
position: relative;
@@ -113,6 +112,28 @@ const kapaStyles = `
113112
}
114113
115114
/* Make sure the Kapa wrapper appears at the top of the dropdown */
115+
116+
.DocSearch-Modal:not(:has(.DocSearch-Dropdown)) .DocSearch-Footer {
117+
margin-top: 200px;
118+
position: relative;
119+
}
120+
.DocSearch-Modal:not(:has(.DocSearch-Dropdown)) .DocSearch-Footer::before {
121+
content: "No recent searches";
122+
position: absolute;
123+
top: -100px;
124+
color: var(--tertiary-font-color);
125+
left: 50%;
126+
transform: translateX(-50%);
127+
}
128+
.DocSearch-Modal {
129+
--docsearch-highlight-color: var(--surface-brand-default) !important;
130+
--docsearch-soft-primary-color: transparent !important;
131+
--docsearch-hit-highlight-color:rgba(0, 150, 136, 0.1) !important;
132+
background: var(--surface-primary);
133+
}
134+
.DocSearch-Hit-source {
135+
background: var(--surface-primary);
136+
}
116137
.DocSearch-Dropdown {
117138
display: flex;
118139
flex-direction: column;
@@ -127,6 +148,50 @@ const kapaStyles = `
127148
flex-direction: column;
128149
padding: 0 1rem 1rem;
129150
}
151+
.DocSearch-SearchBar {
152+
padding: var(--docsearch-spacing) var(--docsearch-spacing) 0;
153+
}
154+
.DocSearch-Button {
155+
align-items: center;
156+
background: var(--docsearch-searchbox-background);
157+
border: 0;
158+
border-radius: 40px;
159+
color: var(--tertiary-font-color);
160+
cursor: pointer;
161+
display: flex;
162+
font-weight: 500;
163+
height: 36px;
164+
justify-content: space-between;
165+
margin: 0 0 0 16px;
166+
padding: 0 8px;
167+
-webkit-user-select: none;
168+
user-select: none;
169+
}
170+
.DocSearch-Button:hover {
171+
background: var(--surface-primary);
172+
outline: 1px solid var(--border-color);
173+
}
174+
.DocSearch-Button kbd {
175+
background: var(--white-color);
176+
color: var(--gray-800);
177+
box-shadow: 0px 1px 1px rgba(47, 55, 71, 0.6), 0px 1px 4px rgba(47, 55, 71, 0.2);
178+
border-bottom: 1px solid rgba(47, 55, 71, 0.2);
179+
border-radius: 4px;
180+
padding: 0;
181+
vertical-align: baseline;
182+
font-size: 14px !important;
183+
font-family: "JetBrainsMono" !important;
184+
}
185+
.DocSearch-Form {
186+
border: 2px solid var(--surface-brand-default);
187+
border-radius: 4px;
188+
}
189+
.DocSearch-LoadingIndicator svg, .DocSearch-MagnifierLabel svg {
190+
color: var(--surface-brand-default);
191+
}
192+
.DocSearch-Hit-path {
193+
color: var(--tertiary-font-color);
194+
}
130195
`;
131196

132197
let DocSearchModal: typeof DocSearchModalType | null = null;

0 commit comments

Comments
 (0)