Make Navbar Fixed at the top of the page

This commit is contained in:
DhruvBavadiya 2024-07-03 11:42:54 +05:30
parent 651f984e52
commit 2706a79ccc
4 changed files with 8 additions and 6 deletions

View file

@ -22,7 +22,7 @@ export default async function DashboardLayout({
return (
<div className="flex min-h-screen flex-col space-y-6">
<header className="sticky top-0 z-40 border-b bg-background">
<header className="container z-50 bg-background sticky top-0">
<div className="container flex h-16 items-center justify-between py-4">
<MainNav items={dashboardConfig.mainNav} />
<UserAccountNav

View file

@ -15,8 +15,8 @@ interface DocsLayoutProps {
export default function DocsLayout({ children }: DocsLayoutProps) {
return (
<div className="flex min-h-screen flex-col">
<header className="sticky top-0 z-40 w-full border-b bg-background">
<div className="container flex h-16 items-center space-x-4 sm:justify-between sm:space-x-0">
<header className="container z-50 bg-background sticky top-0">
<div className="container flex h-16 items-center space-x-4 sm:justify-between sm:space-x-0">
<MainNav items={docsConfig.mainNav}>
<DocsSidebarNav items={docsConfig.sidebarNav} />
</MainNav>

View file

@ -15,8 +15,8 @@ export default async function MarketingLayout({
}: MarketingLayoutProps) {
return (
<div className="flex min-h-screen flex-col">
<header className="container z-40 bg-background">
<div className="flex h-20 items-center justify-between py-6">
<header className="container z-50 bg-background sticky top-0">
<div className="flex h-20 items-center justify-between py-6">
<MainNav items={marketingConfig.mainNav} />
<nav>
<Link

View file

@ -4,6 +4,7 @@ import { env } from "@/env.mjs"
import { siteConfig } from "@/config/site"
import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"
import { Icons } from "@/components/icons"
async function getGitHubStars(): Promise<string | null> {
try {
@ -41,10 +42,11 @@ export default async function IndexPage() {
<div className="container flex max-w-[64rem] flex-col items-center gap-4 text-center">
<Link
href={siteConfig.links.twitter}
className="rounded-2xl bg-muted px-4 py-1.5 text-sm font-medium"
className="rounded-2xl bg-muted px-4 gap-1 py-1.5 text-sm flex justify-center items-center font-medium"
target="_blank"
>
Follow along on Twitter
<Icons.twitter className="mx-auto h-4 w-4" />
</Link>
<h1 className="font-heading text-3xl sm:text-5xl md:text-6xl lg:text-7xl">
An example app built using Next.js 13 server components.