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

feat: header menus

Browse Source
This commit is contained in:
Valery Grunenko
2025-06-26 16:12:20 +03:00
parent cbd1f97eba
commit 5c05f9c2bb
21 changed files with 792 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/entities/base-menu/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './ui';

106
src/entities/base-menu/styles.module.scss Normal file
View File

@@ -0,0 +1,106 @@
.ContainerNavbar {
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}
.Navbar {
margin: 0 auto;
width: rem(1540px);
height: 100px;
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
.Nav {
margin-left: auto;
.Menu {
display: flex;
flex-direction: row;
align-items: center;
gap: rem(24px);
}
.Parent {
display: block;
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;
}
.Parent: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%;
}
.Child li a {
color: $color-text;
}
ul {
list-style: none;
margin: 0;
padding: 0px;
min-width: 12em;
font-family: $font-montseratt;
font-weight: $font-medium;
font-size: rem(16px);
line-height: 100%;
color: $color-text;
}
ul ul ul {
left: 100%;
top: 0;
margin-left: 1px;
}
li:hover {
color: $color-link-hover;
}
.Parent li:hover {
background-color: $color-link-hover; //#F0F0F0
color: $color-white;
& > a {
color: $color-white;
}
& > .Expand {
color: $color-white;
}
}
.Expand {
font-size: 16px;
float: right;
margin-left: 8px;
color: $color-text
}
}
.Invite {
}
}

135
src/entities/base-menu/ui.tsx Normal file
View File

@@ -0,0 +1,135 @@
import s from './styles.module.scss';
import Image from 'next/image';
import dtrLogo from '@public/images/dtr-logo-eagle.png';
function BaseMenu() {
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>
<div className={s.Invite}>
<button>+7 (999) 123-45-67</button>
</div>
</div>
</section>
);
}
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',
},
},
],
},
},
];

2
src/entities/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export { TopMenu } from './top-menu';
export { BaseMenu } from './base-menu';

1
src/entities/top-menu/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './ui';

49
src/entities/top-menu/styles.module.scss Normal file
View File

@@ -0,0 +1,49 @@
.Container {
background: #007c6f;
padding: rem(8px) 0;
}
.Top {
margin: 0 auto;
width: rem(1540px);
display: flex;
justify-content: space-between;
.Icons {
display: flex;
flex-direction: row;
align-items: center;
gap: rem(20px);
.Icon {
cursor: pointer;
}
}
.Contacts {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: rem(60px);
.Item {
font-family: $font-roboto;
font-weight: $font-bold;
font-size: rem(16px);
line-height: 100%;
color: $color-white;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: rem(8px);
.IconBox {
padding: rem(4px);
border-radius: 50%;
background: $color-white;
}
}
}
}

35
src/entities/top-menu/ui.tsx Normal file
View File

@@ -0,0 +1,35 @@
import s from './styles.module.scss';
import {
CiPhoneIcon,
EnvelopeIcon,
MapIcon,
TgIcon,
WaIcon,
} from '@shared/ui/icon';
function TopMenu() {
return (
<section className={s.Container}>
<div className={s.Top}>
<div className={s.Icons}>
<WaIcon className={s.Icon} />
<TgIcon className={s.Icon} />
<CiPhoneIcon className={s.Icon} />
</div>
<div className={s.Contacts}>
<p className={s.Item}>
<EnvelopeIcon className={s.IconBox} />
spo-71@yandex.ru
</p>
<p className={s.Item}>
<MapIcon className={s.IconBox} />
г. Сочи, Навагинская д. 9д, оф. 35
</p>
</div>
</div>
</section>
);
}
export { TopMenu };