From 45d3492209feececaff59c06dbf07296e19ae741 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Paczy=C5=84ski?= Date: Mon, 23 Oct 2023 11:35:53 +0200 Subject: [PATCH 1/4] Implement new navigation design --- src/shared/assets/nav_logo.svg | 23 +----- src/shared/components/Icon.tsx | 40 ++++++++-- src/ui/Nav/NavItem.tsx | 13 ++-- src/ui/Nav/NavItems.tsx | 74 ++++++++++++++++++ src/ui/Nav/index.tsx | 138 ++++----------------------------- 5 files changed, 130 insertions(+), 158 deletions(-) create mode 100644 src/ui/Nav/NavItems.tsx diff --git a/src/shared/assets/nav_logo.svg b/src/shared/assets/nav_logo.svg index 156bda1e5..ea75f4d10 100644 --- a/src/shared/assets/nav_logo.svg +++ b/src/shared/assets/nav_logo.svg @@ -1,22 +1,3 @@ - - - - - - - - - - - - - - - - - - - - - + + diff --git a/src/shared/components/Icon.tsx b/src/shared/components/Icon.tsx index cb73fb749..fe713d538 100644 --- a/src/shared/components/Icon.tsx +++ b/src/shared/components/Icon.tsx @@ -1,13 +1,17 @@ -import classNames from "classnames" +/* eslint-disable jsx-a11y/control-has-associated-label */ import React, { CSSProperties } from "react" +import classNames from "classnames" + +type IconType = "mask" | "image" type IconProps = { - type?: "mask" | "image" + type?: IconType src: string width?: string height?: string color?: string style?: CSSProperties + onClick?: () => void } export default function Icon({ @@ -17,15 +21,30 @@ export default function Icon({ src, color = "var(--off-white)", style, + onClick, }: IconProps) { + const isButton = !!onClick + + const classes = classNames("icon", { + [type]: true, + button: isButton, + }) + return ( <> -
+ {isButton ? ( + +
@@ -59,7 +56,7 @@ export default function Assistant() { position: absolute; height: 54px; width: 54px; - left: 14%; + left: 7%; top: 6%; background: #043937; z-index: -1;