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

16
src/app/Brands/layout.bk Normal file
View File

@@ -0,0 +1,16 @@
// export const metadata = {
// title: 'Ballistic Bu8ilder',
// description: 'Generated by Forward Group, LLC',
// }
// export default function RootLayout({
// children,
// }: {
// children: React.ReactNode
// }) {
// return (
// <html lang="en">
// <body>{children}</body>
// </html>
// )
// }

16
src/app/Brands/layout.tsx
View File

@@ -1,16 +0,0 @@
export const metadata = {
title: 'Ballistic Bu8ilder',
description: 'Generated by Forward Group, LLC',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}

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

@@ -14,7 +14,7 @@ import Link from "next/link";
const navigation = [ const navigation = [
{ name: "Armory", href: "/Armory", current: false }, { name: "Armory", href: "/Armory", current: false },
{ name: "Products", href: "/Products", 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 }, { 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="relative flex h-16 items-center justify-between">
<div className="absolute inset-y-0 left-0 flex items-center sm:hidden"> <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
{/* Mobile menu button*/} {/* 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="absolute -inset-0.5" />
<span className="sr-only">Open main menu</span> <span className="sr-only">Open main menu</span>
<Bars3Icon <Bars3Icon
@@ -40,13 +40,14 @@ export default function Navbar() {
aria-hidden="true" aria-hidden="true"
className="hidden size-6 group-data-[open]:block" className="hidden size-6 group-data-[open]:block"
/> />
</DisclosureButton> </DisclosureButton> */}
</div> </div>
<div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start"> <div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
<div className="flex shrink-0 items-center"> <div className="flex shrink-0 items-center">
<Link href={"/"}><p>Ballistics Builder</p></Link> <Link href={"/"}><p>Ballistics Builder</p></Link>
</div> </div>
<div className="hidden sm:ml-6 sm:block">
{/* <div className="hidden sm:ml-6 sm:block">
<div className="flex space-x-4"> <div className="flex space-x-4">
{navigation.map((item) => ( {navigation.map((item) => (
<a <a
@@ -64,17 +65,9 @@ export default function Navbar() {
</a> </a>
))} ))}
</div> </div>
</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"> <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 */} {/* Profile dropdown */}
<Menu as="div" className="relative ml-3"> <Menu as="div" className="relative ml-3">
@@ -82,6 +75,7 @@ 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"> <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="absolute -inset-1.5" />
<span className="sr-only">Open user menu</span> <span className="sr-only">Open user menu</span>
Menu
{/* <Image {/* <Image
alt="" 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" 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"

200
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 { import {
Dialog, Dialog,
DialogBackdrop, DialogBackdrop,
@@ -14,72 +14,76 @@ import {
TabList, TabList,
TabPanel, TabPanel,
TabPanels, TabPanels,
} from '@headlessui/react' } from "@headlessui/react";
import { Bars3Icon, MagnifyingGlassIcon, ShoppingBagIcon, XMarkIcon } from '@heroicons/react/24/outline' import {
Bars3Icon,
MagnifyingGlassIcon,
ShoppingBagIcon,
XMarkIcon,
} from "@heroicons/react/24/outline";
const navigation = { const navigation = {
categories: [ categories: [
{ {
id: 'armory', id: "armory",
name: 'Armory', name: "Armory",
featured: [ featured: [
{ {
name: 'Build Alpha', name: "Build Alpha",
href: '#', 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', imageSrc:
imageAlt: 'Rad AR15.', "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', name: "Build Beta",
href: '#', 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', imageSrc:
imageAlt: 'Rad AR15.', "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: [ sections: [
{ {
id: 'lower-parts', id: "lower-parts",
name: 'Lower Parts', name: "Lower Parts",
items: [ items: [
{ name: 'Lower Receivers', href: '/Products/lowers' }, { name: "Lower Receivers", href: "/Products/lowers" },
{ name: 'Grips', href: '/Products/grips' }, { name: "Grips", href: "/Products/grips" },
{ name: 'Stocks', href: '/Products/stocks' }, { name: "Stocks", href: "/Products/stocks" },
{ name: 'Triggers', href: '/Products/triggers' }, { name: "Triggers", href: "/Products/triggers" },
{ name: 'Parts', href: '/Products/parts' }, { name: "Parts", href: "/Products/parts" },
], ],
}, },
{ {
id: 'upper-parts', id: "upper-parts",
name: 'Upper Parks', name: "Upper Parts",
items: [ items: [
{ name: 'Upper Receiver', href: '/Products/uppers' }, { name: "Upper Receiver", href: "/Products/uppers" },
{ name: 'Barrels', href: '/Products/barrels' }, { name: "Barrels", href: "/Products/barrels" },
{ name: 'Handguards', href: '/Products/handguards' }, { name: "Handguards", href: "/Products/handguards" },
{ name: 'Muzzle Devices', href: '/Products/muzzle-devices' }, { name: "Muzzle Devices", href: "/Products/muzzle-devices" },
], ],
}, },
{ {
id: 'brands', id: "brands",
name: 'Brands', name: "Brands",
items: [ items: [
{ name: 'Full Nelson', href: '#' }, { name: "Full Nelson", href: "#" },
{ name: 'My Way', href: '#' }, { name: "My Way", href: "#" },
{ name: 'Re-Arranged', href: '#' }, { name: "Re-Arranged", href: "#" },
{ name: 'Counterfeit', href: '#' }, { name: "Counterfeit", href: "#" },
{ name: 'Significant Other', href: '#' }, { name: "Significant Other", href: "#" },
], ],
}, },
], ],
}, },
], ],
pages: [ pages: [{ name: "Brands", href: "/Brands" }],
{ name: 'Menu 2', href: '#' }, };
],
}
export default function PopNav() { export default function PopNav() {
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false);
return ( return (
<div className="bg-white"> <div className="bg-white">
@@ -123,7 +127,10 @@ export default function PopNav() {
</div> </div>
<TabPanels as={Fragment}> <TabPanels as={Fragment}>
{navigation.categories.map((category) => ( {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"> <div className="grid grid-cols-2 gap-x-4">
{category.featured.map((item) => ( {category.featured.map((item) => (
<div key={item.name} className="group relative text-sm"> <div key={item.name} className="group relative text-sm">
@@ -132,8 +139,14 @@ export default function PopNav() {
src={item.imageSrc} src={item.imageSrc}
className="aspect-square w-full rounded-lg bg-gray-100 object-cover group-hover:opacity-75" 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"> <a
<span aria-hidden="true" className="absolute inset-0 z-10" /> href={item.href}
className="mt-6 block font-medium text-gray-900"
>
<span
aria-hidden="true"
className="absolute inset-0 z-10"
/>
{item.name} {item.name}
</a> </a>
<p aria-hidden="true" className="mt-1"> <p aria-hidden="true" className="mt-1">
@@ -144,7 +157,10 @@ export default function PopNav() {
</div> </div>
{category.sections.map((section) => ( {category.sections.map((section) => (
<div key={section.name}> <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} {section.name}
</p> </p>
<ul <ul
@@ -154,7 +170,10 @@ export default function PopNav() {
> >
{section.items.map((item) => ( {section.items.map((item) => (
<li key={item.name} className="flow-root"> <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} {item.name}
</a> </a>
</li> </li>
@@ -170,7 +189,10 @@ export default function PopNav() {
<div className="space-y-6 border-t border-gray-200 px-4 py-6"> <div className="space-y-6 border-t border-gray-200 px-4 py-6">
{navigation.pages.map((page) => ( {navigation.pages.map((page) => (
<div key={page.name} className="flow-root"> <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} {page.name}
</a> </a>
</div> </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="space-y-6 border-t border-gray-200 px-4 py-6">
<div className="flow-root"> <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 Sign in
</a> </a>
</div> </div>
<div className="flow-root"> <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 Create account
</a> </a>
</div> </div>
@@ -197,7 +225,9 @@ export default function PopNav() {
src="https://tailwindui.com/plus/img/flags/flag-canada.svg" src="https://tailwindui.com/plus/img/flags/flag-canada.svg"
className="block h-auto w-5 shrink-0" 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> <span className="sr-only">, change currency</span>
</a> </a>
</div> </div>
@@ -210,7 +240,10 @@ export default function PopNav() {
Get free delivery on orders over $100 Get free delivery on orders over $100
</p> */} </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="border-b border-gray-200">
<div className="flex h-16 items-center"> <div className="flex h-16 items-center">
<button <button
@@ -251,21 +284,33 @@ 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" 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 */} {/* 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="relative bg-white">
<div className="mx-auto max-w-7xl px-8"> <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="grid grid-cols-2 gap-x-8 gap-y-10 py-16">
<div className="col-start-2 grid grid-cols-2 gap-x-8"> <div className="col-start-2 grid grid-cols-2 gap-x-8">
{category.featured.map((item) => ( {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 <img
alt={item.imageAlt} alt={item.imageAlt}
src={item.imageSrc} src={item.imageSrc}
className="aspect-square w-full rounded-lg bg-gray-100 object-cover group-hover:opacity-75" 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"> <a
<span aria-hidden="true" className="absolute inset-0 z-10" /> href={item.href}
className="mt-6 block font-medium text-gray-900"
>
<span
aria-hidden="true"
className="absolute inset-0 z-10"
/>
{item.name} {item.name}
</a> </a>
<p aria-hidden="true" className="mt-1"> <p aria-hidden="true" className="mt-1">
@@ -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"> <div className="row-start-1 grid grid-cols-3 gap-x-8 gap-y-10 text-sm">
{category.sections.map((section) => ( {category.sections.map((section) => (
<div key={section.name}> <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} {section.name}
</p> </p>
<ul <ul
@@ -287,7 +335,10 @@ export default function PopNav() {
> >
{section.items.map((item) => ( {section.items.map((item) => (
<li key={item.name} className="flex"> <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} {item.name}
</a> </a>
</li> </li>
@@ -317,44 +368,23 @@ export default function PopNav() {
<div className="ml-auto flex items-center"> <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"> <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"> <a
Sign in href="#"
className="text-sm font-medium text-gray-700 hover:text-gray-800"
>
Sign In
</a> </a>
<span aria-hidden="true" className="h-6 w-px bg-gray-200" /> <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> </div>
{/* Search */} {/* Search */}
<div className="flex lg:ml-6"> <div className="flex lg:ml-6">
<a href="#" className="p-2 text-gray-400 hover:text-gray-500"> <a href="#" className="p-2 text-gray-400 hover:text-gray-500">
<span className="sr-only">Search</span> <span className="sr-only">Search</span>
<MagnifyingGlassIcon aria-hidden="true" className="size-6" /> <MagnifyingGlassIcon
</a>
</div>
{/* Cart */}
<div className="ml-4 flow-root lg:ml-6">
<a href="#" className="group -m-2 flex items-center p-2">
<ShoppingBagIcon
aria-hidden="true" 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> </a>
</div> </div>
</div> </div>
@@ -363,5 +393,5 @@ export default function PopNav() {
</nav> </nav>
</header> </header>
</div> </div>
) );
} }