gitark/taskncoffee
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

menydock update, dashboard page create

Browse Source
This commit is contained in:
IluaAir
2025-10-12 22:52:48 +03:00
parent 2c35b781dd
commit 8ee524318c
3 changed files with 41 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
taskncoffee-app/src/App.jsx
View File

@@ -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() {
</Route>
<Route path="/dashboard" element={
// <div className="min-h-svh bg-background flex justify-start items-start">
<MenuDockVertical />
// </div>
<Dashboard />
} />
<Route path="*" element={<Navigate to="/auth/login" replace />} />
</Routes>

60
taskncoffee-app/src/components/ui/shadcn-io/menu-dock/index.jsx
View File

@@ -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' && (
<div
className={cn(
'absolute bottom-2 h-0.5 bg-primary rounded-full transition-all duration-300 ease-out',
@@ -165,17 +167,17 @@ export const MenuDock = ({
}} />
)}
{/* Active indicator for vertical orientation or no labels */}
{(!showLabels || orientation === 'vertical') && (
{showIndicator && (!showLabels || orientation === 'vertical') && (
<div
className={cn(
'absolute bg-primary rounded-full transition-all duration-300',
orientation === 'vertical'
? 'left-1 w-1 h-6'
orientation === 'vertical'
? 'left-1 w-1 h-6'
: 'bottom-0.5 h-0.5 w-6'
)}
style={{
[orientation === 'vertical' ? 'top' : 'left']:
orientation === 'vertical'
[orientation === 'vertical' ? 'top' : 'left']:
orientation === 'vertical'
? `${(activeIndex * (variant === 'large' ? 64 : variant === 'compact' ? 56 : 60)) + (variant === 'large' ? 19 : variant === 'compact' ? 16 : 18)}px`
: `${(activeIndex * (variant === 'large' ? 64 : variant === 'compact' ? 56 : 60)) + (variant === 'large' ? 19 : variant === 'compact' ? 16 : 18)}px`
}} />

13
taskncoffee-app/src/layouts/DashLayout.jsx → taskncoffee-app/src/pages/Dashboard.jsx
View File

@@ -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 (
<div className="min-h-[180px] p-4 flex justify-start items-start">
<div className="flex flex-col items-center justify-center">
@@ -16,11 +16,14 @@ export default function MenuDockVertical() {
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<MenuDock
items={sidebarItems}
variant="compact"
items={menuItems}
orientation="vertical"
showIndicator={false}
variant="default"
/>
</div>
</div>
);
}
}