@stevederico/skateboard-ui 1.2.6 → 1.2.10

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/AppSidebar.jsx +27 -35
  2. package/package.json +1 -1
  3. package/styles.css +13 -12
package/AppSidebar.jsx CHANGED
@@ -32,39 +32,40 @@ export default function AppSidebar() {
32
32
  className="min-w-[40px]"
33
33
  style={{ '--sidebar-width': '12rem' }}
34
34
  >
35
- <SidebarHeader className="p-0">
36
- <SidebarMenu>
37
- <div className={`flex flex-row m-2 mt-4 mb-4 items-center ${open ? "ml-3" : "justify-center ml-2"}`}>
38
- <div className="bg-app dark:border rounded-lg flex aspect-square size-10 items-center justify-center">
39
- <DynamicIconComponent
40
- name={constants.appIcon}
41
- size={28}
42
- color="white"
43
- strokeWidth={2}
44
- />
35
+ {!constants.hideSidebarHeader && (
36
+ <SidebarHeader className="p-0">
37
+ <SidebarMenu>
38
+ <div className={`flex flex-row m-2 mt-4 mb-4 items-center ${open ? "ml-3" : "justify-center ml-2"}`}>
39
+ <div className="bg-app dark:border rounded-lg flex aspect-square size-10 items-center justify-center">
40
+ <DynamicIconComponent
41
+ name={constants.appIcon}
42
+ size={28}
43
+ color="white"
44
+ strokeWidth={2}
45
+ />
46
+ </div>
47
+ {open && <div className="font-semibold ml-2 text-xl">{constants.appName}</div>}
45
48
  </div>
46
- {open && <div className="font-semibold ml-2 text-xl">{constants.appName}</div>}
47
- </div>
48
- </SidebarMenu>
49
- </SidebarHeader>
49
+ </SidebarMenu>
50
+ </SidebarHeader>
51
+ )}
50
52
  <SidebarContent>
51
- <ul className={`flex flex-col gap-2 p-2 ${open ? "" : "items-center"}`}>
53
+ <ul className={`flex flex-col gap-1 p-2 ${open ? "" : "items-center"}`}>
52
54
  {constants.pages.map((item) => {
53
55
  const isActive = currentPage === item.url.toLowerCase();
54
56
  return (
55
57
  <li key={item.title}>
56
58
  <div
57
- className={`cursor-pointer items-center flex w-full p-2 rounded-lg ${open ? "h-10" : "h-10 w-8"} ${isActive ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"}`}
59
+ className={`cursor-pointer items-center flex w-full px-4 py-3 rounded-lg ${open ? "h-14" : "h-12 w-12"} ${isActive ? "bg-accent/80 text-accent-foreground" : "hover:bg-accent/50 hover:text-accent-foreground"}`}
58
60
  onClick={() => handleNavigation(`/app/${item.url.toLowerCase()}`)}
59
61
  >
60
- <span className="flex w-full">
62
+ <span className="flex w-full items-center">
61
63
  <DynamicIconComponent
62
64
  name={item.icon}
63
- size={24}
65
+ size={20}
64
66
  strokeWidth={1.5}
65
- className={"!size-6"}
66
67
  />
67
- {open && <span className="ml-2">{item.title}</span>}
68
+ {open && <span className="ml-3">{item.title}</span>}
68
69
  </span>
69
70
  </div>
70
71
  </li>
@@ -73,29 +74,20 @@ export default function AppSidebar() {
73
74
  </ul>
74
75
  </SidebarContent>
75
76
  <SidebarFooter>
76
- <ul className={`flex flex-col gap-1 ${open ? "" : "items-center"}`}>
77
- <li>
78
- <div
79
- className={`cursor-pointer flex w-full p-2 ${open ? "h-10" : "h-10 w-8"}`}
80
- onClick={() => setOpen(!open)}
81
- >
82
-
83
- </div>
84
- </li>
77
+ <ul className={`flex flex-col gap-1 ${open ? "" : "items-center"}`}>
85
78
  <li>
86
79
  <div
87
- className={`cursor-pointer items-center rounded-lg flex w-full p-2 ${open ? "h-10" : "h-10 w-8"}
88
- ${location.pathname.toLowerCase().includes("settings") ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"}`}
80
+ className={`cursor-pointer items-center rounded-lg flex w-full px-4 py-3 ${open ? "h-14" : "h-12 w-12"}
81
+ ${location.pathname.toLowerCase().includes("settings") ? "bg-accent/80 text-accent-foreground" : "hover:bg-accent/50 hover:text-accent-foreground"}`}
89
82
  onClick={() => handleNavigation("/app/settings")}
90
83
  >
91
- <span className="flex w-full items-center">
84
+ <span className="flex w-full items-center">
92
85
  <DynamicIconComponent
93
86
  name="settings"
94
- size={18}
87
+ size={20}
95
88
  strokeWidth={1.5}
96
- className={"!size-5 "}
97
89
  />
98
- {open && <span className="ml-2 text-sm">Settings</span>}
90
+ {open && <span className="ml-3">Settings</span>}
99
91
  </span>
100
92
  </div>
101
93
  </li>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@stevederico/skateboard-ui",
3
3
  "private": false,
4
- "version": "1.2.6",
4
+ "version": "1.2.10",
5
5
  "type": "module",
6
6
  "exports": {
7
7
  "./AppSidebar": {
package/styles.css CHANGED
@@ -47,37 +47,37 @@
47
47
  }
48
48
 
49
49
  .dark {
50
- --background: oklch(0.205 0 0);
50
+ --background: oklch(0.05 0 0);
51
51
  --foreground: oklch(0.985 0 0);
52
- --card: oklch(0.205 0 0);
52
+ --card: oklch(0.12 0 0);
53
53
  --card-foreground: oklch(0.985 0 0);
54
- --popover: oklch(0.145 0 0);
54
+ --popover: oklch(0.12 0 0);
55
55
  --popover-foreground: oklch(0.985 0 0);
56
56
  --primary: oklch(0.985 0 0);
57
- --primary-foreground: oklch(0.205 0 0);
58
- --secondary: oklch(0.269 0 0);
57
+ --primary-foreground: oklch(0.05 0 0);
58
+ --secondary: oklch(0.18 0 0);
59
59
  --secondary-foreground: oklch(0.985 0 0);
60
- --muted: oklch(0.269 0 0);
60
+ --muted: oklch(0.18 0 0);
61
61
  --muted-foreground: oklch(0.708 0 0);
62
- --accent: oklch(0.28 0 0);
62
+ --accent: oklch(0.2 0 0);
63
63
  --accent-foreground: oklch(0.985 0 0);
64
64
  --destructive: oklch(0.396 0.141 25.723);
65
65
  --destructive-foreground: oklch(0.637 0.237 25.331);
66
- --border: oklch(0.269 0 0);
67
- --input: oklch(0.269 0 0);
66
+ --border: oklch(0.2 0 0);
67
+ --input: oklch(0.18 0 0);
68
68
  --ring: oklch(0.439 0 0);
69
69
  --chart-1: oklch(0.488 0.243 264.376);
70
70
  --chart-2: oklch(0.696 0.17 162.48);
71
71
  --chart-3: oklch(0.769 0.188 70.08);
72
72
  --chart-4: oklch(0.627 0.265 303.9);
73
73
  --chart-5: oklch(0.645 0.246 16.439);
74
- --sidebar: oklch(0.205 0 0);
74
+ --sidebar: oklch(0.15 0 0);
75
75
  --sidebar-foreground: oklch(0.985 0 0);
76
76
  --sidebar-primary: oklch(0.488 0.243 264.376);
77
77
  --sidebar-primary-foreground: oklch(0.985 0 0);
78
- --sidebar-accent: var(--accent);
78
+ --sidebar-accent: oklch(0.25 0 0);
79
79
  --sidebar-accent-foreground: oklch(0.985 0 0);
80
- --sidebar-border: oklch(0.269 0 0);
80
+ --sidebar-border: oklch(0.27 0 0);
81
81
  --sidebar-ring: oklch(0.439 0 0);
82
82
  }
83
83
 
@@ -146,6 +146,7 @@
146
146
  }
147
147
  body {
148
148
  @apply bg-white dark:bg-black text-foreground;
149
+ font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
149
150
  }
150
151
  }
151
152