Merge remote changes with updated navigation UI-kit

This commit is contained in:
Veronika Smirnova
2025-07-21 12:26:01 +03:00
5 changed files with 14 additions and 8 deletions

View File

@ -4,9 +4,11 @@ import { useAuth } from '@/hooks/useAuth'
import { Card } from '@/components/ui/card' import { Card } from '@/components/ui/card'
import { Building2, Phone } from 'lucide-react' import { Building2, Phone } from 'lucide-react'
import { Sidebar } from './sidebar' import { Sidebar } from './sidebar'
import { useSidebar } from '@/hooks/useSidebar'
export function DashboardHome() { export function DashboardHome() {
const { user } = useAuth() const { user } = useAuth()
const { getSidebarMargin } = useSidebar()
const getOrganizationName = () => { const getOrganizationName = () => {
if (user?.organization?.name) { if (user?.organization?.name) {
@ -21,9 +23,9 @@ export function DashboardHome() {
return ( return (
<div className="min-h-screen flex"> <div className="h-screen flex overflow-hidden">
<Sidebar /> <Sidebar />
<main className="flex-1 ml-64"> <main className={`flex-1 ${getSidebarMargin()} px-6 py-4 overflow-hidden transition-all duration-300`}>
<div className="p-8"> <div className="p-8">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{/* Информация об организации */} {/* Информация об организации */}

View File

@ -4,10 +4,12 @@ import { useState } from 'react'
import { Sidebar } from './sidebar' import { Sidebar } from './sidebar'
import { UserSettings } from './user-settings' import { UserSettings } from './user-settings'
import { DashboardHome } from './dashboard-home' import { DashboardHome } from './dashboard-home'
import { useSidebar } from '@/hooks/useSidebar'
export type DashboardSection = 'home' | 'settings' export type DashboardSection = 'home' | 'settings'
export function Dashboard() { export function Dashboard() {
const { getSidebarMargin } = useSidebar()
const [activeSection] = useState<DashboardSection>('home') const [activeSection] = useState<DashboardSection>('home')
const renderContent = () => { const renderContent = () => {
@ -21,9 +23,9 @@ export function Dashboard() {
} }
return ( return (
<div className="min-h-screen flex"> <div className="h-screen flex overflow-hidden">
<Sidebar /> <Sidebar />
<main className="flex-1 ml-64"> <main className={`flex-1 ${getSidebarMargin()} px-6 py-4 overflow-hidden transition-all duration-300`}>
{renderContent()} {renderContent()}
</main> </main>
</div> </div>

View File

@ -107,7 +107,7 @@ export function Sidebar() {
const isPartnersActive = pathname.startsWith('/partners') const isPartnersActive = pathname.startsWith('/partners')
return ( return (
<div className={`fixed left-4 top-4 bottom-4 ${isCollapsed ? 'w-14' : 'w-72'} bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl ${isCollapsed ? 'p-2' : 'p-3'} transition-all duration-300 ease-in-out z-50`}> <div className={`fixed left-4 top-4 bottom-4 ${isCollapsed ? 'w-12' : 'w-56'} bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl ${isCollapsed ? 'p-2' : 'p-3'} transition-all duration-300 ease-in-out z-50`}>
<div className="flex flex-col h-full"> <div className="flex flex-col h-full">
{/* Кнопка сворачивания */} {/* Кнопка сворачивания */}
<div className={`flex ${isCollapsed ? 'justify-center' : 'justify-end'} ${isCollapsed ? 'mb-2' : 'mb-3'}`}> <div className={`flex ${isCollapsed ? 'justify-center' : 'justify-end'} ${isCollapsed ? 'mb-2' : 'mb-3'}`}>

View File

@ -5,6 +5,7 @@ import { Card } from '@/components/ui/card'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge' import { Badge } from '@/components/ui/badge'
import { Sidebar } from '@/components/dashboard/sidebar' import { Sidebar } from '@/components/dashboard/sidebar'
import { useSidebar } from '@/hooks/useSidebar'
import { import {
ChevronDown, ChevronDown,
@ -232,6 +233,7 @@ const mockSupplies: Supply[] = [
] ]
export function SuppliesDashboard() { export function SuppliesDashboard() {
const { getSidebarMargin } = useSidebar()
const [expandedSupplies, setExpandedSupplies] = useState<Set<string>>(new Set()) const [expandedSupplies, setExpandedSupplies] = useState<Set<string>>(new Set())
const [expandedRoutes, setExpandedRoutes] = useState<Set<string>>(new Set()) const [expandedRoutes, setExpandedRoutes] = useState<Set<string>>(new Set())
const [expandedWholesalers, setExpandedWholesalers] = useState<Set<string>>(new Set()) const [expandedWholesalers, setExpandedWholesalers] = useState<Set<string>>(new Set())
@ -327,9 +329,9 @@ export function SuppliesDashboard() {
} }
return ( return (
<div className="min-h-screen flex"> <div className="h-screen flex overflow-hidden">
<Sidebar /> <Sidebar />
<main className="flex-1 ml-56"> <main className={`flex-1 ${getSidebarMargin()} px-6 py-4 overflow-hidden transition-all duration-300`}>
<div className="p-8"> <div className="p-8">
{/* Заголовок */} {/* Заголовок */}
<div className="flex items-center justify-between mb-8"> <div className="flex items-center justify-between mb-8">

View File

@ -20,7 +20,7 @@ export function SidebarProvider({ children }: { children: ReactNode }) {
const getSidebarMargin = () => { const getSidebarMargin = () => {
// Учитываем отступ слева (left-4) + ширина сайдбара + дополнительный отступ // Учитываем отступ слева (left-4) + ширина сайдбара + дополнительный отступ
return isCollapsed ? 'ml-20' : 'ml-80' return isCollapsed ? 'ml-20' : 'ml-64'
} }
return ( return (