Skip to content

Commit

Permalink
feat: add product features in topnav (#665)
Browse files Browse the repository at this point in the history
* feat: add features in topnav

* fix: fix build fail

---------

Co-authored-by: Ankit Anand <83692067+ankit01-oss@users.noreply.github.com>
  • Loading branch information
harshbutfairx and ankit01-oss authored Aug 21, 2024
1 parent 83acab8 commit 612cb22
Show file tree
Hide file tree
Showing 7 changed files with 269 additions and 8 deletions.
220 changes: 212 additions & 8 deletions components/TopNav/TopNav.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,15 @@ import { Button, Dialog, Popover } from '@headlessui/react'
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
import Image from 'next/image'
import Link from 'next/link'
import { ArrowBigLeft, ArrowRight, MoveLeft } from 'lucide-react'
import { ArrowBigLeft, ArrowDown, ArrowRight, ChevronDown, MoveLeft } from 'lucide-react'
import SearchButton from '../SearchButton'
import GitHubStars from '../GithubStars/GithubStars'
import React from 'react'
import DocsSidebar from '../DocsSidebar/DocsSidebar'
import { usePathname } from 'next/navigation'
import Banner from '../Banner/Banner'
import Tabs from '../../app/resource-center/Shared/Tabs'
import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, } from "@nextui-org/react";

enum TABS {
BLOG = 'blog-tab',
Expand Down Expand Up @@ -92,6 +93,106 @@ export default function TopNav() {
<span className="text-[17.111px] font-medium">SigNoz</span>
</Link>
<Popover.Group className="hidden items-center gap-x-6 lg:flex">
<Dropdown>
<DropdownTrigger>
<Button
className="truncate px-1.5 py-1 text-sm font-normal hover:text-signoz_robin-500"
>
<div className='flex items-center'>

Products
<ChevronDown size={12} className='ml-1' />
</div>
</Button>
</DropdownTrigger>
<DropdownMenu aria-label="Static Actions">
<DropdownItem
key="apm"
href='/application-performance-monitoring/'
startContent={<Image
src="/img/index_features/bar-chart-2_feature.svg"
alt="Bar Chart Icon"
width={20}
height={20}
className='mr-4'
/>}
description="Monitor your applications"
>
APM
</DropdownItem>
<DropdownItem
key="LogManagement"
href='/log-management/'
startContent={<Image
src="/img/index_features/logs_feature.svg"
alt="Logs Icon"
width={20}
height={20}
className='mr-4'
/>}
description="Unlock insights from logs"
>
Log Management
</DropdownItem>
<DropdownItem
key="DistributedTracing"
href='/distributed-tracing/'
startContent={<Image
src="/img/index_features/drafting-compass_feature.svg"
alt="Drafting Compass Icon"
width={20}
height={20}
className='mr-4'
/>}
description="Track requests across services"
>
Distributed Tracing
</DropdownItem>
<DropdownItem
key="MetricsDashboards"
href='/metrics-and-dashboards/'
startContent={<Image
src="/img/index_features/layout-grid_feature.svg"
alt="Drafting Compass Icon"
width={20}
height={20}
className='mr-4'
/>}
description="Monitor metrics & build dashboards"
>
Metrics & Dashboards
</DropdownItem>
<DropdownItem
key="Alerts"
href='/alerts-management/'
startContent={<Image
src="/img/index_features/concierge-bell_feature.svg"
alt="Drafting Compass Icon"
width={20}
height={20}
className='mr-4'
/>}
description="Stay aware with alerts"
>
Alerts
</DropdownItem>
<DropdownItem
key="Exceptions"
href='/exceptions-monitoring/'
startContent={<Image
src="/img/index_features/bug_feature.svg"
alt="Drafting Compass Icon"
width={20}
height={20}
className='mr-4'
/>}
description="Record exceptions automatically"
>
Exceptions
</DropdownItem>
</DropdownMenu>
</Dropdown>

<Link
href="/docs"
className={`truncate px-1.5 py-1 text-sm font-normal hover:text-signoz_robin-500`}
Expand Down Expand Up @@ -141,14 +242,14 @@ export default function TopNav() {
<SearchButton />
<GitHubStars />

<Button
id="btn-get-started-website-navbar"
className="start-free-trial-btn h-8 pr-3 pl-4 px-4 py-2 rounded-full text-sm flex items-center justify-center gap-1.5 not-italic truncate text-center font-medium leading-5 text-white no-underline outline-none hover:text-white mx-2"
>
<Link href="/teams" className="flex-center">
<Button
id="btn-get-started-website-navbar"
className="start-free-trial-btn h-8 pr-3 pl-4 px-4 py-2 rounded-full text-sm flex items-center justify-center gap-1.5 not-italic truncate text-center font-medium leading-5 text-white no-underline outline-none hover:text-white mx-2"
>
<Link href="/teams" className="flex-center">
Try SigNoz Cloud <ArrowRight size={14} />
</Link>
</Button>
</Link>
</Button>
</div>
</nav>
<Dialog as="div" className="lg:hidden" open={mobileMenuOpen} onClose={setMobileMenuOpen}>
Expand All @@ -163,6 +264,109 @@ export default function TopNav() {
<div className="-my-6 divide-y divide-gray-500/10">
{showMainMenu && (
<div className="space-y-2 py-6">
<Dropdown onClick={() => setMobileMenuOpen(false)}>
<DropdownTrigger>
<Button
className="truncate px-1.5 py-1 text-sm font-normal hover:text-signoz_robin-500"
>
<div className='flex items-center -mx-4 block rounded-lg px-3 py-2 text-base font-semibold leading-7 hover:bg-signoz_ink-200'>

Products
<ChevronDown size={12} className='ml-1' />
</div>
</Button>
</DropdownTrigger>
<DropdownMenu aria-label="Static Actions">
<DropdownItem
key="apm"
href='/application-performance-monitoring/'
startContent={<Image
src="/img/index_features/bar-chart-2_feature.svg"
alt="Bar Chart Icon"
width={20}
height={20}
className='mr-4'
/>}
description="Monitor your applications"
>
APM
</DropdownItem>
<DropdownItem
key="LogManagement"
href='/log-management/'
startContent={<Image
src="/img/index_features/logs_feature.svg"
alt="Logs Icon"
width={20}
height={20}
className='mr-4'
/>}
description="Unlock insights from logs"
>
Log Management
</DropdownItem>
<DropdownItem
key="DistributedTracing"
href='/distributed-tracing/'
startContent={<Image
src="/img/index_features/drafting-compass_feature.svg"
alt="Drafting Compass Icon"
width={20}
height={20}
className='mr-4'
/>}
description="Track requests across services"
>
Distributed Tracing
</DropdownItem>
<DropdownItem
key="MetricsDashboards"
href='/metrics-and-dashboards/'
startContent={<Image
src="/img/index_features/layout-grid_feature.svg"
alt="Drafting Compass Icon"
width={20}
height={20}
className='mr-4'
/>}
description="Monitor metrics & build dashboards"
>
Metrics & Dashboards
</DropdownItem>
<DropdownItem
key="Alerts"
href='/alerts-management/'
startContent={<Image
src="/img/index_features/concierge-bell_feature.svg"
alt="Drafting Compass Icon"
width={20}
height={20}
className='mr-4'
/>}
description="Stay aware with alerts"
>
Alerts
</DropdownItem>
<DropdownItem
key="Exceptions"
href='/exceptions-monitoring/'
startContent={<Image
src="/img/index_features/bug_feature.svg"
alt="Drafting Compass Icon"
width={20}
height={20}
className='mr-4'
/>}
description="Record exceptions automatically"
>
Exceptions
</DropdownItem>
{/* <DropdownItem key="delete" className="text-danger" color="danger">
Delete file
</DropdownItem> */}
</DropdownMenu>
</Dropdown>

<Link
href="/docs"
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 hover:bg-signoz_ink-200"
Expand Down
7 changes: 7 additions & 0 deletions public/img/index_features/bar-chart-2_feature.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 15 additions & 0 deletions public/img/index_features/bug_feature.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions public/img/index_features/concierge-bell_feature.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions public/img/index_features/drafting-compass_feature.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions public/img/index_features/layout-grid_feature.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions public/img/index_features/logs_feature.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 612cb22

Please sign in to comment.