bottom-mobile-nav

1"use client"
2 
3import type React from "react"
4import { Heart, Home, Search, User } from "lucide-react"
5 
6import { BottomMobileNav } from "./components/bottom-mobile-nav"
7import { Sidebar } from "./components/sidebar"
8 
9// Layout Component Props Interface
10interface LayoutProps {
11  children: React.ReactNode
12  sidebarClassName?: string
13  bottomNavClassName?: string
14}
15 
16// Layout Component (moved from layout.tsx)
17function Layout({
18  children,
19  sidebarClassName,
20  bottomNavClassName,
21}: LayoutProps) {
22  const routes = [
23    {
24      href: "#",
25      label: "Home",
26      icon: Home,
27    },
28    {
29      href: "#search",
30      label: "Search",
31      icon: Search,
32    },
33    {
34      href: "#love",
35      label: "Love",
36      icon: Heart,
37    },
38    {
39      href: "#profile",
40      label: "Profile",
41      icon: User,
42    },
43  ]
44 
45  return (
46    <div className="min-h-screen">
47      {/* Desktop Sidebar */}
48      <Sidebar routes={routes} className={sidebarClassName} />
49 
50      {/* Main Content */}
51      <main className="pb-20 md:ml-20 md:pb-8">{children}</main>
52 
53      {/* Mobile Bottom Navigation */}
54      <BottomMobileNav
55        routes={routes}
56        labels={true}
57        className={bottomNavClassName}
58      />
59    </div>
60  )
61}
62 
63export default function BottomMobileNavPage() {
64  return (
65    <Layout>
66      <div className="mx-auto flex w-full max-w-lg flex-col gap-4 p-4">
67        <p>
68          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
69          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
70          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
71          aliquip ex ea commodo consequat.
72        </p>
73        <p>
74          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
75          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
76          proident, sunt in culpa qui officia deserunt mollit anim id est
77          laborum.
78        </p>
79        <p>
80          Sed ut perspiciatis unde omnis iste natus error sit voluptatem
81          accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
82          ab illo inventore veritatis et quasi architecto beatae vitae dicta
83          sunt explicabo.
84        </p>
85        <p>
86          Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
87          fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem
88          sequi nesciunt.
89        </p>
90        <p>
91// … truncated