-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
admin page side bar and layout added
- Loading branch information
Showing
11 changed files
with
395 additions
and
48 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| 'use client' | ||
| import React from "react"; | ||
| import SideBar from "@/components/SideBar"; | ||
| import { usePathname } from "next/navigation"; | ||
|
|
||
| const AdminLayoutWrapper = ({ children }: { children: React.ReactNode }) => { | ||
| const pathname = usePathname(); | ||
| return ( | ||
| <div className="flex"> | ||
| {!pathname.includes("/signin") && <SideBar />} | ||
| <main className="flex-1">{children}</main> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default AdminLayoutWrapper; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,30 @@ | ||
| 'use server' | ||
| import React from 'react' | ||
|
|
||
| const page = () => { | ||
| return ( | ||
| <div>page</div> | ||
| ) | ||
| } | ||
| const Dashboard = () => { | ||
| return ( | ||
| <div className="flex flex-1"> | ||
| <div className="p-2 md:p-10 rounded-tl-2xl border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 flex flex-col gap-2 flex-1 w-full h-full"> | ||
| <div className="flex gap-2"> | ||
| {[...new Array(4)].map((i) => ( | ||
| <div | ||
| key={"first-array" + i} | ||
| className="h-20 w-full rounded-lg bg-gray-100 dark:bg-neutral-800 animate-pulse" | ||
| ></div> | ||
| ))} | ||
| </div> | ||
| <div className="flex gap-2 flex-1"> | ||
| {[...new Array(2)].map((i) => ( | ||
| <div | ||
| key={"second-array" + i} | ||
| className="h-full w-full rounded-lg bg-gray-100 dark:bg-neutral-800 animate-pulse" | ||
| ></div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
|
|
||
| export default page | ||
| export default Dashboard |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| "use client"; | ||
| import React, { useState } from "react"; | ||
| import { Sidebar, SidebarBody, SidebarLink } from "@/components/ui/sidebar"; | ||
| import Link from "next/link"; | ||
| import Image from "next/image"; | ||
| import { AdminSideBarLinks } from "@/constants"; | ||
|
|
||
| const SideBar= () =>{ | ||
| const [open, setOpen] = useState(true); | ||
|
|
||
| return ( | ||
| <div className="flex h-screen"> | ||
| <Sidebar open={open} setOpen={setOpen} animate> | ||
| <SidebarBody className="justify-between gap-10 h-full"> | ||
| <div className="flex flex-col flex-1 overflow-y-auto overflow-x-hidden"> | ||
| <Logo /> | ||
| <div className="mt-8 flex flex-col gap-2"> | ||
| {AdminSideBarLinks.map((link, idx) => ( | ||
| <SidebarLink key={idx} link={link} /> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <SidebarLink | ||
| link={{ | ||
| label: "Manu Arora", | ||
| href: "#", | ||
| icon: ( | ||
| <Image | ||
| src="/assets/images/admin.png" | ||
| className="h-7 w-7 flex-shrink-0 rounded-full" | ||
| width={50} | ||
| height={50} | ||
| alt="Avatar" | ||
| /> | ||
| ), | ||
| }} | ||
| /> | ||
| </div> | ||
| </SidebarBody> | ||
| </Sidebar> | ||
|
|
||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export const Logo = () => { | ||
| return ( | ||
| <Link href="#" className="flex items-center space-x-2 py-2"> | ||
| <Image | ||
| src={'/assets/icons/logo-icon.svg'} | ||
| alt="Logo" | ||
| width={30} | ||
| height={30} | ||
| /> | ||
| <span className="font-medium text-black dark:text-white">AVM Ayurveda</span> | ||
| </Link> | ||
| ); | ||
| }; | ||
|
|
||
| export default SideBar |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,189 @@ | ||
| "use client"; | ||
| import { cn } from "@/lib/utils"; | ||
| import Link, { LinkProps } from "next/link"; | ||
| import React, { useState, createContext, useContext } from "react"; | ||
| import { AnimatePresence, motion } from "framer-motion"; | ||
| import { IconMenu2, IconX } from "@tabler/icons-react"; | ||
|
|
||
| interface Links { | ||
| label: string; | ||
| href: string; | ||
| icon: React.JSX.Element | React.ReactNode; | ||
| } | ||
|
|
||
| interface SidebarContextProps { | ||
| open: boolean; | ||
| setOpen: React.Dispatch<React.SetStateAction<boolean>>; | ||
| animate: boolean; | ||
| } | ||
|
|
||
| const SidebarContext = createContext<SidebarContextProps | undefined>( | ||
| undefined | ||
| ); | ||
|
|
||
| export const useSidebar = () => { | ||
| const context = useContext(SidebarContext); | ||
| if (!context) { | ||
| throw new Error("useSidebar must be used within a SidebarProvider"); | ||
| } | ||
| return context; | ||
| }; | ||
|
|
||
| export const SidebarProvider = ({ | ||
| children, | ||
| open: openProp, | ||
| setOpen: setOpenProp, | ||
| animate = true, | ||
| }: { | ||
| children: React.ReactNode; | ||
| open?: boolean; | ||
| setOpen?: React.Dispatch<React.SetStateAction<boolean>>; | ||
| animate?: boolean; | ||
| }) => { | ||
| const [openState, setOpenState] = useState(false); | ||
| const open = openProp !== undefined ? openProp : openState; | ||
| const setOpen = setOpenProp !== undefined ? setOpenProp : setOpenState; | ||
|
|
||
| return ( | ||
| <SidebarContext.Provider value={{ open, setOpen, animate }}> | ||
| {children} | ||
| </SidebarContext.Provider> | ||
| ); | ||
| }; | ||
|
|
||
| export const Sidebar = ({ | ||
| children, | ||
| open, | ||
| setOpen, | ||
| animate, | ||
| }: { | ||
| children: React.ReactNode; | ||
| open?: boolean; | ||
| setOpen?: React.Dispatch<React.SetStateAction<boolean>>; | ||
| animate?: boolean; | ||
| }) => { | ||
| return ( | ||
| <SidebarProvider open={open} setOpen={setOpen} animate={animate}> | ||
| {children} | ||
| </SidebarProvider> | ||
| ); | ||
| }; | ||
|
|
||
| export const SidebarBody = (props: React.ComponentProps<typeof motion.div>) => { | ||
| return ( | ||
| <> | ||
| <DesktopSidebar {...props} /> | ||
| <MobileSidebar {...(props as React.ComponentProps<"div">)} /> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export const DesktopSidebar = ({ | ||
| className, | ||
| children, | ||
| ...props | ||
| }: React.ComponentProps<typeof motion.div>) => { | ||
| const { open, setOpen, animate } = useSidebar(); | ||
| return ( | ||
| <> | ||
| <motion.div | ||
| className={cn( | ||
| "h-full px-4 py-4 hidden md:flex md:flex-col bg-neutral-100 dark:bg-neutral-800 w-[300px] flex-shrink-0", | ||
| className | ||
| )} | ||
| animate={{ | ||
| width: animate ? (open ? "300px" : "60px") : "300px", | ||
| }} | ||
| onMouseEnter={() => setOpen(true)} | ||
| onMouseLeave={() => setOpen(false)} | ||
| {...props} | ||
| > | ||
| {children} | ||
| </motion.div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export const MobileSidebar = ({ | ||
| className, | ||
| children, | ||
| ...props | ||
| }: React.ComponentProps<"div">) => { | ||
| const { open, setOpen } = useSidebar(); | ||
| return ( | ||
| <> | ||
| <div | ||
| className={cn( | ||
| "h-10 px-4 py-4 flex flex-row md:hidden items-center justify-between bg-neutral-100 dark:bg-neutral-800 w-full" | ||
| )} | ||
| {...props} | ||
| > | ||
| <div className="flex justify-end z-20 w-full"> | ||
| <IconMenu2 | ||
| className="text-neutral-800 dark:text-neutral-200" | ||
| onClick={() => setOpen(!open)} | ||
| /> | ||
| </div> | ||
| <AnimatePresence> | ||
| {open && ( | ||
| <motion.div | ||
| initial={{ x: "-100%", opacity: 0 }} | ||
| animate={{ x: 0, opacity: 1 }} | ||
| exit={{ x: "-100%", opacity: 0 }} | ||
| transition={{ | ||
| duration: 0.3, | ||
| ease: "easeInOut", | ||
| }} | ||
| className={cn( | ||
| "fixed h-full w-full inset-0 bg-white dark:bg-neutral-900 p-10 z-[100] flex flex-col justify-between", | ||
| className | ||
| )} | ||
| > | ||
| <div | ||
| className="absolute right-10 top-10 z-50 text-neutral-800 dark:text-neutral-200" | ||
| onClick={() => setOpen(!open)} | ||
| > | ||
| <IconX /> | ||
| </div> | ||
| {children} | ||
| </motion.div> | ||
| )} | ||
| </AnimatePresence> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export const SidebarLink = ({ | ||
| link, | ||
| className, | ||
| ...props | ||
| }: { | ||
| link: Links; | ||
| className?: string; | ||
| props?: LinkProps; | ||
| }) => { | ||
| const { open, animate } = useSidebar(); | ||
| return ( | ||
| <Link | ||
| href={link.href} | ||
| className={cn( | ||
| "flex items-center justify-start gap-2 group/sidebar py-2", | ||
| className | ||
| )} | ||
| {...props} | ||
| > | ||
| {link.icon} | ||
|
|
||
| <motion.span | ||
| animate={{ | ||
| display: animate ? (open ? "inline-block" : "none") : "inline-block", | ||
| opacity: animate ? (open ? 1 : 0) : 1, | ||
| }} | ||
| className="text-neutral-700 dark:text-neutral-200 text-sm group-hover/sidebar:translate-x-1 transition duration-150 whitespace-pre inline-block !p-0 !m-0" | ||
| > | ||
| {link.label} | ||
| </motion.span> | ||
| </Link> | ||
| ); | ||
| }; |
Oops, something went wrong.