Forward/ballistic-builder
3
0
Fork 0
mirror of https://gitea.gofwd.group/dstrawsb/ballistic-builder.git synced 2025-12-06 02:36:44 -05:00
Code Issues Packages Projects Releases Wiki Activity

cleaning menu up

Browse Source
This commit is contained in:
Sean S
2024-12-12 20:38:08 -05:00
parent e247810ab5
commit 63138c2e69
4 changed files with 140 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/Navbar/index.tsx
View File

@@ -14,7 +14,7 @@ import Link from "next/link";
const navigation = [
{ name: "Armory", href: "/Armory", current: false },
{ name: "Products", href: "/Products", current: false },
{ name: "Db Data", href: "/Products/lowers", current: false },
{ name: "Lowers", href: "/Products/lowers", current: false },
{ name: "Brands", href: "/Brands", current: false },
];
@@ -29,7 +29,7 @@ export default function Navbar() {
<div className="relative flex h-16 items-center justify-between">
<div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
{/* Mobile menu button*/}
<DisclosureButton className="group relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
{/* <DisclosureButton className="group relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
<span className="absolute -inset-0.5" />
<span className="sr-only">Open main menu</span>
<Bars3Icon
@@ -40,13 +40,14 @@ export default function Navbar() {
aria-hidden="true"
className="hidden size-6 group-data-[open]:block"
/>
</DisclosureButton>
</DisclosureButton> */}
</div>
<div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
<div className="flex shrink-0 items-center">
<Link href={"/"}><p>Ballistics Builder</p></Link>
</div>
<div className="hidden sm:ml-6 sm:block">
{/* <div className="hidden sm:ml-6 sm:block">
<div className="flex space-x-4">
{navigation.map((item) => (
<a
@@ -64,17 +65,9 @@ export default function Navbar() {
</a>
))}
</div>
</div>
</div> */}
</div>
<div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
<button
type="button"
className="relative rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
>
<span className="absolute -inset-1.5" />
<span className="sr-only">View notifications</span>
<BellIcon aria-hidden="true" className="size-6" />
</button>
{/* Profile dropdown */}
<Menu as="div" className="relative ml-3">
@@ -82,7 +75,8 @@ export default function Navbar() {
<MenuButton className="relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
<span className="absolute -inset-1.5" />
<span className="sr-only">Open user menu</span>
{/* <Image
Menu
{/* <Image
alt=""
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
className="size-8 rounded-full"

202
src/components/PopNav/page.tsx
View File

@@ -1,6 +1,6 @@
'use client'
"use client";
import { Fragment, useState } from 'react'
import { Fragment, useState } from "react";
import {
Dialog,
DialogBackdrop,
@@ -14,72 +14,76 @@ import {
TabList,
TabPanel,
TabPanels,
} from '@headlessui/react'
import { Bars3Icon, MagnifyingGlassIcon, ShoppingBagIcon, XMarkIcon } from '@heroicons/react/24/outline'
} from "@headlessui/react";
import {
Bars3Icon,
MagnifyingGlassIcon,
ShoppingBagIcon,
XMarkIcon,
} from "@heroicons/react/24/outline";
const navigation = {
categories: [
{
id: 'armory',
name: 'Armory',
id: "armory",
name: "Armory",
featured: [
{
name: 'Build Alpha',
href: '#',
imageSrc: 'https://images.unsplash.com/photo-1700774607099-8c4631ee9764?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
imageAlt: 'Rad AR15.',
name: "Build Alpha",
href: "#",
imageSrc:
"https://images.unsplash.com/photo-1700774607099-8c4631ee9764?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
imageAlt: "Rad AR15.",
},
{
name: 'Build Beta',
href: '#',
imageSrc: 'https://images.unsplash.com/photo-1669489890884-baff10f74b49?q=80&w=2899&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
imageAlt: 'Rad AR15.',
name: "Build Beta",
href: "#",
imageSrc:
"https://images.unsplash.com/photo-1669489890884-baff10f74b49?q=80&w=2899&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
imageAlt: "Rad AR15.",
},
],
sections: [
{
id: 'lower-parts',
name: 'Lower Parts',
id: "lower-parts",
name: "Lower Parts",
items: [
{ name: 'Lower Receivers', href: '/Products/lowers' },
{ name: 'Grips', href: '/Products/grips' },
{ name: 'Stocks', href: '/Products/stocks' },
{ name: 'Triggers', href: '/Products/triggers' },
{ name: 'Parts', href: '/Products/parts' },
{ name: "Lower Receivers", href: "/Products/lowers" },
{ name: "Grips", href: "/Products/grips" },
{ name: "Stocks", href: "/Products/stocks" },
{ name: "Triggers", href: "/Products/triggers" },
{ name: "Parts", href: "/Products/parts" },
],
},
{
id: 'upper-parts',
name: 'Upper Parks',
id: "upper-parts",
name: "Upper Parts",
items: [
{ name: 'Upper Receiver', href: '/Products/uppers' },
{ name: 'Barrels', href: '/Products/barrels' },
{ name: 'Handguards', href: '/Products/handguards' },
{ name: 'Muzzle Devices', href: '/Products/muzzle-devices' },
{ name: "Upper Receiver", href: "/Products/uppers" },
{ name: "Barrels", href: "/Products/barrels" },
{ name: "Handguards", href: "/Products/handguards" },
{ name: "Muzzle Devices", href: "/Products/muzzle-devices" },
],
},
{
id: 'brands',
name: 'Brands',
id: "brands",
name: "Brands",
items: [
{ name: 'Full Nelson', href: '#' },
{ name: 'My Way', href: '#' },
{ name: 'Re-Arranged', href: '#' },
{ name: 'Counterfeit', href: '#' },
{ name: 'Significant Other', href: '#' },
{ name: "Full Nelson", href: "#" },
{ name: "My Way", href: "#" },
{ name: "Re-Arranged", href: "#" },
{ name: "Counterfeit", href: "#" },
{ name: "Significant Other", href: "#" },
],
},
],
},
],
pages: [
{ name: 'Menu 2', href: '#' },
],
}
pages: [{ name: "Brands", href: "/Brands" }],
};
export default function PopNav() {
const [open, setOpen] = useState(false)
const [open, setOpen] = useState(false);
return (
<div className="bg-white">
@@ -123,7 +127,10 @@ export default function PopNav() {
</div>
<TabPanels as={Fragment}>
{navigation.categories.map((category) => (
<TabPanel key={category.name} className="space-y-10 px-4 pb-8 pt-10">
<TabPanel
key={category.name}
className="space-y-10 px-4 pb-8 pt-10"
>
<div className="grid grid-cols-2 gap-x-4">
{category.featured.map((item) => (
<div key={item.name} className="group relative text-sm">
@@ -132,8 +139,14 @@ export default function PopNav() {
src={item.imageSrc}
className="aspect-square w-full rounded-lg bg-gray-100 object-cover group-hover:opacity-75"
/>
<a href={item.href} className="mt-6 block font-medium text-gray-900">
<span aria-hidden="true" className="absolute inset-0 z-10" />
<a
href={item.href}
className="mt-6 block font-medium text-gray-900"
>
<span
aria-hidden="true"
className="absolute inset-0 z-10"
/>
{item.name}
</a>
<p aria-hidden="true" className="mt-1">
@@ -144,7 +157,10 @@ export default function PopNav() {
</div>
{category.sections.map((section) => (
<div key={section.name}>
<p id={`${category.id}-${section.id}-heading-mobile`} className="font-medium text-gray-900">
<p
id={`${category.id}-${section.id}-heading-mobile`}
className="font-medium text-gray-900"
>
{section.name}
</p>
<ul
@@ -154,7 +170,10 @@ export default function PopNav() {
>
{section.items.map((item) => (
<li key={item.name} className="flow-root">
<a href={item.href} className="-m-2 block p-2 text-gray-500">
<a
href={item.href}
className="-m-2 block p-2 text-gray-500"
>
{item.name}
</a>
</li>
@@ -170,7 +189,10 @@ export default function PopNav() {
<div className="space-y-6 border-t border-gray-200 px-4 py-6">
{navigation.pages.map((page) => (
<div key={page.name} className="flow-root">
<a href={page.href} className="-m-2 block p-2 font-medium text-gray-900">
<a
href={page.href}
className="-m-2 block p-2 font-medium text-gray-900"
>
{page.name}
</a>
</div>
@@ -179,12 +201,18 @@ export default function PopNav() {
<div className="space-y-6 border-t border-gray-200 px-4 py-6">
<div className="flow-root">
<a href="#" className="-m-2 block p-2 font-medium text-gray-900">
<a
href="#"
className="-m-2 block p-2 font-medium text-gray-900"
>
Sign in
</a>
</div>
<div className="flow-root">
<a href="#" className="-m-2 block p-2 font-medium text-gray-900">
<a
href="#"
className="-m-2 block p-2 font-medium text-gray-900"
>
Create account
</a>
</div>
@@ -197,7 +225,9 @@ export default function PopNav() {
src="https://tailwindui.com/plus/img/flags/flag-canada.svg"
className="block h-auto w-5 shrink-0"
/>
<span className="ml-3 block text-base font-medium text-gray-900">CAD</span>
<span className="ml-3 block text-base font-medium text-gray-900">
CAD
</span>
<span className="sr-only">, change currency</span>
</a>
</div>
@@ -210,7 +240,10 @@ export default function PopNav() {
Get free delivery on orders over $100
</p> */}
<nav aria-label="Top" className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<nav
aria-label="Top"
className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"
>
<div className="border-b border-gray-200">
<div className="flex h-16 items-center">
<button
@@ -251,25 +284,37 @@ export default function PopNav() {
className="absolute inset-x-0 top-full text-sm text-gray-500 transition data-[closed]:opacity-0 data-[enter]:duration-200 data-[leave]:duration-150 data-[enter]:ease-out data-[leave]:ease-in"
>
{/* Presentational element used to render the bottom shadow, if we put the shadow on the actual panel it pokes out the top, so we use this shorter element to hide the top of the shadow */}
<div aria-hidden="true" className="absolute inset-0 top-1/2 bg-white shadow" />
<div
aria-hidden="true"
className="absolute inset-0 top-1/2 bg-white shadow"
/>
<div className="relative bg-white">
<div className="mx-auto max-w-7xl px-8">
<div className="grid grid-cols-2 gap-x-8 gap-y-10 py-16">
<div className="col-start-2 grid grid-cols-2 gap-x-8">
{category.featured.map((item) => (
<div key={item.name} className="group relative text-base sm:text-sm">
<div
key={item.name}
className="group relative text-base sm:text-sm"
>
<img
alt={item.imageAlt}
src={item.imageSrc}
className="aspect-square w-full rounded-lg bg-gray-100 object-cover group-hover:opacity-75"
/>
<a href={item.href} className="mt-6 block font-medium text-gray-900">
<span aria-hidden="true" className="absolute inset-0 z-10" />
<a
href={item.href}
className="mt-6 block font-medium text-gray-900"
>
<span
aria-hidden="true"
className="absolute inset-0 z-10"
/>
{item.name}
</a>
<p aria-hidden="true" className="mt-1">
See Build
See Build
</p>
</div>
))}
@@ -277,7 +322,10 @@ export default function PopNav() {
<div className="row-start-1 grid grid-cols-3 gap-x-8 gap-y-10 text-sm">
{category.sections.map((section) => (
<div key={section.name}>
<p id={`${section.name}-heading`} className="font-medium text-gray-900">
<p
id={`${section.name}-heading`}
className="font-medium text-gray-900"
>
{section.name}
</p>
<ul
@@ -287,7 +335,10 @@ export default function PopNav() {
>
{section.items.map((item) => (
<li key={item.name} className="flex">
<a href={item.href} className="hover:text-gray-800">
<a
href={item.href}
className="hover:text-gray-800"
>
{item.name}
</a>
</li>
@@ -317,44 +368,23 @@ export default function PopNav() {
<div className="ml-auto flex items-center">
<div className="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:space-x-6">
<a href="#" className="text-sm font-medium text-gray-700 hover:text-gray-800">
Sign in
<a
href="#"
className="text-sm font-medium text-gray-700 hover:text-gray-800"
>
Sign In
</a>
<span aria-hidden="true" className="h-6 w-px bg-gray-200" />
<a href="#" className="text-sm font-medium text-gray-700 hover:text-gray-800">
Create account
</a>
</div>
<div className="hidden lg:ml-8 lg:flex">
<a href="#" className="flex items-center text-gray-700 hover:text-gray-800">
<img
alt=""
src="https://tailwindui.com/plus/img/flags/flag-canada.svg"
className="block h-auto w-5 shrink-0"
/>
<span className="ml-3 block text-sm font-medium">CAD</span>
<span className="sr-only">, change currency</span>
</a>
</div>
{/* Search */}
<div className="flex lg:ml-6">
<a href="#" className="p-2 text-gray-400 hover:text-gray-500">
<span className="sr-only">Search</span>
<MagnifyingGlassIcon aria-hidden="true" className="size-6" />
</a>
</div>
{/* Cart */}
<div className="ml-4 flow-root lg:ml-6">
<a href="#" className="group -m-2 flex items-center p-2">
<ShoppingBagIcon
<MagnifyingGlassIcon
aria-hidden="true"
className="size-6 shrink-0 text-gray-400 group-hover:text-gray-500"
className="size-6"
/>
<span className="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">0</span>
<span className="sr-only">items in cart, view bag</span>
</a>
</div>
</div>
@@ -363,5 +393,5 @@ export default function PopNav() {
</nav>
</header>
</div>
)
);
}