From 5121cf70fd5be3d99cf3969419e5e0c8080d7099 Mon Sep 17 00:00:00 2001 From: ilan7empest Date: Wed, 17 Sep 2025 10:56:39 +0300 Subject: [PATCH 01/17] Impl [Navbar] new look by Figma --- package.json | 4 +++- src/lib/components/index.js | 2 ++ src/lib/constants.js | 5 +++++ src/lib/elements/index.js | 2 ++ src/lib/images/users.svg | 4 ++-- src/lib/scss/colors.scss | 2 ++ src/lib/utils/index.js | 1 + 7 files changed, 17 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index b61b174e..462c9973 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,9 @@ "MLRun", "mlrun" ], + "dependencies": { + "@reduxjs/toolkit": "^2.9.0" + }, "peerDependencies": { "@reduxjs/toolkit": "*", "classnames": "*", @@ -59,7 +62,6 @@ }, "devDependencies": { "@eslint/js": "^9.19.0", - "@reduxjs/toolkit": "^2.8.2", "@storybook/addon-actions": "^8.0.0", "@storybook/addon-essentials": "^8.0.0", "@storybook/addon-interactions": "^8.0.0", diff --git a/src/lib/components/index.js b/src/lib/components/index.js index e6cf9ef1..45634658 100644 --- a/src/lib/components/index.js +++ b/src/lib/components/index.js @@ -37,6 +37,7 @@ import LoadButton from './LoadButton/LoadButton' import Loader from './Loader/Loader' import LoaderForSuspenseFallback from './Loader/LoaderForSuspenseFallback' import Modal from './Modal/Modal' +import Navbar from './Navbar/Navbar' import PopUpDialog from './PopUpDialog/PopUpDialog' import RoundedIcon from './RoundedIcon/RoundedIcon' import TableCell from './TableCell/TableCell' @@ -69,6 +70,7 @@ export { Loader, LoaderForSuspenseFallback, Modal, + Navbar, PopUpDialog, RoundedIcon, TableCell, diff --git a/src/lib/constants.js b/src/lib/constants.js index 7a393caf..ce28788c 100644 --- a/src/lib/constants.js +++ b/src/lib/constants.js @@ -83,3 +83,8 @@ export const MODAL_MAX = 'max' export const MAIN_TABLE_ID = 'main-table' export const MAIN_TABLE_BODY_ID = 'main-table-body' + +/*=========== NAVBAR =============*/ + +export const NAVBAR_WIDTH_CLOSED = 57 +export const NAVBAR_WIDTH_OPENED = 245 diff --git a/src/lib/elements/index.js b/src/lib/elements/index.js index 0dd0b67a..3883fbab 100644 --- a/src/lib/elements/index.js +++ b/src/lib/elements/index.js @@ -18,6 +18,7 @@ such restriction. import ActionsMenuItem from './ActionsMenuItem/ActionsMenuItem' import FormActionButton from './FormActionButton/FormActionButton' import FormRowActions from './FormRowActions/FormRowActions' +import NavbarLink from './NavbarLink/NavbarLink' import OptionsMenu from './OptionsMenu/OptionsMenu' import SelectOption from './SelectOption/SelectOption' import TableHead from './TableHead/TableHead' @@ -29,6 +30,7 @@ export { ActionsMenuItem, FormActionButton, FormRowActions, + NavbarLink, OptionsMenu, SelectOption, TableHead, diff --git a/src/lib/images/users.svg b/src/lib/images/users.svg index f47a4eb0..25d972e6 100644 --- a/src/lib/images/users.svg +++ b/src/lib/images/users.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/lib/scss/colors.scss b/src/lib/scss/colors.scss index cb2f1a98..550623fa 100644 --- a/src/lib/scss/colors.scss +++ b/src/lib/scss/colors.scss @@ -17,6 +17,8 @@ $cerulean: #00b6ed; $chateauGreen: #49af53; $cornflowerBlue: #6279e7; $cornflowerBlueTwo: #5871f4; +$cultured: #f9f8f8; +$crystalBell: #efefef; $darkPurple: #2f2b46; $doveGray: #666; $doveGrayTwo: #6e6e6e; diff --git a/src/lib/utils/index.js b/src/lib/utils/index.js index f6d0c353..79d94591 100644 --- a/src/lib/utils/index.js +++ b/src/lib/utils/index.js @@ -22,6 +22,7 @@ export * as filter from './filter.util' export * as form from './form.util' export * as generateChipsList from './generateChipsList.util' export * as getFirstScrollableParent from './getFirstScrollableParent.util' +export * as localStorageService from './localStorageService.util' export * as math from './math.util' export * as notification from './notification.util' export * as string from './string.util' From 5956c4888e123713ae2eb68e23645da0129dd94c Mon Sep 17 00:00:00 2001 From: ilan7empest Date: Wed, 17 Sep 2025 10:56:46 +0300 Subject: [PATCH 02/17] Impl [Navbar] new look by Figma --- src/lib/components/Navbar/Navbar.jsx | 105 +++++++++++++++ src/lib/components/Navbar/Navbar.scss | 135 ++++++++++++++++++++ src/lib/elements/NavbarLink/NavbarLink.jsx | 82 ++++++++++++ src/lib/elements/NavbarLink/NavbarLink.scss | 106 +++++++++++++++ src/lib/images/navbar/group-navbar-icon.svg | 3 + src/lib/images/navbar/users-navbar-icon.svg | 3 + src/lib/images/users-delete.svg | 3 + src/lib/utils/localStorageService.util.js | 35 +++++ 8 files changed, 472 insertions(+) create mode 100644 src/lib/components/Navbar/Navbar.jsx create mode 100644 src/lib/components/Navbar/Navbar.scss create mode 100644 src/lib/elements/NavbarLink/NavbarLink.jsx create mode 100644 src/lib/elements/NavbarLink/NavbarLink.scss create mode 100644 src/lib/images/navbar/group-navbar-icon.svg create mode 100644 src/lib/images/navbar/users-navbar-icon.svg create mode 100644 src/lib/images/users-delete.svg create mode 100644 src/lib/utils/localStorageService.util.js diff --git a/src/lib/components/Navbar/Navbar.jsx b/src/lib/components/Navbar/Navbar.jsx new file mode 100644 index 00000000..6e2180d3 --- /dev/null +++ b/src/lib/components/Navbar/Navbar.jsx @@ -0,0 +1,105 @@ +/* +Copyright 2019 Iguazio Systems Ltd. + +Licensed under the Apache License, Version 2.0 (the "License") with +an addition restriction as set forth herein. You may not use this +file except in compliance with the License. You may obtain a copy of +the License at http://www.apache.org/licenses/LICENSE-2.0. + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or +implied. See the License for the specific language governing +permissions and limitations under the License. + +In addition, you may not use the software for any purposes that are +illegal under applicable law, and the grant of the foregoing license +under the Apache 2.0 license is conditioned upon your compliance with +such restriction. +*/ +import React, { useState, useRef, useEffect } from 'react' +import PropTypes from 'prop-types' +import classNames from 'classnames' + +import { RoundedIcon } from '../../components' +import { NAVBAR_WIDTH_OPENED } from '../../constants' +import {localStorageService} from '../../utils' + +import PinIcon from '../../images/pin-icon.svg?react' +import UnPinIcon from '../../images/unpin-icon.svg?react' + +import './Navbar.scss' + +const Navbar = ({ children, id = 'navbar', setIsNavbarPinned }) => { + const [isPinned, setIsPinned] = useState( + localStorageService.getStorageValue('isNavbarStatic', false) === 'true' + ) + const navbarRef = useRef(null) + + const navbarClasses = classNames('navbar', isPinned && 'navbar_pinned') + const navbarStyles = { + maxWidth: isPinned && NAVBAR_WIDTH_OPENED + } + + const handlePinClick = () => { + setIsPinned(prevIsPinned => { + localStorageService.setStorageValue('isNavbarStatic', !prevIsPinned) + return !prevIsPinned + }) + } + + useEffect(() => { + setIsNavbarPinned(isPinned) + }, [isPinned, setIsNavbarPinned]) + + + + return ( +
+ + {isPinned ? : } + +
+ {React.cloneElement(children, { IsNavbarPinned: isPinned })} + + ) +} + +Navbar.Body = ({ children }) => ( +
+ {children} +
+) + +Navbar.Body.displayName = 'Navbar.Body' + +Navbar.Divider = () =>
+ +Navbar.Divider.displayName = 'Navbar.Divider' + +Navbar.Body.propTypes = { + children: PropTypes.node.isRequired +} + +Navbar.propTypes = { + children: PropTypes.oneOfType([ + PropTypes.element, + PropTypes.object, + PropTypes.node, + PropTypes.string + ]).isRequired, + id: PropTypes.string, + setIsNavbarPinned: PropTypes.func +} + +export default Navbar diff --git a/src/lib/components/Navbar/Navbar.scss b/src/lib/components/Navbar/Navbar.scss new file mode 100644 index 00000000..d0eb5059 --- /dev/null +++ b/src/lib/components/Navbar/Navbar.scss @@ -0,0 +1,135 @@ +@use '../../scss/variables'; +@use '../../scss/colors'; +@use '../../scss/borders'; + +.navbar { + display: flex; + flex-flow: column nowrap; + flex-grow: 1; + flex-shrink: 0; + flex-basis: 245px; + position: absolute; + top: 0; + left: 0; + z-index: 11; + height: 100%; + width: 245px; + max-width: 57px; + border-right: borders.$tertiaryBorder; + background-color: colors.$cultured; + transition: max-width 0.3s ease-in-out; + + &:hover { + max-width: 245px; + + .navbar__pin-icon { + opacity: 1; + visibility: visible; + } + } + + &:hover, + &.navbar_pinned { + .navbar__body { + overflow-y: auto; + } + + .nav-link__button { + padding: 0 8px 0 24px; + } + + .nav-link__button.expended { + & + .navbar-links_nested { + max-height: 30rem; + transition: max-height 0.3s ease-in-out; + } + } + } + + .nav-link { + &__icon { + display: flex; + opacity: 1; + flex: 0 0 auto; + transition: opacity 0.3s ease-in-out; + + svg { + flex: 0 0 20px; + width: 20px; + height: 20px; + + & * { + fill: colors.$topaz; + } + } + } + } + + &__divider { + border-top: 1px solid colors.$mischka; + margin: 0 1rem; + } + + &__body { + position: relative; + z-index: 2; + display: flex; + flex-flow: column nowrap; + justify-content: flex-start; + width: 100%; + height: 100%; + overflow: hidden; + transition: padding 0.3s ease-in-out; + } + + &-links { + display: flex; + flex: 0 0 auto; + flex-flow: column nowrap; + max-width: 238px; + margin: 0.5rem 0; + padding: 0 10px 0 0; + width: 100%; + list-style-type: none; + + &.navbar-links_nested { + max-height: 0; + padding: 0; + margin: 0; + overflow: hidden; + transition: max-height 0.3s ease-in-out; + + .nav-link__button { + padding-left: 54px; + } + + & > *:first-child { + margin-top: 10px; + } + } + } + + &__pin { + &-icon { + position: absolute; + display: flex; + justify-content: flex-end; + padding: 5px; + opacity: 0; + top: 10px; + right: -45px; + background-color: colors.$cultured; + border-radius: 0 8px 8px 0; + border-width: 1px 1px 1px 0; + border-color: colors.$mischka; + border-style: solid; + visibility: hidden; + transition: all 0.3s ease-in-out; + + button { + width: 28px; + height: 28px; + } + } + } +} diff --git a/src/lib/elements/NavbarLink/NavbarLink.jsx b/src/lib/elements/NavbarLink/NavbarLink.jsx new file mode 100644 index 00000000..c4accc8e --- /dev/null +++ b/src/lib/elements/NavbarLink/NavbarLink.jsx @@ -0,0 +1,82 @@ +/* +Copyright 2019 Iguazio Systems Ltd. + +Licensed under the Apache License, Version 2.0 (the "License") with +an addition restriction as set forth herein. You may not use this +file except in compliance with the License. You may obtain a copy of +the License at http://www.apache.org/licenses/LICENSE-2.0. + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or +implied. See the License for the specific language governing +permissions and limitations under the License. + +In addition, you may not use the software for any purposes that are +illegal under applicable law, and the grant of the foregoing license +under the Apache 2.0 license is conditioned upon your compliance with +such restriction. +*/ +import React from 'react' +import { NavLink, useLocation } from 'react-router-dom' +import classNames from 'classnames' +import PropTypes from 'prop-types' + +import ArrowIcon from '../../images/arrow.svg?react' + +import './NavbarLink.scss' + + +const NavbarLink = ({ externalLink = false, icon = null, index = null, label, link = '', selectedIndex = null, setSelectedIndex, ...props }) => { + const { pathname } = useLocation() + + const parentLinkClasses = classNames( + 'nav-link__button btn nav-link__parent', + pathname.includes(props.id || link) && 'active', + index === selectedIndex && 'expended' + ) + + const handleExpanded = () => { + if (index !== selectedIndex) { + setSelectedIndex && setSelectedIndex(index) + } else { + setSelectedIndex && setSelectedIndex(null) + } + + } + + return externalLink ? ( + + {icon} + {label} + + ) : props.nestedLinks ? ( +
+ {icon} + {label} + + + + +
+ ) : ( + + {icon} + {label} + + ) +} + +NavbarLink.propTypes = { + externalLink: PropTypes.bool, + icon: PropTypes.object, + id: PropTypes.string, + index: PropTypes.number, + label: PropTypes.string.isRequired, + link: PropTypes.string, + nestedLinks: PropTypes.array, + selectedIndex: PropTypes.number, + setSelectedIndex: PropTypes.func, +} + +export default React.memo(NavbarLink) diff --git a/src/lib/elements/NavbarLink/NavbarLink.scss b/src/lib/elements/NavbarLink/NavbarLink.scss new file mode 100644 index 00000000..9478ad7f --- /dev/null +++ b/src/lib/elements/NavbarLink/NavbarLink.scss @@ -0,0 +1,106 @@ +@use '../../scss/colors'; + +.nav-link { + margin-bottom: 5px; + + &:last-child { + margin: 0; + } + + &__arrow { + flex: 1; + display: flex; + justify-content: end; + + svg { + transition: transform 0.2s ease-in-out; + } + } + + &__button { + position: relative; + flex-flow: row nowrap; + justify-content: flex-start; + width: 100%; + min-height: 48px; + min-width: 48px; + padding: 0 8px 0 18px; + color: colors.$primary; + font-weight: normal; + background-color: transparent; + border: none; + border-radius: 0 8px 8px 0; + white-space: nowrap; + cursor: pointer; + transition: all 0.3s ease-in-out; + + &.active, + &.active:hover { + &:not(:disabled):not(.nav-link__parent) { + background-color: colors.$crystalBell; + cursor: default; + + &::before { + content: ''; + border: 2px solid colors.$malibu; + height: 100%; + position: absolute; + left: 0; + } + } + + &.nav-link__parent { + background-color: colors.$crystalBell; + font-weight: bold; + cursor: pointer; + } + } + + &.expended { + &:not(:disabled):not(.active) { + background-color: inherit; + } + + .nav-link__arrow { + svg { + transform: rotate(90deg); + } + } + + &.nav-link__parent { + font-weight: bold; + cursor: pointer; + } + } + + &:hover, + &:focus-visible, + &.expended { + background-color: colors.$crystalBell; + outline: none; + transition: all 0.3s ease-in-out; + + svg { + & * { + fill: colors.$topaz; + } + } + } + + &:focus, + &:active { + border-color: transparent; + } + } + + &__label { + opacity: 0; + transition: opacity 0.3s ease-in-out; + + .navbar:hover &, + .navbar.navbar_hovered &, + .navbar.navbar_pinned & { + opacity: 1; + } + } +} diff --git a/src/lib/images/navbar/group-navbar-icon.svg b/src/lib/images/navbar/group-navbar-icon.svg new file mode 100644 index 00000000..63e76087 --- /dev/null +++ b/src/lib/images/navbar/group-navbar-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/lib/images/navbar/users-navbar-icon.svg b/src/lib/images/navbar/users-navbar-icon.svg new file mode 100644 index 00000000..d9a849bd --- /dev/null +++ b/src/lib/images/navbar/users-navbar-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/lib/images/users-delete.svg b/src/lib/images/users-delete.svg new file mode 100644 index 00000000..f47a4eb0 --- /dev/null +++ b/src/lib/images/users-delete.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/lib/utils/localStorageService.util.js b/src/lib/utils/localStorageService.util.js new file mode 100644 index 00000000..af9d1e1d --- /dev/null +++ b/src/lib/utils/localStorageService.util.js @@ -0,0 +1,35 @@ +/* +Copyright 2019 Iguazio Systems Ltd. + +Licensed under the Apache License, Version 2.0 (the "License") with +an addition restriction as set forth herein. You may not use this +file except in compliance with the License. You may obtain a copy of +the License at http://www.apache.org/licenses/LICENSE-2.0. + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or +implied. See the License for the specific language governing +permissions and limitations under the License. + +In addition, you may not use the software for any purposes that are +illegal under applicable law, and the grant of the foregoing license +under the Apache 2.0 license is conditioned upon your compliance with +such restriction. +*/ +export const getStorageValue = (key, defaultValue) => { + if (typeof window !== 'undefined') { + try { + const saved = localStorage.getItem(key) + + return saved !== null ? saved : defaultValue + } catch (err) { + /* eslint-disable-next-line no-console */ + console.log(err) + } + } +} + +export const setStorageValue = (key, defaultValue) => { + localStorage.setItem(key, defaultValue) +} From 869c3f82fbca4007e50ca55fda8a4c98e3c2c139 Mon Sep 17 00:00:00 2001 From: ilan7empest Date: Wed, 17 Sep 2025 17:02:10 +0300 Subject: [PATCH 03/17] Impl [Navbar] new look by Figma --- src/lib/components/Navbar/Navbar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/Navbar/Navbar.scss b/src/lib/components/Navbar/Navbar.scss index d0eb5059..b2d7be48 100644 --- a/src/lib/components/Navbar/Navbar.scss +++ b/src/lib/components/Navbar/Navbar.scss @@ -104,7 +104,7 @@ } & > *:first-child { - margin-top: 10px; + margin-top: 5px; } } } From ab566fda0cbbd6462d602735a8840183d16bac76 Mon Sep 17 00:00:00 2001 From: ilan7empest Date: Fri, 19 Sep 2025 14:16:03 +0300 Subject: [PATCH 04/17] Impl [Navbar] new look by Figma --- src/lib/elements/NavbarLink/NavbarLink.jsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/lib/elements/NavbarLink/NavbarLink.jsx b/src/lib/elements/NavbarLink/NavbarLink.jsx index c4accc8e..2aadf6a2 100644 --- a/src/lib/elements/NavbarLink/NavbarLink.jsx +++ b/src/lib/elements/NavbarLink/NavbarLink.jsx @@ -32,17 +32,20 @@ const NavbarLink = ({ externalLink = false, icon = null, index = null, label, li const parentLinkClasses = classNames( 'nav-link__button btn nav-link__parent', - pathname.includes(props.id || link) && 'active', + (pathname.includes(props.id || link) || props?.screens && props.screens.some(screen => pathname.includes(screen))) && 'active', index === selectedIndex && 'expended' ) const handleExpanded = () => { - if (index !== selectedIndex) { - setSelectedIndex && setSelectedIndex(index) - } else { - setSelectedIndex && setSelectedIndex(null) + if (setSelectedIndex) { + if (index !== selectedIndex) { + setSelectedIndex(index) + } else { + setSelectedIndex(null) + } } + return } return externalLink ? ( @@ -75,6 +78,7 @@ NavbarLink.propTypes = { label: PropTypes.string.isRequired, link: PropTypes.string, nestedLinks: PropTypes.array, + screens: PropTypes.array, selectedIndex: PropTypes.number, setSelectedIndex: PropTypes.func, } From 7bb5850dc98bcef945c947e5cf3077909ff92e52 Mon Sep 17 00:00:00 2001 From: ilan7empest Date: Fri, 19 Sep 2025 14:38:09 +0300 Subject: [PATCH 05/17] Impl [Navbar] new look by Figma --- src/lib/components/Navbar/Navbar.scss | 2 +- src/lib/elements/NavbarLink/NavbarLink.scss | 15 +++++++++++++++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/src/lib/components/Navbar/Navbar.scss b/src/lib/components/Navbar/Navbar.scss index b2d7be48..cca626a2 100644 --- a/src/lib/components/Navbar/Navbar.scss +++ b/src/lib/components/Navbar/Navbar.scss @@ -100,7 +100,7 @@ transition: max-height 0.3s ease-in-out; .nav-link__button { - padding-left: 54px; + padding-left: 44px; } & > *:first-child { diff --git a/src/lib/elements/NavbarLink/NavbarLink.scss b/src/lib/elements/NavbarLink/NavbarLink.scss index 9478ad7f..e951fad9 100644 --- a/src/lib/elements/NavbarLink/NavbarLink.scss +++ b/src/lib/elements/NavbarLink/NavbarLink.scss @@ -53,6 +53,21 @@ background-color: colors.$crystalBell; font-weight: bold; cursor: pointer; + + &::before { + content: ''; + border: 2px solid colors.$malibu; + height: 100%; + position: absolute; + left: 0; + transition: border-color 0.3s ease-in-out; + + .navbar:hover &, + .navbar.navbar_hovered &, + .navbar.navbar_pinned & { + border-color: transparent; + } + } } } From 9953b80df8127f6a62f60b3b54e891ebe7f5bfc2 Mon Sep 17 00:00:00 2001 From: ilan7empest Date: Wed, 8 Oct 2025 14:03:24 +0300 Subject: [PATCH 06/17] Impl [Navbar] new look by Figma --- src/lib/components/Navbar/Navbar.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/Navbar/Navbar.jsx b/src/lib/components/Navbar/Navbar.jsx index 6e2180d3..10db0d79 100644 --- a/src/lib/components/Navbar/Navbar.jsx +++ b/src/lib/components/Navbar/Navbar.jsx @@ -63,7 +63,7 @@ const Navbar = ({ children, id = 'navbar', setIsNavbarPinned }) => { >
From 8ae70489ad0f493dad5b1ac7167561fef6dc290b Mon Sep 17 00:00:00 2001 From: ilan7empest Date: Wed, 22 Oct 2025 23:40:09 +0300 Subject: [PATCH 07/17] Change navbar pin icon --- src/lib/components/Navbar/Navbar.jsx | 17 ++++++++++------- src/lib/components/Navbar/Navbar.scss | 8 ++++---- src/lib/images/navbar/navbar-closed-icon.svg | 3 +++ src/lib/images/navbar/navbar-opened-icon.svg | 3 +++ 4 files changed, 20 insertions(+), 11 deletions(-) create mode 100644 src/lib/images/navbar/navbar-closed-icon.svg create mode 100644 src/lib/images/navbar/navbar-opened-icon.svg diff --git a/src/lib/components/Navbar/Navbar.jsx b/src/lib/components/Navbar/Navbar.jsx index 10db0d79..654b61ff 100644 --- a/src/lib/components/Navbar/Navbar.jsx +++ b/src/lib/components/Navbar/Navbar.jsx @@ -21,12 +21,14 @@ import React, { useState, useRef, useEffect } from 'react' import PropTypes from 'prop-types' import classNames from 'classnames' -import { RoundedIcon } from '../../components' +import Tooltip from '../Tooltip/Tooltip' +import TextTooltipTemplate from '../TooltipTemplate/TextTooltipTemplate' + import { NAVBAR_WIDTH_OPENED } from '../../constants' import {localStorageService} from '../../utils' -import PinIcon from '../../images/pin-icon.svg?react' -import UnPinIcon from '../../images/unpin-icon.svg?react' +import NavbarClosedIcon from '../../images/navbar/navbar-closed-icon.svg?react' +import NavbarOpenedIcon from '../../images/navbar/navbar-opened-icon.svg?react' import './Navbar.scss' @@ -62,13 +64,14 @@ const Navbar = ({ children, id = 'navbar', setIsNavbarPinned }) => { ref={navbarRef} >
- - {isPinned ? : } - + }> + {isPinned ? : } + +
{React.cloneElement(children, { IsNavbarPinned: isPinned })} diff --git a/src/lib/components/Navbar/Navbar.scss b/src/lib/components/Navbar/Navbar.scss index cca626a2..71721ecc 100644 --- a/src/lib/components/Navbar/Navbar.scss +++ b/src/lib/components/Navbar/Navbar.scss @@ -114,7 +114,7 @@ position: absolute; display: flex; justify-content: flex-end; - padding: 5px; + padding: 5px 10px; opacity: 0; top: 10px; right: -45px; @@ -126,9 +126,9 @@ visibility: hidden; transition: all 0.3s ease-in-out; - button { - width: 28px; - height: 28px; + &:hover { + cursor: pointer; + background-color: colors.$crystalBell; } } } diff --git a/src/lib/images/navbar/navbar-closed-icon.svg b/src/lib/images/navbar/navbar-closed-icon.svg new file mode 100644 index 00000000..ad64e684 --- /dev/null +++ b/src/lib/images/navbar/navbar-closed-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/lib/images/navbar/navbar-opened-icon.svg b/src/lib/images/navbar/navbar-opened-icon.svg new file mode 100644 index 00000000..ff75e8b9 --- /dev/null +++ b/src/lib/images/navbar/navbar-opened-icon.svg @@ -0,0 +1,3 @@ + + + From 9b99872bf8799050b39aca02b810ea07e864d41b Mon Sep 17 00:00:00 2001 From: ilan7empest Date: Thu, 23 Oct 2025 11:17:44 +0300 Subject: [PATCH 08/17] Add header projects icon --- src/lib/images/ig4-header-projects-icon.svg | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 src/lib/images/ig4-header-projects-icon.svg diff --git a/src/lib/images/ig4-header-projects-icon.svg b/src/lib/images/ig4-header-projects-icon.svg new file mode 100644 index 00000000..e9531fee --- /dev/null +++ b/src/lib/images/ig4-header-projects-icon.svg @@ -0,0 +1,4 @@ + + + + From 52ec1bd0f429a7bc52e096117b25e3e23906f070 Mon Sep 17 00:00:00 2001 From: ilan7empest Date: Sun, 26 Oct 2025 11:26:55 +0200 Subject: [PATCH 09/17] Replace navbar toogle icons --- src/lib/images/navbar/navbar-closed-icon.svg | 9 ++++++++- src/lib/images/navbar/navbar-opened-icon.svg | 9 ++++++++- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/lib/images/navbar/navbar-closed-icon.svg b/src/lib/images/navbar/navbar-closed-icon.svg index ad64e684..d5b69ed2 100644 --- a/src/lib/images/navbar/navbar-closed-icon.svg +++ b/src/lib/images/navbar/navbar-closed-icon.svg @@ -1,3 +1,10 @@ - + + + + + + + + diff --git a/src/lib/images/navbar/navbar-opened-icon.svg b/src/lib/images/navbar/navbar-opened-icon.svg index ff75e8b9..068bd8cd 100644 --- a/src/lib/images/navbar/navbar-opened-icon.svg +++ b/src/lib/images/navbar/navbar-opened-icon.svg @@ -1,3 +1,10 @@ - + + + + + + + + From 82420de385f7dbaac1cbec24b0b57511ac8fee62 Mon Sep 17 00:00:00 2001 From: ilan7empest Date: Tue, 28 Oct 2025 11:33:26 +0200 Subject: [PATCH 10/17] Fix code by prettier --- src/lib/components/Navbar/Navbar.jsx | 16 +++---------- src/lib/elements/NavbarLink/NavbarLink.jsx | 27 +++++++++++++++++----- 2 files changed, 24 insertions(+), 19 deletions(-) diff --git a/src/lib/components/Navbar/Navbar.jsx b/src/lib/components/Navbar/Navbar.jsx index 654b61ff..3d6ca3dd 100644 --- a/src/lib/components/Navbar/Navbar.jsx +++ b/src/lib/components/Navbar/Navbar.jsx @@ -25,7 +25,7 @@ import Tooltip from '../Tooltip/Tooltip' import TextTooltipTemplate from '../TooltipTemplate/TextTooltipTemplate' import { NAVBAR_WIDTH_OPENED } from '../../constants' -import {localStorageService} from '../../utils' +import { localStorageService } from '../../utils' import NavbarClosedIcon from '../../images/navbar/navbar-closed-icon.svg?react' import NavbarOpenedIcon from '../../images/navbar/navbar-opened-icon.svg?react' @@ -54,20 +54,10 @@ const Navbar = ({ children, id = 'navbar', setIsNavbarPinned }) => { setIsNavbarPinned(isPinned) }, [isPinned, setIsNavbarPinned]) - - return ( -