@muraldevkit/ui-toolkit 2.9.2 → 2.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface MrlSidebarNavItemProps {
|
|
3
|
+
/** Additional class to add to the li element */
|
|
4
|
+
className?: string;
|
|
5
|
+
/** Leading icon of the sidebar nav item */
|
|
6
|
+
icon?: Record<string, unknown>;
|
|
7
|
+
/** Sets the selected state for the sidebar nav item */
|
|
8
|
+
isSelected?: boolean;
|
|
9
|
+
/**
|
|
10
|
+
* Render function used to wrap the sidebar nav item with a link component.
|
|
11
|
+
* It allows users to wrap the sidebar nav item with different link implementations, react-router's link for example.
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* <MrlSidebarNavItem renderLink={({linkContent}) => <Link to="/">{linkContent}</Link>}/>
|
|
15
|
+
* <MrlSidebarNavItem renderLink={({linkContent}) => <a href="/">{linkContent}</a>}/>
|
|
16
|
+
*/
|
|
17
|
+
renderLink: ({ linkContent }: {
|
|
18
|
+
linkContent: React.ReactNode;
|
|
19
|
+
}) => JSX.Element;
|
|
20
|
+
/** The text of the sidebar item */
|
|
21
|
+
text?: React.ReactNode;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* Sidebar nav item component
|
|
25
|
+
*
|
|
26
|
+
* @param {MrlSidebarNavItemProps} props - the component props
|
|
27
|
+
* @returns a sidebar nav item
|
|
28
|
+
*/
|
|
29
|
+
export declare function MrlSidebarNavItem({ className, icon, isSelected, text, renderLink }: MrlSidebarNavItemProps): JSX.Element;
|
|
30
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './MrlSidebarNavItem';
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
|
|
2
|
+
@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
|
|
3
|
+
$mrl-sidebar-nav-item-background-color-hover: rgba(var(--mrl-gray-20), 1);
|
|
4
|
+
$mrl-sidebar-nav-item-background-color-active: rgba(var(--mrl-gray-30), 1);
|
|
5
|
+
$mrl-sidebar-nav-item-background-color-selected: var(--mrl-color-background-highlight-active);
|
|
6
|
+
$mrl-sidebar-nav-item-text-color-default: var(--mrl-color-text-heading);
|
|
7
|
+
$mrl-sidebar-nav-item-text-color-selected: var(--mrl-color-text-inverse-active);
|
|
8
|
+
.MrlSidebarNavItem {
|
|
9
|
+
height: var(--mrl-spacing-08);
|
|
10
|
+
margin-bottom: var(--mrl-spacing-01);
|
|
11
|
+
& > a {
|
|
12
|
+
align-items: center;
|
|
13
|
+
border-radius: var(--mrl-border-radius-content-large);
|
|
14
|
+
color: $mrl-sidebar-nav-item-text-color-default;
|
|
15
|
+
display: inline-flex;
|
|
16
|
+
height: 100%;
|
|
17
|
+
outline: none;
|
|
18
|
+
padding: var(--mrl-spacing-03) var(--mrl-spacing-04);
|
|
19
|
+
position: relative;
|
|
20
|
+
text-decoration: none;
|
|
21
|
+
width: 100%;
|
|
22
|
+
@include mrl-text-interactive('xsmall');
|
|
23
|
+
&:focus-visible::after {
|
|
24
|
+
@include mrl-focus-pseudo-element;
|
|
25
|
+
}
|
|
26
|
+
&:hover {
|
|
27
|
+
background-color: $mrl-sidebar-nav-item-background-color-hover;
|
|
28
|
+
}
|
|
29
|
+
&:active {
|
|
30
|
+
background-color: $mrl-sidebar-nav-item-background-color-active;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
&.hasIcon > a {
|
|
34
|
+
padding: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02))
|
|
35
|
+
calc(var(--mrl-spacing-01) + var(--mrl-spacing-03));
|
|
36
|
+
}
|
|
37
|
+
&.MrlSidebarNavItem-selected a,
|
|
38
|
+
&.MrlSidebarNavItem-selected a:hover {
|
|
39
|
+
background-color: $mrl-sidebar-nav-item-background-color-selected;
|
|
40
|
+
color: $mrl-sidebar-nav-item-text-color-selected;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
.MrlSidebarNavItem-icon {
|
|
44
|
+
height: var(--mrl-spacing-06);
|
|
45
|
+
margin-right: calc(var(--mrl-spacing-01) + var(--mrl-spacing-03));
|
|
46
|
+
width: var(--mrl-spacing-06);
|
|
47
|
+
}
|