[TOOL-5083] Portal: Fix header on mobile viewport (#7661)
This commit is contained in:
Manan Tank
@@ -8,7 +8,7 @@ import {
|
||||
TableOfContentsIcon,
|
||||
} from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { DocSearch } from "@/components/others/DocSearch";
|
||||
import { Button } from "@/components/ui/button";
|
||||
@@ -191,13 +191,12 @@ const supportLinks = [
|
||||
|
||||
export function Header() {
|
||||
const [showBurgerMenu, setShowBurgerMenu] = useState(false);
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<header className="flex w-full flex-col gap-2 border-b bg-background pt-4 px-4 lg:px-8 overflow-hidden">
|
||||
<header className="flex w-full flex-col gap-2 border-b bg-background pt-4 px-4 pb-4 xl:pb-0 lg:px-8 overflow-hidden">
|
||||
{/* Top row */}
|
||||
<div className="container flex items-center justify-between gap-6">
|
||||
{/* Top row */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Link
|
||||
aria-label="thirdweb Docs"
|
||||
@@ -219,7 +218,7 @@ export function Header() {
|
||||
href="https://github.com/thirdweb-dev"
|
||||
target="_blank"
|
||||
>
|
||||
<GithubIcon className="mx-3 size-6" />
|
||||
<GithubIcon className="size-6 lg:size-5" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@@ -232,25 +231,21 @@ export function Header() {
|
||||
</div>
|
||||
|
||||
<div className="hidden xl:block">
|
||||
<Button
|
||||
onClick={() => {
|
||||
router.push("/chat");
|
||||
}}
|
||||
>
|
||||
<MessageCircleIcon className="mr-2 size-4" />
|
||||
Ask AI
|
||||
<Button asChild>
|
||||
<Link href="/chat">
|
||||
<MessageCircleIcon className="mr-2 size-4" />
|
||||
Ask AI
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1 xl:hidden">
|
||||
<ThemeSwitcher className="border-none bg-transparent" />
|
||||
<DocSearch variant="icon" />
|
||||
<Button
|
||||
className="p-2"
|
||||
onClick={() => router.push("/chat")}
|
||||
variant="ghost"
|
||||
>
|
||||
<MessageCircleIcon className="size-7" />
|
||||
<Button className="p-2" asChild variant="ghost">
|
||||
<Link href="/chat">
|
||||
<MessageCircleIcon className="size-6" />
|
||||
</Link>
|
||||
</Button>
|
||||
<Button
|
||||
className="p-2"
|
||||
@@ -264,13 +259,13 @@ export function Header() {
|
||||
</div>
|
||||
|
||||
{/* Bottom row - hidden on mobile */}
|
||||
<div className="container hidden items-center justify-between gap-6 xl:flex">
|
||||
<div className="container hidden items-center justify-between gap-6 xl:flex mt-1">
|
||||
<nav className="flex grow gap-5">
|
||||
<ul className="flex flex-row items-center gap-5">
|
||||
<ul className="flex flex-row items-center gap-0 mb-1">
|
||||
{links.map((link) => {
|
||||
return (
|
||||
<li
|
||||
className="flex items-center py-4 relative overflow-hidden"
|
||||
className="flex items-center py-2 relative px-2.5 rounded-lg hover:bg-accent hover:text-foreground"
|
||||
key={link.href}
|
||||
onClick={() => {
|
||||
setShowBurgerMenu(false);
|
||||
@@ -281,7 +276,7 @@ export function Header() {
|
||||
>
|
||||
<NavLink href={link.href} name={link.name} />
|
||||
{pathname.includes(link.href) && (
|
||||
<div className="bg-violet-700 h-1 inset-x-0.5 rounded-full absolute -bottom-0.5" />
|
||||
<div className="bg-violet-700 h-[2px] inset-x-0 rounded-full absolute -bottom-1" />
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import clsx from "clsx";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { PageFooter } from "../Document/PageFooter";
|
||||
import {
|
||||
DocSidebar,
|
||||
@@ -25,17 +25,18 @@ type DocLayoutProps = {
|
||||
export function DocLayout(props: DocLayoutProps) {
|
||||
return (
|
||||
<div
|
||||
className={`container text-muted-foreground relative flex flex-col gap-12 xl:grid p-4 ${
|
||||
className={cn(
|
||||
"container text-muted-foreground relative flex flex-col gap-12 xl:grid",
|
||||
props.showTableOfContents !== false
|
||||
? "xl:grid-cols-[220px_720px_1fr]"
|
||||
: "xl:grid-cols-[220px_1160px]"
|
||||
}`}
|
||||
: "xl:grid-cols-[220px_1160px]",
|
||||
)}
|
||||
style={{
|
||||
minHeight: "calc(100vh - var(--sticky-top-height))",
|
||||
}}
|
||||
>
|
||||
<aside
|
||||
className={clsx(
|
||||
className={cn(
|
||||
"sticky top-sticky-top-height h-sidebar-height flex-col overflow-y-hidden",
|
||||
"hidden xl:flex",
|
||||
)}
|
||||
|
||||
@@ -354,11 +354,11 @@ export function DocSearch(props: { variant: "icon" | "search" }) {
|
||||
{forDesktop && (
|
||||
<DialogTrigger asChild>
|
||||
<Button
|
||||
className="flex w-64 justify-between gap-6 px-3 text-muted-foreground"
|
||||
className="flex w-64 justify-between gap-6 px-3 text-muted-foreground bg-card"
|
||||
variant="outline"
|
||||
>
|
||||
Search Docs
|
||||
<div className="flex items-center gap-1 rounded-sm border bg-background px-2 py-1 text-muted-foreground text-xs">
|
||||
<span className="text-xs">Search Docs</span>
|
||||
<div className="flex items-center gap-1 rounded-sm px-1 py-1 text-muted-foreground text-xs">
|
||||
<CommandIcon className="size-3" />K
|
||||
</div>
|
||||
</Button>
|
||||
|
||||
+2
-2
@@ -16,7 +16,7 @@ coverage:
|
||||
- "**/__generated__/**"
|
||||
- "**/contract/deployment/zksync/**"
|
||||
- "*/thirdweb/src/contract/deployment/zksync/zkDeployContract.ts"
|
||||
|
||||
|
||||
|
||||
github_checks:
|
||||
annotations: true
|
||||
@@ -30,5 +30,5 @@ comment:
|
||||
require_changes: false # if true: only post the comment if coverage changes
|
||||
require_base: false # [yes :: must have a base report to post]
|
||||
require_head: true # [yes :: must have a head report to post]
|
||||
show_carryforward_flags: true
|
||||
show_carryforward_flags: true
|
||||
hide_comment_details: true #collapse all the "detailed info" for the PR comment
|
||||
Reference in New Issue
Block a user