Skip to content

Commit ade4a2a

Browse files
dimakorzhovnikdimakorzhovnik
authored
Merge branch 'dev' into fix/fixes-dev-redisign-2
2 parents c3f2f5c + 86905b9 commit ade4a2a

File tree

14 files changed

+312
-86
lines changed

14 files changed

+312
-86
lines changed

‎src/components/HydrogenBalance/HydrogenBalance.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
11
import { useGetBalanceBostrom } from 'src/containers/sigma/hooks';
2-
import { Link } from 'react-router-dom';
2+
import SideButtonLink from '../sideButtonLink/SideButtonLink';
33
import { routes } from 'src/routes';
44
import IconsNumber from '../IconsNumber/IconsNumber';
55

6-
function HydrogenBalance({ address, className, isVertical }) {
6+
function HydrogenBalance({ address, isVertical }) {
77
const { totalAmountInLiquid } = useGetBalanceBostrom(address);
88

99
return (
10-
<Link to={`${routes.neuron.getLink(address)}/sigma`} className={className}>
10+
<SideButtonLink
11+
to={`${routes.neuron.getLink(address)}/sigma`}
12+
buttonType="hydrogen"
13+
>
1114
<IconsNumber
1215
value={totalAmountInLiquid.currentCap}
1316
type="hydrogen"
1417
isVertical={isVertical}
1518
/>
16-
</Link>
19+
</SideButtonLink>
1720
);
1821
}
1922

‎src/components/appMenu/CircularMenu.module.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@
2020

2121
.menu li {
2222
grid-area: 1/1;
23-
transform: rotate(calc(var(--r) + var(--delta))) translateX(var(--diameter)) rotate(calc(-1 * (var(--r) + var(--delta))));
23+
transform: rotate(calc(var(--r) + var(--delta))) translateX(var(--diameter))
24+
rotate(calc(-1 * (var(--r) + var(--delta))));
2425
}
2526

2627
.menu li:nth-child(1) {
@@ -49,4 +50,5 @@
4950

5051
.menu li:nth-child(7) {
5152
--r: calc(1 * var(--i));
52-
}
53+
}
54+

‎src/components/appMenu/CircularMenuItem.module.scss‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,22 +14,29 @@
1414

1515
.menu_item.active {
1616
border: 1px solid #ffffff6b;
17-
box-shadow: 0px 0px 8px #ffffff4d inset, 0px 0px 13px #ffffff4d;
17+
box-shadow: 0px 0px 8px #ffffff98 inset, 0px 0px 13px #ffffff98;
1818
width: 100%;
1919
height: 100%;
2020
}
2121

22+
.menu_item:hover {
23+
border: 1px solid #4ed6ae;
24+
box-shadow: 0px 0px 8px #4ed6ae inset, 0px 0px 13px #4ed6ae;
25+
}
26+
2227
.itemContainer {
2328
position: inherit;
2429
display: flex;
2530
}
2631

27-
2832
.icon {
2933
width: 30px;
3034
height: 30px;
3135
object-fit: fill;
3236
border-radius: 50%;
37+
justify-content: center;
38+
align-items: center;
39+
display: flex;
3340
}
3441

3542
.external {
@@ -42,4 +49,4 @@
4249
height: 20px;
4350

4451
@include withShareIcon;
45-
}
52+
}

‎src/components/appMenu/CircularMenuItem.tsx‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { NavLink } from 'react-router-dom';
22
import cx from 'classnames';
33
import { MenuItem } from 'src/types/menu';
4+
import AdviserHoverWrapper from 'src/features/adviser/AdviserHoverWrapper/AdviserHoverWrapper';
45
import styles from './CircularMenuItem.module.scss';
56

67
interface Props {
@@ -14,15 +15,18 @@ function CircularMenuItem({ item, onClick, selected }: Props) {
1415

1516
return (
1617
<div className={cx(styles.menu_item, { [styles.active]: selected })}>
17-
<NavLink
18-
to={item.to}
19-
onClick={onClick}
20-
className={styles.itemContainer}
21-
{...(isExternal && { target: '_blank', rel: 'noreferrer noopener' })}
22-
>
23-
<img src={item.icon} className={styles.icon} alt="img" />
24-
{isExternal && <span className={styles.external} />}
25-
</NavLink>
18+
<AdviserHoverWrapper adviserContent={item.name}>
19+
<NavLink
20+
to={item.to}
21+
onClick={onClick}
22+
style={{ position: 'inherit' }}
23+
{...(isExternal && { target: '_blank', rel: 'noreferrer noopener' })}
24+
>
25+
<img src={item.icon} className={styles.icon} alt="img" />
26+
{isExternal && <span className={styles.external}></span>}
27+
</NavLink>
28+
</AdviserHoverWrapper>
29+
2630
</div>
2731
);
2832
}

‎src/components/appMenu/MobileMenu.module.scss‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
@import '../../style/mixins.scss';
2+
3+
.mobileMenu {
4+
position: fixed;
5+
padding: 20px;
6+
bottom: 0;
7+
left: 0;
8+
width: 100%;
9+
align-items: center;
10+
justify-content: center;
11+
display: flex;
12+
justify-content: space-between;
13+
14+
&.closed {
15+
pointer-events: none;
16+
17+
.menuButton {
18+
pointer-events: auto;
19+
}
20+
}
21+
22+
&.open {
23+
pointer-events: auto;
24+
}
25+
}
26+
27+
.menuButton {
28+
visibility: visible !important;
29+
grid-area: 2/ 1/ 2/ 1;
30+
31+
background-color: #101010;
32+
border-radius: 50%;
33+
width: 38px;
34+
height: 38px;
35+
display: flex;
36+
justify-content: center;
37+
align-items: center;
38+
box-shadow: 0px 0px 13px #ffffff54;
39+
40+
&.active {
41+
border: 1px solid #ffffff6b;
42+
box-shadow: 0px 0px 8px #ffffff4d inset, 0px 0px 13px #ffffff4d;
43+
}
44+
}
45+
46+
.icon {
47+
width: 30px;
48+
height: 30px;
49+
object-fit: fill;
50+
border-radius: 50%;
51+
}
52+
53+
.menuContent {
54+
display: grid;
55+
grid-template-columns: repeat(6, 1fr);
56+
grid-template-rows: repeat(2, 1fr);
57+
grid-auto-flow: column;
58+
grid-gap: 20px;
59+
}
60+
61+
.menuItem {
62+
background-color: #101010;
63+
border-radius: 50%;
64+
width: 38px;
65+
height: 38px;
66+
display: flex;
67+
justify-content: center;
68+
align-items: center;
69+
box-shadow: 0px 0px 13px #ffffff54;
70+
71+
img {
72+
width: 30px;
73+
height: 30px;
74+
}
75+
}
76+
77+
.visible {
78+
visibility: visible;
79+
}
80+
81+
.hidden {
82+
visibility: hidden;
83+
}
84+
85+
.external {
86+
display: block;
87+
position: absolute;
88+
transform: translate(50%, 50%);
89+
width: 20px;
90+
height: 20px;
91+
92+
@include withShareIcon;
93+
}

‎src/components/appMenu/MobileMenu.tsx‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { useState, useEffect } from 'react';
2+
import { useLocation, NavLink } from 'react-router-dom';
3+
import itemsMenu from 'src/utils/appsMenu';
4+
import styles from './MobileMenu.module.scss';
5+
import { MenuItem } from 'src/types/menu';
6+
import cx from 'classnames';
7+
8+
const MobileMenu = () => {
9+
const [isOpen, setIsOpen] = useState(false);
10+
const [activeItem, setActiveItem] = useState<MenuItem | null>(null);
11+
const location = useLocation();
12+
13+
const toggleMenu = () => setIsOpen(!isOpen);
14+
15+
const isActiveItem = (item: MenuItem) => {
16+
if (location.pathname === item.to) {
17+
return true;
18+
}
19+
if (
20+
item.to === '/robot' &&
21+
(location.pathname.includes('@') || location.pathname.includes('neuron/'))
22+
) {
23+
return true;
24+
}
25+
if (item.to === '/senate' && location.pathname.startsWith('/senate/')) {
26+
return true;
27+
}
28+
return item.subItems?.some((subItem) => location.pathname === subItem.to);
29+
};
30+
31+
useEffect(() => {
32+
const activeMenuItem = itemsMenu().find((item) => isActiveItem(item));
33+
setActiveItem(activeMenuItem || null);
34+
}, [location]);
35+
36+
return (
37+
<div
38+
className={cx(styles.mobileMenu, {
39+
[styles.open]: isOpen,
40+
[styles.closed]: !isOpen,
41+
})}
42+
>
43+
<div
44+
className={cx(styles.menuContent, {
45+
[styles.visible]: isOpen,
46+
[styles.hidden]: !isOpen,
47+
})}
48+
>
49+
<button
50+
className={cx(styles.menuButton, { [styles.active]: isOpen })}
51+
onClick={toggleMenu}
52+
>
53+
<img src={activeItem?.icon} className={styles.icon} />
54+
</button>
55+
{itemsMenu().map((item, index) => {
56+
const isExternal = item.to.startsWith('http');
57+
return (
58+
!isActiveItem(item) && (
59+
<NavLink
60+
key={index}
61+
to={item.to}
62+
className={styles.menuItem}
63+
onClick={toggleMenu}
64+
{...(isExternal && {
65+
target: '_blank',
66+
rel: 'noreferrer noopener',
67+
})}
68+
>
69+
<img src={item.icon} className={styles.icon} alt="img" />
70+
{isExternal && <span className={styles.external}></span>}
71+
</NavLink>
72+
)
73+
);
74+
})}
75+
</div>
76+
</div>
77+
);
78+
};
79+
80+
export default MobileMenu;

‎src/components/sideButtonLink/SideButtonLink.module.scss‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
.main {
2+
display: flex;
3+
position: fixed;
4+
z-index: 3;
5+
top: 45%;
6+
padding: 40px 10px;
7+
backdrop-filter: blur(15px);
8+
border-radius: 50px;
9+
10+
> span {
11+
font-size: 14px;
12+
margin-top: 5px;
13+
color: white;
14+
15+
&:last-of-type {
16+
margin-top: 4px;
17+
font-size: 16px;
18+
}
19+
}
20+
21+
&:hover {
22+
transition: all 0.3s;
23+
background-color: var(--green-light);
24+
25+
span {
26+
color: var(--green-light);
27+
}
28+
}
29+
}
30+
31+
.sense {
32+
flex-direction: column;
33+
padding-left: 3px;
34+
background: linear-gradient(
35+
to right,
36+
black 90%,
37+
rgba(255, 255, 255, 0.5) 100%
38+
);
39+
40+
&:hover {
41+
padding-right: 30px;
42+
}
43+
}
44+
45+
.hydrogen {
46+
right: 0;
47+
align-items: center;
48+
background: linear-gradient(
49+
to left,
50+
black 90%,
51+
rgba(255, 255, 255, 0.5) 100%
52+
);
53+
54+
&:hover {
55+
padding-left: 30px;
56+
}
57+
}
58+
59+
.hydrogen div {
60+
display: flex;
61+
flex-direction: column;
62+
margin-left: 5px;
63+
}

‎src/components/sideButtonLink/SideButtonLink.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Link } from 'react-router-dom';
2+
import cx from 'classnames';
3+
import styles from './SideButtonLink.module.scss';
4+
5+
type ContainerLinkProps = {
6+
to: string;
7+
buttonType: 'sense' | 'hydrogen';
8+
children: React.ReactNode;
9+
};
10+
11+
function SideButtonLink({ to, buttonType, children }: ContainerLinkProps ) {
12+
return (
13+
<Link to={to} className={cx(styles.main, styles[buttonType])}>
14+
{children}
15+
</Link>
16+
);
17+
}
18+
19+
export default SideButtonLink;

‎src/containers/application/App.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -121,8 +121,8 @@ function App() {
121121
)}
122122

123123
{![
124-
routes.home.path,
125-
routes.teleport.path,
124+
/* routes.home.path, */
125+
/* routes.teleport.path, */
126126
// cybernetRoutes.verse.path,
127127
].some((path) => {
128128
return matchPath(path, location.pathname);

0 commit comments

Comments
 (0)