redrockjs/ocenka-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update base menu

Browse Source
This commit is contained in:
Valery Grunenko
2025-07-01 11:10:38 +03:00
parent a52db8dbcb
commit 359f3a32c4
4 changed files with 407 additions and 538 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/entities/base-menu/styles.module.scss
View File

@@ -19,7 +19,7 @@
display: flex;
flex-direction: row;
align-items: center;
gap: rem(24px);
gap: rem(32px);
}
.Parent {
@@ -27,35 +27,45 @@
position: relative;
float: left;
line-height: 40px;
//background-color: #ffc72c;
//border-right: #CCC 1px solid;
}
.Parent a {
//margin: 10px 24px;
//color: #5d3200;
text-decoration: none;
}
.Row {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: center;
cursor: default;
}
.Parent:hover > ul {
display: block;
position: absolute;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
& a {
text-decoration: none;
}
&:hover > ul {
display: block;
position: absolute;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
}
}
.Child {
display: none;
}
.Child li {
background-color: #FFFFFF;
line-height: 40px;
padding: 0 10px;
width: 100%;
}
& li {
background-color: #FFFFFF;
line-height: 40px;
padding: 4px 16px;
width: 100%;
text-wrap: nowrap;
.Child li a {
color: $color-text;
& a {
color: $color-text;
display: block;
}
}
& .Parent > .Row > .Expand {
transform: rotateZ(0deg);
}
}
ul {
@@ -94,13 +104,7 @@
}
.Expand {
font-size: 16px;
float: right;
margin-left: 8px;
color: $color-text
transform: rotateZ(90deg);
}
}
.Invite {
}
}

150
src/entities/base-menu/ui.tsx
View File

@@ -1,51 +1,45 @@
import s from './styles.module.scss';
import Image from 'next/image';
import dtrLogo from '@public/images/dtr-logo-eagle.png';
import { baseMenu, TMenu } from '@core/constants/menu';
import { Icons } from '@shared/ui/icon';
import Link from 'next/link';
function BaseMenu() {
const Menu = ({ list }: { list: TMenu }) => {
const nodeList = (list: TMenu) => {
return list.map((item, index) => {
if (item.children && item.children.length) {
return (
<li key={index} className={s.Parent}>
<div className={s.Row}>
{item.name}
<Icons.MenuArrow className={s.Expand} />
</div>
<ul className={s.Child}>{nodeList(item.children)}</ul>
</li>
);
}
return (
<li key={index}>
<Link href={item.link!}>{item.name}</Link>
</li>
);
});
};
return (
<nav className={s.Nav}>
<ul className={s.Menu}>{nodeList(list)}</ul>
</nav>
);
};
return (
<section className={s.ContainerNavbar}>
<div className={s.Navbar}>
<Image src={dtrLogo} alt={'ДиТрасо'} quality={75} priority />
<nav className={s.Nav}>
<ul className={s.Menu}>
<li>
<a href='#'>Экспертиза</a>
</li>
<li className={s.Parent}>
<a href='#'>Оценка</a> <span className={s.Expand}>&#129170;</span>
<ul className={s.Child}>
<li>
<a href='#'>Link1</a>
</li>
<li className={s.Parent}>
<a href='#'>Link2</a>{' '}
<span className={s.Expand}>&#129170;</span>
<ul className={s.Child}>
<li>
<a href='#'>SubLink 1 asdasd</a>
</li>
<li>
<a href='#'>SubLink 2 asdasdasd</a>
</li>
<li>
<a href='#'>SubLink 3 xczzxcc</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#'>Юрист</a>
</li>
<li>
<a href='#'>Эксперты</a>
</li>
<li>
<a href='#'>Контакты</a>
</li>
</ul>
</nav>
<Menu list={baseMenu} />
<div className={s.Invite}>
<button>+7 (999) 123-45-67</button>
</div>
@@ -55,81 +49,3 @@ function BaseMenu() {
}
export { BaseMenu };
const Menu = [
{
menuItem: {
name: 'Home',
link: '/home',
},
},
{
menuItem: {
name: 'Link1',
children: [
{
menuItem: {
name: 'link1-1',
link: '/home',
},
},
{
menuItem: {
name: 'link1-2',
link: '/home',
},
},
{
menuItem: {
name: 'link1-3',
link: '/home',
},
},
],
},
},
{
menuItem: {
name: 'Link2',
children: [
{
menuItem: {
name: 'link2-1',
link: '/home',
},
},
{
menuItem: {
name: 'link2-2',
children: [
{
menuItem: {
name: 'link2-1',
link: '/home',
},
},
{
menuItem: {
name: 'link2-2',
link: '/home',
},
},
{
menuItem: {
name: 'link2-3',
link: '/home',
},
},
],
},
},
{
menuItem: {
name: 'link2-3',
link: '/home',
},
},
],
},
},
];