Skip to content

Commit a629da7

Browse files
zahidalidevzahidalidev
authored
Fixed top banner overlap issue (#1204)
<!-- Explain the changes introduced in your PR --> ## Pull Request approval You will need to get your PR approved by at least one member of the Sourcegraph team. For reviews of docs formatting, styles, and component usage, please tag the docs team via the #docs Slack channel.
1 parent f9a53fb commit a629da7

File tree

2 files changed

+65
-75
lines changed

2 files changed

+65
-75
lines changed

‎src/components/Layout.tsx

Lines changed: 64 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { useEffect, useState } from 'react';
1212
import { LogoMark } from './LogoMark';
1313
import { Search } from './search/Search';
1414
import VersionSelector from './VersionSelector';
15+
import { TopBanner } from './TopBanner';
1516

1617
function GitHubIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
1718
return (
@@ -24,6 +25,10 @@ function GitHubIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
2425
function Header() {
2526
let [isScrolled, setIsScrolled] = useState(false);
2627

28+
const pathname = usePathname();
29+
const isCodyDocs = pathname.includes('/cody');
30+
const isopenCtxDocs = pathname.includes('/cody/capabilities/openctx');
31+
2732
useEffect(() => {
2833
function onScroll() {
2934
setIsScrolled(window.scrollY > 0);
@@ -37,87 +42,17 @@ function Header() {
3742

3843
return (
3944
<header
40-
className={clsx(
41-
'sticky top-0 z-50 flex flex-none flex-wrap items-center justify-between bg-light-bg px-4 py-6 shadow-md shadow-slate-900/5 transition duration-500 dark:border-dark-border dark:shadow-none sm:px-6 lg:border-b lg:border-light-border lg:px-8',
42-
isScrolled
43-
? 'dark:bg-dark-bg-1 dark:backdrop-blur dark:[@supports(backdrop-filter:blur(0))]:bg-dark-bg-1/80'
44-
: 'dark:bg-transparent'
45-
)}
45+
className="sticky top-0 z-50"
4646
>
47-
<div className="mx-auto flex w-full max-w-8xl items-center justify-between sm:px-2 lg:px-8">
48-
<div className="mr-6 flex lg:hidden">
49-
<MobileNavigation />
50-
</div>
51-
<div className="relative flex flex-grow basis-0 items-center">
52-
<Link
53-
href="/"
54-
aria-label="Home page"
55-
className="relative z-10 hidden md:block"
56-
>
57-
<Logo className="h-9 w-auto" />
58-
</Link>
59-
{/* <Link
60-
href="/"
61-
aria-label="Home page"
62-
className="relative z-10 md:block text-vermilion-08 hover:text-vermilion-07 ml-2"
63-
>
64-
Documentation
65-
</Link>
66-
<Link
67-
href="https://community.sourcegraph.com"
68-
aria-label="Home page"
69-
className="relative z-10 hidden md:block text-vermilion-08 hover:text-vermilion-07 ml-4"
70-
>
71-
Help
72-
</Link> */}
73-
<Link
74-
href="/"
75-
className="relative z-10 block md:hidden"
76-
aria-label="Home page"
77-
>
78-
<LogoMark className="h-6 w-6" />
79-
</Link>
80-
</div>
81-
<div className="-my-5 mr-6 sm:mr-8 md:mr-0">
82-
<Search />
83-
</div>
84-
<div className="relative flex basis-0 items-center justify-end gap-6 sm:gap-6 md:flex-grow">
85-
<VersionSelector />
86-
<ThemeSelector className="relative z-10" />
87-
<Link
88-
href="https://github.com/sourcegraph/docs"
89-
className="group"
90-
aria-label="GitHub"
91-
>
92-
<span className="flex h-7 w-7 items-center justify-center rounded-lg shadow-md shadow-black/5 ring-1 ring-light-border-2 dark:bg-dark-bg-2 dark:ring-inset dark:ring-dark-border">
93-
<GitHubIcon className="h-5 w-5 fill-slate-400 group-hover:fill-slate-500 dark:group-hover:fill-slate-300" />
94-
</span>
95-
</Link>
96-
</div>
97-
</div>
98-
</header>
99-
);
100-
}
101-
102-
export function Layout({ children }: { children: React.ReactNode }) {
103-
let pathname = usePathname();
104-
let isHomePage = pathname === '/';
105-
let isCodyDocs = pathname.includes('/cody');
106-
let isopenCtxDocs = pathname.includes('/cody/capabilities/openctx');
107-
108-
return (
109-
<div className="flex w-full flex-col">
110-
<Header />
111-
11247
{/* Cody docs banner */}
113-
{/*isCodyDocs && !isopenCtxDocs && <TopBanner
48+
{isCodyDocs && !isopenCtxDocs && <TopBanner
11449
text="NEW: Introducing chat and search in a single input with Sourcegraph 6.0."
11550
link="https://sourcegraph.com/blog/combining-chat-and-search"
11651
linkText="Read here"
11752
textColor="#ffffff"
11853
backgroundColor="#F34E3F"
11954
opacity='0.80'
120-
/>/*}
55+
/>}
12156

12257
{/* Openctx docs banner */}
12358
{/* {isopenCtxDocs && <TopBanner
@@ -126,7 +61,62 @@ export function Layout({ children }: { children: React.ReactNode }) {
12661
linkText="Read docs to learn more about configuring MCP."
12762
textColor="#ffffff"
12863
backgroundColor="#F34E3F"
129-
/>} */}
64+
/>} */}
65+
66+
<div className={clsx(
67+
'flex flex-none flex-wrap items-center justify-between bg-light-bg px-4 py-6 shadow-md shadow-slate-900/5 transition duration-500 dark:border-dark-border dark:shadow-none sm:px-6 lg:border-b lg:border-light-border lg:px-8',
68+
isScrolled
69+
? 'dark:bg-dark-bg-1 dark:backdrop-blur dark:[@supports(backdrop-filter:blur(0))]:bg-dark-bg-1/80'
70+
: 'dark:bg-transparent'
71+
)}>
72+
<div className="mx-auto flex w-full max-w-8xl items-center justify-between sm:px-2 lg:px-8">
73+
<div className="mr-6 flex lg:hidden">
74+
<MobileNavigation />
75+
</div>
76+
<div className="relative flex flex-grow basis-0 items-center">
77+
<Link
78+
href="/"
79+
aria-label="Home page"
80+
className="relative z-10 hidden md:block"
81+
>
82+
<Logo className="h-9 w-auto" />
83+
</Link>
84+
<Link
85+
href="/"
86+
className="relative z-10 block md:hidden"
87+
aria-label="Home page"
88+
>
89+
<LogoMark className="h-6 w-6" />
90+
</Link>
91+
</div>
92+
<div className="-my-5 mr-6 sm:mr-8 md:mr-0">
93+
<Search />
94+
</div>
95+
<div className="relative flex basis-0 items-center justify-end gap-6 sm:gap-6 md:flex-grow">
96+
<VersionSelector />
97+
<ThemeSelector className="relative z-10" />
98+
<Link
99+
href="https://github.com/sourcegraph/docs"
100+
className="group"
101+
aria-label="GitHub"
102+
>
103+
<span className="flex h-7 w-7 items-center justify-center rounded-lg shadow-md shadow-black/5 ring-1 ring-light-border-2 dark:bg-dark-bg-2 dark:ring-inset dark:ring-dark-border">
104+
<GitHubIcon className="h-5 w-5 fill-slate-400 group-hover:fill-slate-500 dark:group-hover:fill-slate-300" />
105+
</span>
106+
</Link>
107+
</div>
108+
</div>
109+
</div>
110+
</header>
111+
);
112+
}
113+
114+
export function Layout({ children }: { children: React.ReactNode }) {
115+
let pathname = usePathname();
116+
let isHomePage = pathname === '/';
117+
return (
118+
<div className="flex w-full flex-col">
119+
<Header />
130120

131121
{isHomePage && <Hero />}
132122
{/* {isHomePage && <DemoLayout />} */}

‎src/components/TopBanner.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export function TopBanner({
3636
return (
3737
<div
3838
style={{ backgroundColor: `rgba(${hexToRgb(backgroundColor)}, ${opacity})`, color: textColor }}
39-
className="fixed top-0 z-[100] min-h-[42px] w-full flex items-center justify-center px-4 py-2 md:py-0 md:h-[42px]"
39+
className="sticky top-0 z-[100] min-h-[42px] w-full flex items-center justify-center px-4 py-2 md:py-0 md:h-[42px]"
4040
>
4141
<div className="flex items-center gap-2 text-xs sm:text-sm max-w-[90%] md:max-w-none text-center">
4242
<span className="line-clamp-2 md:line-clamp-1">{text}</span>

0 commit comments

Comments
 (0)