BA-2345-change-link-navigation-from-navbar

packages/components/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @baseapp-frontend/components
 
+## 1.0.21
+
+### Patch Changes
+
+- Change `Link` component in `NavItem`, to use Link from next/link instead of Material UI Link.
+- Change `Header` border bottom from dashed to solid
+
 ## 1.0.20
 
 ### Patch Changes

packages/components/modules/navigations/web/Header/styled.tsx

@@ -31,7 +31,7 @@ export const CustomAppBar = styled(AppBar)<CustomAppBarProps>(({ theme, themeLay
         width: '100%',
         backgroundColor: theme.palette.background.default,
         height: HEADER_HEIGHT.DESKTOP_OFFSET,
-        borderBottom: `dashed 1px ${theme.palette.divider}`,
+        borderBottom: `solid 1px ${theme.palette.divider}`,
       }),
       ...(isNavMini && {
         width: `calc(100% - ${NAV_WIDTH.MINI + 1}px)`,

packages/components/modules/navigations/web/NavMini/NavSectionMini/NavList/NavItem/index.tsx

@@ -4,8 +4,8 @@ import { ChevronIcon } from '@baseapp-frontend/design-system/components/web/icon
 import { Iconify } from '@baseapp-frontend/design-system/components/web/images'
 
 import Box from '@mui/material/Box'
-import Link from '@mui/material/Link'
 import Tooltip from '@mui/material/Tooltip'
+import Link from 'next/link'
 
 import type { NavItemProps } from '../../../../types'
 import { StyledNavItem } from './styled'
@@ -69,10 +69,9 @@ const NavItem = forwardRef<HTMLDivElement, NavItemProps>(
           href={path}
           target="_blank"
           rel="noopener noreferrer"
-          color="inherit"
-          underline="none"
-          sx={{
-            width: 1,
+          style={{
+            color: 'inherit',
+            textDecoration: 'none',
             ...(disabled && {
               pointerEvents: 'none',
             }),
@@ -85,10 +84,9 @@ const NavItem = forwardRef<HTMLDivElement, NavItemProps>(
     return (
       <Link
         href={path}
-        color="inherit"
-        underline="none"
-        sx={{
-          width: 1,
+        style={{
+          color: 'inherit',
+          textDecoration: 'none',
           ...(disabled && {
             pointerEvents: 'none',
           }),

packages/components/modules/navigations/web/__shared__/NavSectionHorizontal/NavList/NavItem/index.tsx

@@ -75,8 +75,6 @@ const NavItem = forwardRef<HTMLDivElement, NavItemProps>(
           href={path}
           target="_blank"
           rel="noopener"
-          color="inherit"
-          underline="none"
           disabled={disabled}
           active={active}
           hasTabLayout={hasTabLayout}
@@ -88,8 +86,6 @@ const NavItem = forwardRef<HTMLDivElement, NavItemProps>(
     return (
       <StyledLink
         href={path}
-        color="inherit"
-        underline="none"
         disabled={disabled}
         active={active}
         hasTabLayout={hasTabLayout}

packages/components/modules/navigations/web/__shared__/NavSectionHorizontal/NavList/NavItem/styled.tsx

@@ -1,5 +1,6 @@
-import { Link, ListItemButton } from '@mui/material'
+import { ListItemButton } from '@mui/material'
 import { styled } from '@mui/material/styles'
+import Link from 'next/link'
 
 import { StyledLinkProps, StyledNavItemProps } from './types'
 
@@ -123,6 +124,8 @@ export const StyledNavItem = styled(ListItemButton, {
 export const StyledLink = styled(Link)<StyledLinkProps>(
   ({ theme, disabled, hasTabLayout, active }) => ({
     pointerEvents: disabled ? 'none' : 'cursor',
+    color: 'inherit',
+    textDecoration: 'none',
     display: 'flex',
     alignItems: 'center',
     borderBottom: hasTabLayout && active ? `2px solid ${theme.palette.grey[800]}` : 'none',
@@ -132,3 +135,4 @@ export const StyledLink = styled(Link)<StyledLinkProps>(
     variants: [],
   }),
 )
+

packages/components/modules/navigations/web/__shared__/NavSectionVertical/Group/NavList/NavItem/index.tsx

@@ -2,7 +2,8 @@ import { forwardRef } from 'react'
 
 import { ChevronIcon } from '@baseapp-frontend/design-system/components/web/icons'
 
-import { Box, Link, Tooltip } from '@mui/material'
+import { Box, Tooltip } from '@mui/material'
+import Link from 'next/link'
 
 import type { NavItemProps } from '../../../../../types'
 import { StyledNavItem } from './styled'
@@ -87,9 +88,9 @@ const NavItem = forwardRef<HTMLDivElement, NavItemProps>(
           href={path}
           target="_blank"
           rel="noopener"
-          color="inherit"
-          underline="none"
-          sx={{
+          style={{
+            color: 'inherit',
+            textDecoration: 'none',
             ...(disabled && {
               pointerEvents: 'none',
             }),
@@ -102,9 +103,9 @@ const NavItem = forwardRef<HTMLDivElement, NavItemProps>(
     return (
       <Link
         href={path}
-        color="inherit"
-        underline="none"
-        sx={{
+        style={{
+          color: 'inherit',
+          textDecoration: 'none',
           ...(disabled && {
             pointerEvents: 'none',
           }),

packages/components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/components",
   "description": "BaseApp components modules such as comments, notifications, messages, and more.",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "sideEffects": false,
   "scripts": {
     "babel:transpile": "babel modules -d tmp-babel --extensions .ts,.tsx --ignore '**/__tests__/**','**/__storybook__/**'",