I'll create three different progress indicator designs based on your screenshot, each with a unique UI style but maintaining the same functionality.
I've created three different progress indicator designs:
Each component:
Would you like me to modify any of these designs or create additional variations with different styles?
Here are three more unique progress indicator designs with different visual styles:
I've created three additional progress indicator designs with unique visual styles:
Each component:
These new designs complement the previous three, giving you a total of six different progress indicator styles to choose from. Would you like me to make any adjustments to these designs or create any additional variations?
I need to edit sidebar: add sublinks
like: Home > Home1, Home2
Use tailwind,
import { collapase, logo, logoIcon, ProfileImage } from "@/assets";
import { getNavigationLinks } from "@/constant/sidelinks";
import { cn } from "@/lib/utils";
import { Menu, X } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from "react";
import { Button } from "./custom/button";
import { Layout } from "./custom/layout";
import Nav from "./nav";
import ProfileCard from "./Profile/Profile";
type Props = {
className?: string;
isCollapsed: boolean;
setIsCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
};
function UserSidebar({ className, isCollapsed, setIsCollapsed }: Props) {
const [navOpened, setNavOpened] = useState(false);
useEffect(() => {
if (navOpened) {
document.body.classList.add("overflow-hidden");
} else {
document.body.classList.remove("overflow-hidden");
}
}, [navOpened]);
return (
<aside
className={cn(
z-[1000] bg-primary border-r-2 h-full w-full duration-75 xl:block md:w-[272px] border-r-muted md:bottom-0 md:right-auto md:h-svh,
!isCollapsed && "w-full md:w-[272px] md:max-w-[272px] absolute ",
isCollapsed && "md:w-[96px] md:max-w-[96px]",
className
)}
>
<div
onClick={() => setNavOpened(false)}
className={absolute inset-0 transition-[opacity] delay-100 duration-700 ${ navOpened ? "h-svh opacity-50" : "h-0 opacity-0" } w-full bg-black md:hidden}
/>
<Layout fixed className={navOpened ? "h-svh" : ""}>
<Layout.Header
sticky
className="z-50 bg-primary flex items-center justify-between px-4 py-3 shadow-sm md:px-4 md:py-[32px]"
>
<div className="flex items-center gap-2 w-full justify-center">
<Link
prefetch={false}
href="/dashboard"
className="flex items-center "
>
<Image
src={isCollapsed ? logoIcon : logo}
alt="vacha"
width={isCollapsed ? 50 : 158}
height={isCollapsed ? 50 : 100}
className={
isCollapsed ? " h-[30ox]" : "h-[30px] object-contain"
}
/>
</Link>
</div>
<Button
variant="ghost"
size="icon"
className="md:hidden"
aria-label="Toggle Navigation"
aria-controls="sidebar-menu"
aria-expanded={navOpened}
onClick={() => setNavOpened((prev) => !prev)}
>
{navOpened ? <X /> : <Menu />}
</Button>
</Layout.Header>
<Nav
id="sidebar-menu"
className={cn(
"z-40 h-full bg-primary flex-1 overflow-auto",
navOpened ? "max-h-screen" : "max-h-0 py-0 md:max-h-screen"
)}
closeNav={() => setNavOpened(false)}
isCollapsed={isCollapsed}
links={getNavigationLinks(true)}
/>
<div className={cn("p-4", isCollapsed ? "flex justify-center" : "")}>
<Button
onClick={() => {
setIsCollapsed((prev) => !prev);
}}
variant="secondary"
className={cn(
"w-full transition-all duration-500 bg-primary-foreground hover:bg-primary-foreground stroke-secondary text-secondary ",
isCollapsed
? "h-[48px] w-[56px] rounded-lg p-0"
: "h-[48px] justify-start gap-3 rounded-lg px-4"
)}
title="Collapsed View"
>
{" "}
<Image
className={cn(
"size-[18px] transition-transform duration-500",
!isCollapsed
? "rotate-0"
: "rotate-180 filter invert brightness-0"
)}
src={collapase}
alt="close"
/>
{!isCollapsed && (
<span className="font-normal">Collapsed View</span>
)}
</Button>
</div>
<div className={cn("p-4 pt-0", isCollapsed ? "flex justify-center" : "")}>
<ProfileCard
email="jonhwilson@gmail.com"
imageUrl={ProfileImage}
name="John Wilson"
isCollapsed={isCollapsed}
/>
</div>
</Layout>
</aside>
);
}
export default UserSidebar;