生产管理系统前端-上边栏搭建与侧边栏搭建
This commit is contained in:
17
crop-x/src/components/layouts/Main.tsx
Normal file
17
crop-x/src/components/layouts/Main.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
import React from 'react'
|
||||
import { useTheme } from '@/hooks/useTheme'
|
||||
import {Navbar1} from '@/components/layouts/Navbar.tsx'
|
||||
import Page from './SideBar/SideBar'
|
||||
import './index.css'
|
||||
function Main() {
|
||||
return (
|
||||
<div className = "parent-flex">
|
||||
<Navbar1></Navbar1>
|
||||
<div>
|
||||
<Page></Page>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Main
|
||||
299
crop-x/src/components/layouts/Navbar.tsx
Normal file
299
crop-x/src/components/layouts/Navbar.tsx
Normal file
@@ -0,0 +1,299 @@
|
||||
import { Book, Menu, Sunset, Trees, Zap } from "lucide-react";
|
||||
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "@/components/ui/accordion";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
NavigationMenu,
|
||||
NavigationMenuContent,
|
||||
NavigationMenuItem,
|
||||
NavigationMenuLink,
|
||||
NavigationMenuList,
|
||||
NavigationMenuTrigger,
|
||||
} from "@/components/ui/navigation-menu";
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
SheetTrigger,
|
||||
} from "@/components/ui/sheet";
|
||||
|
||||
interface MenuItem {
|
||||
title: string;
|
||||
url: string;
|
||||
description?: string;
|
||||
icon?: React.ReactNode;
|
||||
items?: MenuItem[];
|
||||
}
|
||||
|
||||
interface Navbar1Props {
|
||||
logo?: {
|
||||
url: string;
|
||||
src: string;
|
||||
alt: string;
|
||||
title: string;
|
||||
};
|
||||
menu?: MenuItem[];
|
||||
auth?: {
|
||||
login: {
|
||||
title: string;
|
||||
url: string;
|
||||
};
|
||||
signup: {
|
||||
title: string;
|
||||
url: string;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
const Navbar1 = ({
|
||||
logo = {
|
||||
url: "https://www.shadcnblocks.com",
|
||||
src: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/logos/shadcnblockscom-icon.svg",
|
||||
alt: "logo",
|
||||
title: "Shadcnblocks.com",
|
||||
},
|
||||
menu = [
|
||||
{ title: "Home", url: "#" },
|
||||
{
|
||||
title: "Products",
|
||||
url: "#",
|
||||
items: [
|
||||
{
|
||||
title: "Blog",
|
||||
description: "The latest industry news, updates, and info",
|
||||
icon: <Book className="size-5 shrink-0" />,
|
||||
url: "#",
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
description: "Our mission is to innovate and empower the world",
|
||||
icon: <Trees className="size-5 shrink-0" />,
|
||||
url: "#",
|
||||
},
|
||||
{
|
||||
title: "Careers",
|
||||
description: "Browse job listing and discover our workspace",
|
||||
icon: <Sunset className="size-5 shrink-0" />,
|
||||
url: "#",
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
description:
|
||||
"Get in touch with our support team or visit our community forums",
|
||||
icon: <Zap className="size-5 shrink-0" />,
|
||||
url: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
url: "#",
|
||||
items: [
|
||||
{
|
||||
title: "Help Center",
|
||||
description: "Get all the answers you need right here",
|
||||
icon: <Zap className="size-5 shrink-0" />,
|
||||
url: "#",
|
||||
},
|
||||
{
|
||||
title: "Contact Us",
|
||||
description: "We are here to help you with any questions you have",
|
||||
icon: <Sunset className="size-5 shrink-0" />,
|
||||
url: "#",
|
||||
},
|
||||
{
|
||||
title: "Status",
|
||||
description: "Check the current status of our services and APIs",
|
||||
icon: <Trees className="size-5 shrink-0" />,
|
||||
url: "#",
|
||||
},
|
||||
{
|
||||
title: "Terms of Service",
|
||||
description: "Our terms and conditions for using our services",
|
||||
icon: <Book className="size-5 shrink-0" />,
|
||||
url: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Pricing",
|
||||
url: "#",
|
||||
},
|
||||
{
|
||||
title: "Blog",
|
||||
url: "#",
|
||||
},
|
||||
],
|
||||
auth = {
|
||||
login: { title: "Login", url: "#" },
|
||||
signup: { title: "Sign up", url: "#" },
|
||||
},
|
||||
}: Navbar1Props) => {
|
||||
return (
|
||||
<section className="py-4">
|
||||
<div className="container">
|
||||
{/* Desktop Menu */}
|
||||
<nav className="hidden justify-between lg:flex">
|
||||
<div className="flex items-center gap-6">
|
||||
{/* Logo */}
|
||||
<a href={logo.url} className="flex items-center gap-2">
|
||||
<img
|
||||
src={logo.src}
|
||||
className="max-h-8 dark:invert"
|
||||
alt={logo.alt}
|
||||
/>
|
||||
<span className="text-lg font-semibold tracking-tighter">
|
||||
{logo.title}
|
||||
</span>
|
||||
</a>
|
||||
<div className="flex items-center">
|
||||
<NavigationMenu>
|
||||
<NavigationMenuList>
|
||||
{menu.map((item) => renderMenuItem(item))}
|
||||
</NavigationMenuList>
|
||||
</NavigationMenu>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<a href={auth.login.url}>{auth.login.title}</a>
|
||||
</Button>
|
||||
<Button asChild size="sm">
|
||||
<a href={auth.signup.url}>{auth.signup.title}</a>
|
||||
</Button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
<div className="block lg:hidden">
|
||||
<div className="flex items-center justify-between">
|
||||
{/* Logo */}
|
||||
<a href={logo.url} className="flex items-center gap-2">
|
||||
<img
|
||||
src={logo.src}
|
||||
className="max-h-8 dark:invert"
|
||||
alt={logo.alt}
|
||||
/>
|
||||
</a>
|
||||
<Sheet>
|
||||
<SheetTrigger asChild>
|
||||
<Button variant="outline" size="icon">
|
||||
<Menu className="size-4" />
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent className="overflow-y-auto">
|
||||
<SheetHeader>
|
||||
<SheetTitle>
|
||||
<a href={logo.url} className="flex items-center gap-2">
|
||||
<img
|
||||
src={logo.src}
|
||||
className="max-h-8 dark:invert"
|
||||
alt={logo.alt}
|
||||
/>
|
||||
</a>
|
||||
</SheetTitle>
|
||||
</SheetHeader>
|
||||
<div className="flex flex-col gap-6 p-4">
|
||||
<Accordion
|
||||
type="single"
|
||||
collapsible
|
||||
className="flex w-full flex-col gap-4"
|
||||
>
|
||||
{menu.map((item) => renderMobileMenuItem(item))}
|
||||
</Accordion>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
<Button asChild variant="outline">
|
||||
<a href={auth.login.url}>{auth.login.title}</a>
|
||||
</Button>
|
||||
<Button asChild>
|
||||
<a href={auth.signup.url}>{auth.signup.title}</a>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
const renderMenuItem = (item: MenuItem) => {
|
||||
if (item.items) {
|
||||
return (
|
||||
<NavigationMenuItem key={item.title}>
|
||||
<NavigationMenuTrigger>{item.title}</NavigationMenuTrigger>
|
||||
<NavigationMenuContent className="bg-popover text-popover-foreground">
|
||||
{item.items.map((subItem) => (
|
||||
<NavigationMenuLink asChild key={subItem.title} className="w-80">
|
||||
<SubMenuLink item={subItem} />
|
||||
</NavigationMenuLink>
|
||||
))}
|
||||
</NavigationMenuContent>
|
||||
</NavigationMenuItem>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<NavigationMenuItem key={item.title}>
|
||||
<NavigationMenuLink
|
||||
href={item.url}
|
||||
className="bg-background hover:bg-muted hover:text-accent-foreground group inline-flex h-10 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors"
|
||||
>
|
||||
{item.title}
|
||||
</NavigationMenuLink>
|
||||
</NavigationMenuItem>
|
||||
);
|
||||
};
|
||||
|
||||
const renderMobileMenuItem = (item: MenuItem) => {
|
||||
if (item.items) {
|
||||
return (
|
||||
<AccordionItem key={item.title} value={item.title} className="border-b-0">
|
||||
<AccordionTrigger className="text-md py-0 font-semibold hover:no-underline">
|
||||
{item.title}
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="mt-2">
|
||||
{item.items.map((subItem) => (
|
||||
<SubMenuLink key={subItem.title} item={subItem} />
|
||||
))}
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<a key={item.title} href={item.url} className="text-md font-semibold">
|
||||
{item.title}
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
||||
const SubMenuLink = ({ item }: { item: MenuItem }) => {
|
||||
return (
|
||||
<a
|
||||
className="hover:bg-muted hover:text-accent-foreground flex min-w-80 select-none flex-row gap-4 rounded-md p-3 leading-none no-underline outline-none transition-colors"
|
||||
href={item.url}
|
||||
>
|
||||
<div className="text-foreground">{item.icon}</div>
|
||||
<div>
|
||||
<div className="text-sm font-semibold">{item.title}</div>
|
||||
{item.description && (
|
||||
<p className="text-muted-foreground text-sm leading-snug">
|
||||
{item.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
||||
export {Navbar1} ;
|
||||
50
crop-x/src/components/layouts/SideBar/SideBar.tsx
Normal file
50
crop-x/src/components/layouts/SideBar/SideBar.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import { AppSidebar } from "@/components/app-sidebar"
|
||||
import {
|
||||
Breadcrumb,
|
||||
BreadcrumbItem,
|
||||
BreadcrumbLink,
|
||||
BreadcrumbList,
|
||||
BreadcrumbPage,
|
||||
BreadcrumbSeparator,
|
||||
} from "@/components/ui/breadcrumb"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import {
|
||||
SidebarInset,
|
||||
SidebarProvider,
|
||||
SidebarTrigger,
|
||||
} from "@/components/ui/sidebar"
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<SidebarProvider>
|
||||
<AppSidebar />
|
||||
<SidebarInset>
|
||||
<header className="flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4">
|
||||
<SidebarTrigger className="-ml-1" />
|
||||
<Separator orientation="vertical" className="mr-2 h-4" />
|
||||
<Breadcrumb>
|
||||
<BreadcrumbList>
|
||||
<BreadcrumbItem className="hidden md:block">
|
||||
<BreadcrumbLink href="#">
|
||||
Building Your Application
|
||||
</BreadcrumbLink>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbSeparator className="hidden md:block" />
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbPage>Data Fetching</BreadcrumbPage>
|
||||
</BreadcrumbItem>
|
||||
</BreadcrumbList>
|
||||
</Breadcrumb>
|
||||
</header>
|
||||
<div className="flex flex-1 flex-col gap-4 p-4">
|
||||
{Array.from({ length: 24 }).map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="aspect-video h-12 w-full rounded-lg bg-muted/50"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</SidebarInset>
|
||||
</SidebarProvider>
|
||||
)
|
||||
}
|
||||
6
crop-x/src/components/layouts/index.css
Normal file
6
crop-x/src/components/layouts/index.css
Normal file
@@ -0,0 +1,6 @@
|
||||
.parent-flex {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem; /* 控制子元素间距 */
|
||||
width: 100%; /* 默认宽度 */
|
||||
}
|
||||
Reference in New Issue
Block a user