@campxdev/react-blueprint 1.0.9 → 1.0.11

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.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/Navigation/Sidebar/Sidebar.tsx +2 -7
  3. package/src/components/Navigation/Sidebar/styles.tsx +35 -21
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@campxdev/react-blueprint",
3
- "version": "1.0.9",
3
+ "version": "1.0.11",
4
4
  "main": "./export.ts",
5
5
  "private": false,
6
6
  "dependencies": {
package/src/components/Navigation/Sidebar/Sidebar.tsx CHANGED
@@ -51,13 +51,8 @@ export const Sidebar = ({
51
51
  let resolved = useResolvedPath(path);
52
52
  let match = useMatch({ path: resolved.pathname, end: false });
53
53
  return (
54
- <StyledListItem
55
- key={path}
56
- disablePadding
57
- match={match}
58
- className="listItem"
59
- >
60
- <StyledLinkButton to={path}>
54
+ <StyledListItem key={path} disablePadding className="listItem">
55
+ <StyledLinkButton to={path} match={match}>
61
56
  {!collapsed && (
62
57
  <StyledListItemButton collapsed={collapsed}>
63
58
  <StyledListItemIcon collapsed={collapsed}>
package/src/components/Navigation/Sidebar/styles.tsx CHANGED
@@ -44,36 +44,50 @@ export const createSidebarStyles = (collapsed: boolean) => {
44
44
  backgroundColor: theme.palette.surface.paperBackground,
45
45
  height: "60px",
46
46
  }));
47
- interface StyledListItemProps {
47
+
48
+ interface StyledLinkButtonProps {
48
49
  match: any;
49
50
  }
50
- const StyledListItem = styled(ListItem)<StyledListItemProps>(
51
+
52
+ const StyledListItem = styled(ListItem)(({ theme }) => ({
53
+ // width: collapsed ? "min-content" : "auto",
54
+ // backgroundColor: match ? theme.palette.secondary.main : "none",
55
+ display: "flex",
56
+ justifyContent: "center",
57
+ borderRadius: "4px",
58
+ }));
59
+
60
+ const StyledLinkButton = styled(Link)<StyledLinkButtonProps>(
51
61
  ({ theme, match }) => ({
62
+ width: collapsed ? "auto" : "100%",
63
+ textDecoration: "none",
64
+ display: "flex",
65
+ margin: collapsed ? "5px 0px 0px 0px" : "5px 8px",
66
+
52
67
  backgroundColor: match ? theme.palette.secondary.main : "none",
53
- width: collapsed ? "min-content" : "auto",
54
- margin: "5px 8px",
68
+ justifyContent: "center",
69
+ "&:hover": {
70
+ color: "unset",
71
+ },
55
72
  borderRadius: "4px",
56
73
  })
57
74
  );
58
75
 
59
- const StyledLinkButton = styled(Link)({
60
- width: "100%",
61
- textDecoration: "none",
62
- "&:hover": {
63
- color: "unset",
64
- },
65
- });
76
+ interface StyledListItemButtonProps {
77
+ collapsed: boolean;
78
+ }
66
79
 
67
- const StyledListItemButton = styled(ListItemButton)(
68
- ({ collapsed }: { collapsed: boolean }) => ({
69
- display: "flex",
70
- alignItems: "center",
71
- justifyContent: collapsed ? "center" : "flex-start",
72
- paddingBottom: "5px",
73
- paddingTop: "5px",
74
- width: "100%",
75
- })
76
- );
80
+ const StyledListItemButton = styled(
81
+ ListItemButton
82
+ )<StyledListItemButtonProps>(({ collapsed }) => ({
83
+ display: "flex",
84
+ alignItems: "center",
85
+ justifyContent: collapsed ? "center" : "flex-start",
86
+ paddingBottom: "5px",
87
+ paddingTop: "5px",
88
+ width: "100%",
89
+ borderRadius: "5px",
90
+ }));
77
91
 
78
92
  const StyledListItemIcon = styled(ListItemIcon)(
79
93
  ({ collapsed }: { collapsed: boolean }) => ({