From 8ee524318c28ab10982e5b8d31492bc9ee43228e Mon Sep 17 00:00:00 2001 From: IluaAir Date: Sun, 12 Oct 2025 22:52:48 +0300 Subject: [PATCH] menydock update, dashboard page create --- taskncoffee-app/src/App.jsx | 6 +- .../ui/shadcn-io/menu-dock/index.jsx | 60 ++++++++++--------- .../DashLayout.jsx => pages/Dashboard.jsx} | 13 ++-- 3 files changed, 41 insertions(+), 38 deletions(-) rename taskncoffee-app/src/{layouts/DashLayout.jsx => pages/Dashboard.jsx} (84%) diff --git a/taskncoffee-app/src/App.jsx b/taskncoffee-app/src/App.jsx index 17fff3a..4dfba73 100644 --- a/taskncoffee-app/src/App.jsx +++ b/taskncoffee-app/src/App.jsx @@ -3,7 +3,7 @@ import { LoginPage } from './pages/Login' import { SignUp } from './pages/SignUp' import { AuthLayout } from './layouts/AuthLayout' import { Routes, Route, Navigate } from 'react-router' -import MenuDockVertical from './layouts/DashLayout' +import Dashboard from './pages/Dashboard' function App() { @@ -20,9 +20,7 @@ function App() { - - // + } /> } /> diff --git a/taskncoffee-app/src/components/ui/shadcn-io/menu-dock/index.jsx b/taskncoffee-app/src/components/ui/shadcn-io/menu-dock/index.jsx index 82ec31b..e5c914f 100644 --- a/taskncoffee-app/src/components/ui/shadcn-io/menu-dock/index.jsx +++ b/taskncoffee-app/src/components/ui/shadcn-io/menu-dock/index.jsx @@ -4,57 +4,58 @@ import { Home, Briefcase, Calendar, Shield, Settings } from 'lucide-react'; import { cn } from '@/lib/utils'; const defaultItems = [ - { label: 'home', icon: Home }, - { label: 'work', icon: Briefcase }, - { label: 'calendar', icon: Calendar }, - { label: 'security', icon: Shield }, - { label: 'settings', icon: Settings }, + { label: 'home', icon: Home }, + { label: 'work', icon: Briefcase }, + { label: 'calendar', icon: Calendar }, + { label: 'security', icon: Shield }, + { label: 'settings', icon: Settings }, ]; -export const MenuDock = ({ - items, +export const MenuDock = ({ + items, className, variant = 'default', orientation = 'horizontal', showLabels = true, - animated = true + animated = true, + showIndicator = true }) => { const finalItems = useMemo(() => { - const isValid = items && Array.isArray(items) && items.length >= 2 && items.length <= 8; - if (!isValid) { - console.warn( - "MenuDock: 'items' prop is invalid or missing. Using default items.", - items - ); - return defaultItems; - } - return items; + const isValid = items && Array.isArray(items) && items.length >= 2 && items.length <= 8; + if (!isValid) { + console.warn( + "MenuDock: 'items' prop is invalid or missing. Using default items.", + items + ); + return defaultItems; + } + return items; }, [items]); const [activeIndex, setActiveIndex] = useState(0); const [underlineWidth, setUnderlineWidth] = useState(0); const [underlineLeft, setUnderlineLeft] = useState(0); - + const textRefs = useRef([]); const itemRefs = useRef([]); useEffect(() => { - if (activeIndex >= finalItems.length) { - setActiveIndex(0); - } + if (activeIndex >= finalItems.length) { + setActiveIndex(0); + } }, [finalItems, activeIndex]); useEffect(() => { const updateUnderline = () => { const activeButton = itemRefs.current[activeIndex]; const activeText = textRefs.current[activeIndex]; - + if (activeButton && activeText && showLabels && orientation === 'horizontal') { const buttonRect = activeButton.getBoundingClientRect(); const textRect = activeText.getBoundingClientRect(); const containerRect = activeButton.parentElement?.getBoundingClientRect(); - + if (containerRect) { setUnderlineWidth(textRect.width); setUnderlineLeft( @@ -122,6 +123,7 @@ export const MenuDock = ({ className={cn( 'relative flex flex-col items-center justify-center rounded-lg transition-all duration-200', 'hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', + 'select-none', styles.item, isActive && 'text-primary', !isActive && 'text-muted-foreground hover:text-foreground' @@ -153,7 +155,7 @@ export const MenuDock = ({ ); })} {/* Animated underline for horizontal orientation with labels */} - {showLabels && orientation === 'horizontal' && ( + {showIndicator && showLabels && orientation === 'horizontal' && (
)} {/* Active indicator for vertical orientation or no labels */} - {(!showLabels || orientation === 'vertical') && ( + {showIndicator && (!showLabels || orientation === 'vertical') && (
diff --git a/taskncoffee-app/src/layouts/DashLayout.jsx b/taskncoffee-app/src/pages/Dashboard.jsx similarity index 84% rename from taskncoffee-app/src/layouts/DashLayout.jsx rename to taskncoffee-app/src/pages/Dashboard.jsx index 0378b4f..aa5db19 100644 --- a/taskncoffee-app/src/layouts/DashLayout.jsx +++ b/taskncoffee-app/src/pages/Dashboard.jsx @@ -2,12 +2,12 @@ import { MenuDock } from '@/components/ui/shadcn-io/menu-dock'; import { Home, Settings, Bell } from 'lucide-react'; import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'; -const sidebarItems = [ +const menuItems = [ { label: 'home', icon: Home, onClick: () => console.log('Home clicked') }, { label: 'notifications', icon: Bell, onClick: () => console.log('Notifications clicked') }, { label: 'settings', icon: Settings, onClick: () => console.log('Settings clicked') }, ]; -export default function MenuDockVertical() { +export default function Dashboard() { return (
@@ -16,11 +16,14 @@ export default function MenuDockVertical() { CN
); -} \ No newline at end of file +} +