Skip to content

Commit

Permalink
Add navigation menu component
Browse files Browse the repository at this point in the history
  • Loading branch information
MuttakinHasib committed Jan 17, 2024
1 parent 52df31f commit e7ca58e
Show file tree
Hide file tree
Showing 9 changed files with 216 additions and 32 deletions.
1 change: 0 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
.nx
### Linux ###
*~

# temporary files which can be created if a process still has a handle open of a deleted file
.fuse_hidden*

Expand Down
4 changes: 2 additions & 2 deletions apps/api/src/modules/categories/categories.controller.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import { Role, Permission } from '@app/common';
export class CategoriesController {
constructor(private readonly categoriesService: CategoriesService) {}

@ApiOperation({ summary: 'Create category' })
@ApiOperation({ summary: 'Create category', operationId: 'Create' })
@ApiCreatedResponse({ description: 'Category created successfully' })
@UseGuards(AuthenticatedGuard)
@Permission(Role.CUSTOMER)
Expand All @@ -35,7 +35,7 @@ export class CategoriesController {
return await this.categoriesService.create(createCategoryDto);
}

@ApiOperation({ summary: 'Get all categories' })
@ApiOperation({ summary: 'Get all categories', operationId: 'Get All' })
@ApiOkResponse({ description: 'Categories retrieved successfully' })
@Get()
async findAll() {
Expand Down
6 changes: 6 additions & 0 deletions apps/api/src/modules/products/products.controller.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,17 @@ import {
import { ProductsService } from './products.service';
import { CreateProductDto } from './dto/create-product.dto';
import { UpdateProductDto } from './dto/update-product.dto';
import { ApiCreatedResponse, ApiOperation, ApiTags } from '@nestjs/swagger';

@ApiTags('Product')
@Controller('products')
export class ProductsController {
constructor(private readonly productsService: ProductsService) {}

@ApiOperation({ summary: 'Create a new product', operationId: 'Create' })
@ApiCreatedResponse({
description: 'The record has been successfully created.',
})
@Post()
create(@Body() createProductDto: CreateProductDto) {
return this.productsService.create(createProductDto);
Expand Down
1 change: 1 addition & 0 deletions apps/web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-navigation-menu": "^1.1.4",
"@radix-ui/react-popover": "^1.0.7",
"@radix-ui/react-select": "^2.0.0",
"@radix-ui/react-separator": "^1.0.3",
Expand Down
57 changes: 41 additions & 16 deletions apps/web/src/components/header/navigation.tsx
Original file line number Diff line number Diff line change
@@ -1,35 +1,60 @@
import { Bars3Icon } from '@heroicons/react/24/outline';
import { ChevronDownIcon } from '@radix-ui/react-icons';
import Link from 'next/link';
import { Bars3Icon } from "@heroicons/react/24/outline";
import Link from "next/link";
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
} from "..";

export const NAVIGATION = [
{
label: 'Home',
path: '/',
label: "Home",
path: "/",
},
{
label: 'Shop',
path: '/shop',
label: "Shop",
path: "/shop",
},
{
label: 'Blog',
path: '/blog',
label: "Blog",
path: "/blog",
},
{
label: 'FAQ',
path: '/faq',
label: "FAQ",
path: "/faq",
},
];

export const Navigation = () => {
return (
<nav className="container py-2 flex justify-between items-center">
<div className="flex items-center divide-x gap-x-2">
<button className="flex items-center gap-2 py-2 px-3 transition duration-300 hover:bg-brand hover:text-white">
<Bars3Icon className="w-6 h-6" />
<span className="font-medium">Shop By Category</span>
<ChevronDownIcon className="w-6 h-6 ml-3" />
</button>
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger className="flex items-center gap-2 py-2 px-3 rounded-none text-base font-medium">
<Bars3Icon className="w-6 h-6" /> Shop By Category
</NavigationMenuTrigger>
<NavigationMenuContent>
<ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
<Link href="/docs" title="Introduction">
Re-usable components built using Radix UI and Tailwind CSS.
</Link>
<Link href="/docs/installation" title="Installation">
How to install dependencies and structure your app.
</Link>
<Link href="/docs/primitives/typography" title="Typography">
Styles for headings, paragraphs, lists...etc
</Link>
</ul>
</NavigationMenuContent>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>

<div className="flex items-center gap-2 pl-2 font-medium">
{NAVIGATION.map((nav) => (
<Link
Expand Down
1 change: 1 addition & 0 deletions apps/web/src/components/ui/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,4 @@ export * from "./separator";
export * from "./badge";
export * from "./checkbox";
export * from "./select";
export * from "./navigation-menu";
131 changes: 131 additions & 0 deletions apps/web/src/components/ui/navigation-menu.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
"use client";

import * as React from "react";
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
import { cva } from "class-variance-authority";
import { ChevronDownIcon } from "@radix-ui/react-icons";

import { cn } from "@/utils";

const NavigationMenu = React.forwardRef<
React.ElementRef<typeof NavigationMenuPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
>(({ className, children, ...props }, ref) => (
<NavigationMenuPrimitive.Root
ref={ref}
className={cn(
"relative z-10 flex max-w-max flex-1 items-center justify-center",
className
)}
{...props}
>
{children}
<NavigationMenuViewport />
</NavigationMenuPrimitive.Root>
));
NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;

const NavigationMenuList = React.forwardRef<
React.ElementRef<typeof NavigationMenuPrimitive.List>,
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
>(({ className, ...props }, ref) => (
<NavigationMenuPrimitive.List
ref={ref}
className={cn(
"group flex flex-1 list-none items-center justify-center space-x-1",
className
)}
{...props}
/>
));
NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;

const NavigationMenuItem = NavigationMenuPrimitive.Item;

const navigationMenuTriggerStyle = cva(
"group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-brand data-[active]:text-white data-[state=open]:bg-brand data-[state=open]:text-white"
);

const NavigationMenuTrigger = React.forwardRef<
React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
<NavigationMenuPrimitive.Trigger
ref={ref}
className={cn(navigationMenuTriggerStyle(), "group", className)}
{...props}
>
{children}
<ChevronDownIcon
aria-hidden="true"
className="w-6 h-6 ml-3 transition duration-200 group-data-[state=open]:rotate-180"
/>
{/* <ChevronDown className="relative top-[1px] ml-1 h-3 w-3 " /> */}
</NavigationMenuPrimitive.Trigger>
));
NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;

const NavigationMenuContent = React.forwardRef<
React.ElementRef<typeof NavigationMenuPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
>(({ className, ...props }, ref) => (
<NavigationMenuPrimitive.Content
ref={ref}
className={cn(
"left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
className
)}
{...props}
/>
));
NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;

const NavigationMenuLink = NavigationMenuPrimitive.Link;

const NavigationMenuViewport = React.forwardRef<
React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
>(({ className, ...props }, ref) => (
<div className={cn("absolute left-0 top-full flex justify-center")}>
<NavigationMenuPrimitive.Viewport
className={cn(
"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
className
)}
ref={ref}
{...props}
/>
</div>
));
NavigationMenuViewport.displayName =
NavigationMenuPrimitive.Viewport.displayName;

const NavigationMenuIndicator = React.forwardRef<
React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
>(({ className, ...props }, ref) => (
<NavigationMenuPrimitive.Indicator
ref={ref}
className={cn(
"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
className
)}
{...props}
>
<div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
</NavigationMenuPrimitive.Indicator>
));
NavigationMenuIndicator.displayName =
NavigationMenuPrimitive.Indicator.displayName;

export {
navigationMenuTriggerStyle,
NavigationMenu,
NavigationMenuList,
NavigationMenuItem,
NavigationMenuContent,
NavigationMenuTrigger,
NavigationMenuLink,
NavigationMenuIndicator,
NavigationMenuViewport,
};
21 changes: 21 additions & 0 deletions apps/web/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -627,6 +627,27 @@
aria-hidden "^1.1.1"
react-remove-scroll "2.5.5"

"@radix-ui/react-navigation-menu@^1.1.4":
version "1.1.4"
resolved "https://registry.yarnpkg.com/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.1.4.tgz#654151310c3f9a29afd19fb60ddc7977e54b8a3d"
integrity sha512-Cc+seCS3PmWmjI51ufGG7zp1cAAIRqHVw7C9LOA2TZ+R4hG6rDvHcTqIsEEFLmZO3zNVH72jOOE7kKNy8W+RtA==
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/primitive" "1.0.1"
"@radix-ui/react-collection" "1.0.3"
"@radix-ui/react-compose-refs" "1.0.1"
"@radix-ui/react-context" "1.0.1"
"@radix-ui/react-direction" "1.0.1"
"@radix-ui/react-dismissable-layer" "1.0.5"
"@radix-ui/react-id" "1.0.1"
"@radix-ui/react-presence" "1.0.1"
"@radix-ui/react-primitive" "1.0.3"
"@radix-ui/react-use-callback-ref" "1.0.1"
"@radix-ui/react-use-controllable-state" "1.0.1"
"@radix-ui/react-use-layout-effect" "1.0.1"
"@radix-ui/react-use-previous" "1.0.1"
"@radix-ui/react-visually-hidden" "1.0.3"

"@radix-ui/react-popover@^1.0.7":
version "1.0.7"
resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-1.0.7.tgz#23eb7e3327330cb75ec7b4092d685398c1654e3c"
Expand Down
26 changes: 13 additions & 13 deletions docker-compose.yml
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@ services:
build:
context: apps/web
dockerfile: Dockerfile
target: runner
# command: yarn dev
target: builder
command: yarn dev
env_file: apps/web/.env.local
image: web
# volumes:
# - ./apps/web:/app
volumes:
- ./apps/web:/app

ports:
- "3000:3000"
Expand All @@ -20,12 +20,12 @@ services:
build:
context: apps/admin
dockerfile: Dockerfile
target: runner
# command: yarn dev
target: builder
command: yarn dev
env_file: apps/admin/.env.local
image: admin
# volumes:
# - ./apps/admin:/app
volumes:
- ./apps/admin:/app
ports:
- 4000:3000
depends_on:
Expand All @@ -35,13 +35,13 @@ services:
build:
context: apps/api
dockerfile: Dockerfile
target: runner
# command: yarn dev
target: builder
command: yarn dev
env_file: apps/api/.env
image: api
# volumes:
# - ./apps/api:/app
# - /app/node_modules
volumes:
- ./apps/api:/app
# - /app/node_modules
ports:
- "3333:3333"
depends_on:
Expand Down

1 comment on commit e7ca58e

@vercel
Copy link

@vercel vercel bot commented on e7ca58e Jan 17, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.