Sidebar styling (#684)

lib/experimental/Navigation/ApplicationFrame/index.tsx

@@ -8,8 +8,8 @@ export const ApplicationFrame: React.FC<ApplicationFrameProps> = ({
  sidebar,
 }) => {
  return (
- <div className="flex h-full flex-row gap-4 p-4">
- <div className="w-64">{sidebar}</div>
+ <div className="flex h-full flex-row gap-3">
+ <div className="w-64 pl-3">{sidebar}</div>
  <div className="flex flex-1">{children}</div>
  </div>
  )

lib/experimental/Navigation/Sidebar/Menu/index.tsx

@@ -101,10 +101,10 @@ const CategoryItem = ({ category }: { category: MenuCategory }) => {
  {category.title}
  <motion.div
  initial={false}
- animate={{ rotate: isOpen ? 180 : 0 }}
+ animate={{ rotate: isOpen ? 0 : -90 }}
  transition={{ duration: 0.1 }}
  >
- <Icons.ChevronDown className="h-4 w-4" />
+ <Icons.ChevronDown className="h-4 w-4 text-f1-icon-secondary" />
  </motion.div>
  </CollapsibleTrigger>
  <CollapsibleContent

lib/experimental/Navigation/Sidebar/Searchbar/index.tsx

@@ -19,7 +19,7 @@ export function SearchBar({
  <button
  onClick={onClick}
  className={cn(
- "flex w-full cursor-pointer items-center justify-between rounded border border-solid border-f1-border bg-f1-background p-1.5 text-f1-foreground-secondary transition-colors hover:border-f1-border-hover",
+ "mb-4 flex w-full cursor-pointer items-center justify-between rounded border border-solid border-f1-border/70 bg-f1-background/80 p-1.5 text-f1-foreground-secondary transition-colors hover:border-f1-border-hover",
  focusRing()
  )}
  type="button"

lib/experimental/Navigation/Sidebar/Sidebar.tsx

@@ -1,5 +1,17 @@
-export const Sidebar: React.FC<{ children?: React.ReactNode }> = ({
- children,
-}) => {
- return <div className="flex flex-col gap-2 px-3">{children}</div>
+import { ReactNode } from "react"
+
+interface SidebarProps {
+ header?: ReactNode
+ body?: ReactNode
+ footer?: ReactNode
+}
+
+export function Sidebar({ header, body, footer }: SidebarProps) {
+ return (
+ <div className="flex h-full flex-col gap-2">
+ {header}
+ {body && <div className="flex-grow overflow-y-auto">{body}</div>}
+ {footer}
+ </div>
+ )
 }

lib/experimental/Navigation/Sidebar/User/index.tsx

@@ -15,16 +15,18 @@ interface UserProps {
 
 export function User({ name, avatarUrl, avatarAlt, options }: UserProps) {
  return (
- <Dropdown items={options}>
- <button
- className={cn(
- "flex w-full items-center gap-1.5 rounded p-1.5 font-medium transition-colors hover:bg-f1-background-secondary-hover data-[state=open]:bg-f1-background-secondary-hover",
- focusRing()
- )}
- >
- <Avatar src={avatarUrl} alt={avatarAlt} size="xxsmall" />
- {name}
- </button>
- </Dropdown>
+ <div className="border-t border-dashed border-transparent border-t-f1-border pt-4">
+ <Dropdown items={options}>
+ <button
+ className={cn(
+ "flex w-full items-center gap-1.5 rounded p-1.5 font-medium transition-colors hover:bg-f1-background-secondary-hover data-[state=open]:bg-f1-background-secondary-hover",
+ focusRing()
+ )}
+ >
+ <Avatar src={avatarUrl} alt={avatarAlt} size="xxsmall" />
+ {name}
+ </button>
+ </Dropdown>
+ </div>
  )
 }

lib/experimental/Navigation/Sidebar/index.stories.tsx

@@ -9,6 +9,7 @@ import * as SearchBarStories from "./Searchbar/index.stories"
 import { Sidebar } from "./Sidebar"
 import { User } from "./User"
 import * as UserStories from "./User/index.stories"
+
 const meta: Meta<typeof Sidebar> = {
  component: Sidebar,
  tags: ["autodocs"],
@@ -17,16 +18,20 @@ const meta: Meta<typeof Sidebar> = {
  },
  decorators: [
  (Story) => (
- <div className="w-[240px] bg-f1-background-tertiary">
+ <div className="h-[500px] w-[240px] bg-f1-background-tertiary">
  <Story />
  </div>
  ),
  ],
  args: {
- children: (
+ header: (
  <>
  <SidebarHeader {...SidebarHeaderStories.Default.args} />
  <SearchBar {...SearchBarStories.Default.args} />
+ </>
+ ),
+ body: (
+ <>
  <Menu {...SidebarMenuStories.Default.args} />
  <User {...UserStories.Default.args} />
  </>
@@ -36,6 +41,6 @@ const meta: Meta<typeof Sidebar> = {
 
 export default meta
 
-type Story = StoryObj
+type Story = StoryObj<typeof Sidebar>
 
 export const Default: Story = {}

lib/lib/one-provider.tsx

@@ -45,7 +45,7 @@ export const LayoutProvider: React.FC<
  ref={ref}
  id="factorial-one-layout"
  className={cn({
- "flex h-screen w-screen flex-col bg-f1-background-secondary":
+ "flex h-screen w-screen flex-col bg-f1-background-tertiary":
  fullScreen,
  })}
  >