diff --git a/src/app/[locale]/pages/layout.tsx b/src/app/[locale]/pages/layout.tsx index f7a5d82..63a3d19 100644 --- a/src/app/[locale]/pages/layout.tsx +++ b/src/app/[locale]/pages/layout.tsx @@ -1,5 +1,4 @@ import NavLinks from '@/app/ui/nav-links' -import styles from '@/app/styles/page.module.scss' import HeaderPanel from '@/app/ui/header/headerPanel'; import { getQueryClient } from '@/app/providers/getQueryClient'; import { HydrationBoundary, dehydrate } from '@tanstack/react-query'; @@ -14,9 +13,9 @@ export default async function Layout({ children }: { children: React.ReactNode }
-
+
-
+
{children}
diff --git a/src/app/actions/action.ts b/src/app/actions/action.ts index 14694f2..b6d6204 100644 --- a/src/app/actions/action.ts +++ b/src/app/actions/action.ts @@ -1,31 +1,6 @@ 'use server' import { getSessionData } from '@/app/actions/session'; -import { localDevelopmentUrl, testUserData, API_BASE_URL } from '@/app/actions/definitions'; - -const FRUITS_URL = 'https://www.fruityvice.com/api/fruit/'; -const ALL = 'all'; - -export async function fetchFruits() { - try { - const response = await fetch(FRUITS_URL + ALL, { 'method': 'GET' }); - let parsed = await response.json(); - return parsed; - } catch (error) { - console.error('Error:', error); - throw new Error('Failed to fetch fruits data.'); - } -} - -export async function fetchFruit(id: number) { - try { - const response = await fetch(FRUITS_URL + id, { 'method': 'GET' }); - let parsed = await response.json(); - return parsed; - } catch (error) { - console.error('Error:', error); - throw new Error('Failed to fetch fruits data.'); - } -} +import { testUserData, API_BASE_URL } from '@/app/actions/definitions'; export async function getUserData() { const userEmail = await getSessionData('email'); diff --git a/src/app/styles/global-styles.scss b/src/app/styles/global-styles.scss index 3dbcc67..9342feb 100644 --- a/src/app/styles/global-styles.scss +++ b/src/app/styles/global-styles.scss @@ -6,6 +6,19 @@ @use './privacy-and-terms-pages.scss'; @use './VKLogin.scss'; +.main-containter-wrapper { + margin-left: 280px; + flex: 1; + padding: 30px; + background: #f8f9ff; + min-height: 100vh; +} + +.main-containter { + max-width: 1920px; + margin: 0 auto; +} + .btn { padding: 12px 24px; border-radius: 10px; @@ -161,4 +174,110 @@ :where(.divide-gray-200 > tr:last-child) { border-bottom: 1px solid var(--color-gray-200); } +} + +.sidebar { + width: 280px; + background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%); + padding: 30px 0; + position: fixed; + height: 100vh; + overflow-y: auto; + z-index: 100; +} + +.nav-link { + display: flex; + align-items: center; + padding: 15px 30px; + color: rgba(255, 255, 255, 0.8); + text-decoration: none; + transition: all 0.3s; + border-radius: 0 25px 25px 0; + margin-right: 20px; + margin-bottom: 8px; + font-weight: 500; + text-transform: uppercase; + + &:hover { + background: rgba(255, 255, 255, 0.15); + color: white; + } + + svg { + margin-right: 15px; + width: 20px; + height: 20px; + } +} + +.sub-link { + padding: 12px 50px; + font-size: 14px; + border-radius: 0; + margin-right: 0; + + &:last-child { + margin-bottom: 0; + } +} + +.nav-dropdown { + .dropdown-arrow { + margin-left: auto; + transition: transform 0.3s; + } + + &.expanded { + .dropdown-arrow { + transform: rotate(180deg); + } + } +} + +.sub-menu.expanded { + max-height: 400px; +} + +.sub-menu { + list-style: none; + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease; + background: rgba(255, 255, 255, 0.1); + margin-right: 20px; + border-radius: 0 15px 15px 0; +} + +.logo { + display: flex; + align-items: center; + padding: 0 30px 40px; + color: white; + font-size: 24px; + font-weight: 600; + text-transform: uppercase; + + svg { + width: 32px; + height: 32px; + margin-right: 15px; + } +} + +.logo-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 60px; + height: 60px; + background: linear-gradient(135deg, #6366f1, #8b5cf6); + border-radius: 15px; + margin-bottom: 15px; + + svg { + width: 30px; + height: 30px; + fill: white; + } } \ No newline at end of file diff --git a/src/app/styles/page.module.scss b/src/app/styles/page.module.scss deleted file mode 100644 index 75d6959..0000000 --- a/src/app/styles/page.module.scss +++ /dev/null @@ -1,12 +0,0 @@ -.main-containter-wrapper { - margin-left: 280px; - flex: 1; - padding: 30px; - background: #f8f9ff; - min-height: 100vh; -} - -.main-containter { - max-width: 1920px; - margin: 0 auto; -} \ No newline at end of file diff --git a/src/app/styles/ui.module.scss b/src/app/styles/ui.module.scss deleted file mode 100644 index f25dc83..0000000 --- a/src/app/styles/ui.module.scss +++ /dev/null @@ -1,105 +0,0 @@ -.sidebar { - width: 280px; - background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%); - padding: 30px 0; - position: fixed; - height: 100vh; - overflow-y: auto; - z-index: 100; -} - -.nav-link { - display: flex; - align-items: center; - padding: 15px 30px; - color: rgba(255, 255, 255, 0.8); - text-decoration: none; - transition: all 0.3s; - border-radius: 0 25px 25px 0; - margin-right: 20px; - margin-bottom: 8px; - font-weight: 500; - text-transform: uppercase; - - &:hover { - background: rgba(255, 255, 255, 0.15); - color: white; - } - - svg { - margin-right: 15px; - width: 20px; - height: 20px; - } -} - -.sub-link { - padding: 12px 50px; - font-size: 14px; - border-radius: 0; - margin-right: 0; - - &:last-child { - margin-bottom: 0; - } -} - -.nav-dropdown { - .dropdown-arrow { - margin-left: auto; - transition: transform 0.3s; - } - - &.expanded { - .dropdown-arrow { - transform: rotate(180deg); - } - } -} - -.sub-menu.expanded { - max-height: 400px; -} - -.sub-menu { - list-style: none; - max-height: 0; - overflow: hidden; - transition: max-height 0.3s ease; - background: rgba(255, 255, 255, 0.1); - margin-right: 20px; - border-radius: 0 15px 15px 0; -} - -.logo { - display: flex; - align-items: center; - padding: 0 30px 40px; - color: white; - font-size: 24px; - font-weight: 600; - text-transform: uppercase; - - svg { - width: 32px; - height: 32px; - margin-right: 15px; - } -} - -.logo-icon { - display: inline-flex; - align-items: center; - justify-content: center; - width: 60px; - height: 60px; - background: linear-gradient(135deg, #6366f1, #8b5cf6); - border-radius: 15px; - margin-bottom: 15px; - - svg { - width: 30px; - height: 30px; - fill: white; - } -} \ No newline at end of file diff --git a/src/app/ui/header/notificationsButton.tsx b/src/app/ui/header/notificationsButton.tsx index 3e883e5..049ac7e 100644 --- a/src/app/ui/header/notificationsButton.tsx +++ b/src/app/ui/header/notificationsButton.tsx @@ -1,7 +1,6 @@ "use client" import { useState, useRef } from 'react'; -import { fetchFruits } from '@/app/actions/action'; import { useClickOutside } from '@/app/hooks/useClickOutside'; import { useTranslations } from 'next-intl'; import Link from 'next/link'; @@ -10,7 +9,6 @@ import {IconNotification} from '@/app/ui/icons/icons'; export default function NotificationsButton() { const [isOpen, setIsOpen] = useState(false); const [data, setData] = useState(null); - const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const menuRef = useRef(null); const t = useTranslations('Global'); @@ -19,24 +17,9 @@ export default function NotificationsButton() { setIsOpen(false); }); - const fetchData = async () => { - setLoading(true); - setError(null); - - try { - const result = await fetchFruits(); - setData("result"); - setIsOpen(true); - } catch (err) { - setError('error message'); - } finally { - setLoading(false); - } - }; - const handleButtonClick = () => { if (!isOpen) { - fetchData(); + setIsOpen(true); } else { setIsOpen(false); } diff --git a/src/app/ui/logo-icon.tsx b/src/app/ui/logo-icon.tsx index 9485605..5816cbe 100644 --- a/src/app/ui/logo-icon.tsx +++ b/src/app/ui/logo-icon.tsx @@ -1,8 +1,6 @@ -import style from "@/app/styles/ui.module.scss" - export default function LogoIcon() { return ( -
+
diff --git a/src/app/ui/logo.tsx b/src/app/ui/logo.tsx index b7ccb09..3ac2d0d 100644 --- a/src/app/ui/logo.tsx +++ b/src/app/ui/logo.tsx @@ -1,8 +1,6 @@ -import styles from '@/app/styles/ui.module.scss'; - export default function Logo() { return ( -
+
diff --git a/src/app/ui/nav-link-dropdown.tsx b/src/app/ui/nav-link-dropdown.tsx index 364c242..8d7c51e 100644 --- a/src/app/ui/nav-link-dropdown.tsx +++ b/src/app/ui/nav-link-dropdown.tsx @@ -1,4 +1,3 @@ -import styles from '@/app/styles/ui.module.scss'; import { useState, useRef } from 'react'; import Link from 'next/link'; import clsx from 'clsx'; @@ -32,35 +31,29 @@ export default function DropDownList() { return ( <>
-
+

{t('marking')}

- +
-
    +
      {links.map((link) => { return ( -