redesign navbar

app/[lang]/layout.tsx

@@ -2,7 +2,7 @@ import { ClientProviders } from '@/app/providers/client-providers';
 import '@/app/styles/index.scss';
 import { i18n, Locale } from '@/shared/config/i18n';
 import { FontDefault } from '@/shared/const/fonts';
-import { Light, PageLoader } from '@/shared/ui';
+import { GlowingLine, Light, PageLoader } from '@/shared/ui';
 import { Footer, Navbar, Sidebar } from '@/widgets';
 import type { Metadata } from 'next';
 import { Suspense } from 'react';
@@ -38,16 +38,13 @@ export default async function RootLayout({
 						}
 					>
 						<Light />
+						<GlowingLine className='fixed z-50 top-0' />
 						<Navbar />
-						<div className='overflow-hidden'>
-							<div className='max-w-8xl mx-auto px-4 sm:px-6 md:px-8 z-20'>
-								<Sidebar />
-								<div className='lg:pl-[19.5rem]'>
-									<div className='max-w-3xl mx-auto pt-10 xl:max-w-none xl:ml-0 min-h-[var(--height-screen)] flex flex-col justify-between'>
-										<div>{children}</div>
-										<Footer />
-									</div>
-								</div>
+						<div className='max-w-7xl mx-auto px-4 sm:px-6 md:px-8 z-20 flex flex-col lg:grid lg:grid-cols-[17.5rem,1fr] gap-10'>
+							<Sidebar />
+							<div className='xl:max-w-none xl:ml-0 min-h-[var(--height-screen)] flex flex-col justify-between'>
+								<div>{children}</div>
+								<Footer />
 							</div>
 						</div>
 					</Suspense>

config/extend-colors.ts

@@ -9,7 +9,7 @@ export const ExtendColors = {
 		400: '#90A3BB',
 		300: '#B9C8DB',
 		200: '#D4DDE9',
-		100: '#F1F4F8',
+		100: '#E9F0F7',
 		50: '#F8FAFC',
 	},
 };

package.json

@@ -4,6 +4,7 @@
 	"private": true,
 	"scripts": {
 		"dev": "next dev",
+		"fast": "next dev --turbo",
 		"build": "prisma generate && next build",
 		"start": "next start",
 		"lint": "next lint",

src/app/styles/index.scss

@@ -33,6 +33,11 @@ body {
 	background: linear-gradient(90deg, theme('colors.default-50') 15px, transparent 1%) 50%, linear-gradient(theme('colors.default-50') 15px, theme('colors.default-200') 1%) 0, hsla(0deg, 0%, 100%, 16%);
 	background-size: 16px 16px;
 	min-height: 100vh;
+
+	[class="light"] & {
+		background: linear-gradient(90deg, theme('colors.default-100') 15px, transparent 1%) 50%, linear-gradient(theme('colors.default-100') 15px, theme('colors.default-300') 1%) 0, hsla(0deg, 0%, 100%, 16%);
+		background-size: 16px 16px;
+	}
 }
 
 ::-webkit-scrollbar {

src/features/burger/burger.tsx

@@ -27,8 +27,8 @@ export const Burger = ({ children }: { children: React.ReactNode }) => {
 			<Drawer.Portal>
 				<Drawer.Overlay className='fixed inset-0 bg-black/40 z-40' />
 				<Drawer.Content className='bg-default-100 flex flex-col rounded-t-[10px] h-[90%] mt-24 fixed bottom-0 left-0 right-0 z-40 outline-none'>
-					<div className='w-full bg-default-100 h-8 flex justify-center items-center'>
-						<div className='w-12 h-1.5 rounded-full bg-default-300' />
+					<div className='w-full bg-default-100 h-5 flex justify-center items-center'>
+						<div className='w-12 h-1 rounded-full bg-default-300' />
 					</div>
 					<div className='overflow-auto'>
 						<div className='max-w-md mx-auto px-4'>{children}</div>

src/features/locale-switcher/locale-switcher.tsx

@@ -31,7 +31,14 @@ export const LocaleSwitcher = ({ dict }: { dict: Dictionary['ui'] }) => {
 	};
 
 	return (
-		<Dropdown offset={20} backdrop='opaque'>
+		<Dropdown
+			offset={12}
+			backdrop='blur'
+			classNames={{
+				content:
+					'backdrop-filter backdrop-blur-lg bg-default-100 rounded-lg border border-default-900/5',
+			}}
+		>
 			<DropdownTrigger>
 				<Button variant='light' isIconOnly color='primary'>
 					<HiOutlineLanguage size={18} />
@@ -44,7 +51,10 @@ export const LocaleSwitcher = ({ dict }: { dict: Dictionary['ui'] }) => {
 				variant='faded'
 				aria-label='Dropdown menu with description'
 			>
-				<DropdownSection title={dict['change-lang']}>
+				<DropdownSection
+					title={dict['change-lang']}
+					classNames={{ heading: 'text-primary-400' }}
+				>
 					<DropdownItem
 						startContent={'ru'}
 						key='ru'

src/shared/assets/icon/Logo.tsx

@@ -4,7 +4,7 @@ import Image from 'next/image';
 import { FC, useState } from 'react';
 
 interface Props extends React.SVGProps<SVGSVGElement> {
-	variant?: 'default' | 'graffiti' | 'text' | 'fly';
+	variant?: 'default' | 'graffiti' | 'text';
 	changeOnClick?: boolean;
 }
 
@@ -18,8 +18,7 @@ export const Logo: FC<Props> = ({
 
 	const handleClick = () => {
 		if (changeOnClick) {
-			const variants = ['default', 'graffiti', 'text', 'fly'];
-			// @ts-ignore
+			const variants: Props['variant'][] = ['default', 'graffiti', 'text'];
 			const currentIndex = variants.indexOf(currentVariant);
 			const nextIndex = (currentIndex + 1) % variants.length;
 			setCurrentVariant(variants[nextIndex] as Props['variant']);
@@ -57,16 +56,6 @@ export const Logo: FC<Props> = ({
 						</defs>
 					</svg>
 				);
-			case 'fly':
-				return (
-					<Image
-						src='/images/melior-fly.png'
-						alt='logo'
-						width={128}
-						height={128}
-						className='max-h-[48px] max-w-[78px] object-contain'
-					/>
-				);
 			case 'graffiti':
 				return (
 					<Image

src/shared/hooks/useMessage/useMessage.module.scss

@@ -2,7 +2,7 @@
 
 .wrapper {
 	position: fixed;
-	top: calc(var(--height-navbar) + 6px);
+	bottom: 2rem;
 	z-index: var(--z-index-notification);
 	display: flex;
 	flex-direction: column;
@@ -20,24 +20,20 @@
 	justify-content: space-between;
 	padding: 15px 20px;
 	width: fit-content;
-	margin-bottom: 6px;
+	margin-top: 6px;
 	overflow: hidden;
 	user-select: none;
 	backdrop-filter: var(--blur-md);
 	animation: fadeInFromTop .3s ease-out forwards;
 
 	@include background(.3);
-	@apply rounded-lg text-sm cursor-pointer border-b border-default-900/10 sm:max-w-xl max-w-none;
+	@apply text-sm cursor-pointer border-b border-default-900/10 sm:max-w-xl max-w-none rounded-xl;
 
 	[class="light"] & {
 		@include background(1);
 		backdrop-filter: none;
 	}
 
-	// @media (max-width: theme('screens.sm')) {
-	// 	width: calc(100% - 10px * 2);
-	// }
-
 	button {
 		min-width: 37px;
 		height: 37px;
@@ -89,12 +85,12 @@
 
 @keyframes fadeInFromTop {
 	0% {
-		margin-top: -50%;
+		margin-bottom: -3rem;
 		opacity: 0;
 	}
 
 	100% {
-		margin-top: 0;
+		margin-bottom: 0;
 		opacity: 1;
 	}
 }
@@ -105,12 +101,12 @@
 
 @keyframes fadeOutFromTop {
 	0% {
-		margin-top: 0;
+		margin-bottom: 0;
 		opacity: 1;
 	}
 
 	100% {
-		margin-top: -52px;
+		margin-bottom: -3rem;
 		opacity: 0;
 	}
 }

src/shared/ui/download-cv-button/download-cv-button.tsx

@@ -27,12 +27,12 @@ export const DownloadCvButton: FC<DownloadCvButtonProps> = ({
 			className={cn(
 				'py-6 md:py-4',
 				{
-					['bg-white dark:bg-default-200 text-default-600 border border-default-200 dark:border-0 hover:text-default-700 text-md']:
+					['bg-white dark:bg-default-100/90 text-default-600 dark:border-transparent hover:text-default-700 text-md border border-default-900/10 backdrop-filter backdrop-blur-lg']:
 						!color,
 				},
 				className,
 			)}
-			radius='sm'
+			radius='md'
 		>
 			{dict['download-cv']}
 		</Button>

src/shared/ui/glowing-box/glowing-line.module.scss

@@ -1,7 +1,4 @@
 .glowing-line {
-	position: absolute;
-	width: 100%;
-	height: 1px;
 	background: radial-gradient(var(--spotlight-line-size) circle at var(--mouse-x) var(--mouse-y),
 			theme('colors.primary-700') 0%,
 			rgba(0, 0, 0, 0) 100%, transparent 40%);
@@ -12,7 +9,7 @@
 				rgba(0, 0, 0, 0) 100%, transparent 40%);
 	}
 
-	@media (max-width: theme('screens.lg')) {
+	@media (max-width: theme('screens.md')) {
 		display: none;
 	}
 }

src/shared/ui/glowing-box/glowing-line.tsx

@@ -27,7 +27,7 @@ export const GlowingLine: FC<GlowingBoxProps> = ({ className }) => {
 
 	return (
 		<div
-			className={cn(cls['glowing-line'], className)}
+			className={cn(cls['glowing-line'], 'absolute w-full h-[1px]', className)}
 			style={style}
 			ref={ref}
 		/>

src/widgets/navbar/navbar-scroll.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { cn } from '@/shared/lib';
+import { useEffect, useState } from 'react';
+import cls from './navbar.module.scss';
+
+export const NavbarScroll = ({ children }: { children: React.ReactNode }) => {
+	const [isScrolled, setIsScrolled] = useState(true);
+
+	useEffect(() => {
+		setIsScrolled(false);
+	}, []);
+
+	useEffect(() => {
+		const handleScroll = () => {
+			if (window.scrollY > 30) {
+				setIsScrolled(true);
+			} else {
+				setIsScrolled(false);
+			}
+		};
+
+		window.addEventListener('scroll', handleScroll);
+		return () => {
+			window.removeEventListener('scroll', handleScroll);
+		};
+	}, []);
+
+	return (
+		<div className={cls.wrapper}>
+			<div className={cls['navbar-wrapper']}>
+				<div className={cn(cls.navbar, { [cls['navbar-open']]: isScrolled })}>
+					{children}
+				</div>
+			</div>
+		</div>
+	);
+};