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 { SignUp } from './pages/SignUp'
import { AuthLayout } from './layouts/AuthLayout' import { AuthLayout } from './layouts/AuthLayout'
import { Routes, Route, Navigate } from 'react-router' import { Routes, Route, Navigate } from 'react-router'
import MenuDockVertical from './layouts/DashLayout' import Dashboard from './pages/Dashboard'
function App() { function App() {
@@ -20,9 +20,7 @@ function App() {
</Route> </Route>
<Route path="/dashboard" element={ <Route path="/dashboard" element={
// <div className="min-h-svh bg-background flex justify-start items-start"> <Dashboard />
<MenuDockVertical />
// </div>
} /> } />
<Route path="*" element={<Navigate to="/auth/login" replace />} /> <Route path="*" element={<Navigate to="/auth/login" replace />} />
</Routes> </Routes>

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

@@ -17,7 +17,8 @@ export const MenuDock = ({
variant = 'default', variant = 'default',
orientation = 'horizontal', orientation = 'horizontal',
showLabels = true, showLabels = true,
animated = true animated = true,
showIndicator = true
}) => { }) => {
const finalItems = useMemo(() => { const finalItems = useMemo(() => {
@@ -122,6 +123,7 @@ export const MenuDock = ({
className={cn( className={cn(
'relative flex flex-col items-center justify-center rounded-lg transition-all duration-200', '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', 'hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
'select-none',
styles.item, styles.item,
isActive && 'text-primary', isActive && 'text-primary',
!isActive && 'text-muted-foreground hover:text-foreground' !isActive && 'text-muted-foreground hover:text-foreground'
@@ -153,7 +155,7 @@ export const MenuDock = ({
); );
})} })}
{/* Animated underline for horizontal orientation with labels */} {/* Animated underline for horizontal orientation with labels */}
{showLabels && orientation === 'horizontal' && ( {showIndicator && showLabels && orientation === 'horizontal' && (
<div <div
className={cn( className={cn(
'absolute bottom-2 h-0.5 bg-primary rounded-full transition-all duration-300 ease-out', 'absolute bottom-2 h-0.5 bg-primary rounded-full transition-all duration-300 ease-out',
@@ -165,7 +167,7 @@ export const MenuDock = ({
}} /> }} />
)} )}
{/* Active indicator for vertical orientation or no labels */} {/* Active indicator for vertical orientation or no labels */}
{(!showLabels || orientation === 'vertical') && ( {showIndicator && (!showLabels || orientation === 'vertical') && (
<div <div
className={cn( className={cn(
'absolute bg-primary rounded-full transition-all duration-300', 'absolute bg-primary rounded-full transition-all duration-300',

11
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 { MenuDock } from '@/components/ui/shadcn-io/menu-dock';
import { Home, Settings, Bell } from 'lucide-react'; import { Home, Settings, Bell } from 'lucide-react';
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'; import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
const sidebarItems = [ const menuItems = [
{ label: 'home', icon: Home, onClick: () => console.log('Home clicked') }, { label: 'home', icon: Home, onClick: () => console.log('Home clicked') },
{ label: 'notifications', icon: Bell, onClick: () => console.log('Notifications clicked') }, { label: 'notifications', icon: Bell, onClick: () => console.log('Notifications clicked') },
{ label: 'settings', icon: Settings, onClick: () => console.log('Settings clicked') }, { label: 'settings', icon: Settings, onClick: () => console.log('Settings clicked') },
]; ];
export default function MenuDockVertical() { export default function Dashboard() {
return ( return (
<div className="min-h-[180px] p-4 flex justify-start items-start"> <div className="min-h-[180px] p-4 flex justify-start items-start">
<div className="flex flex-col items-center justify-center"> <div className="flex flex-col items-center justify-center">
@@ -16,11 +16,14 @@ export default function MenuDockVertical() {
<AvatarFallback>CN</AvatarFallback> <AvatarFallback>CN</AvatarFallback>
</Avatar> </Avatar>
<MenuDock <MenuDock
items={sidebarItems} items={menuItems}
variant="compact"
orientation="vertical" orientation="vertical"
showIndicator={false}
variant="default"
/> />
</div> </div>
</div> </div>
); );
} }