update sidebar border

packages/components/src/sidebar/sidebar.stories.tsx

@@ -4,8 +4,15 @@ import type { Meta, StoryObj } from '@storybook/react'
 
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
 const meta: Meta<typeof Sidebar> = {
+  title: 'Sidebar/Community',
   component: Sidebar,
   argTypes: {},
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/IBmFKgGL1B4GzqD8LQTw6n/Design-System-for-Web?node-id=14692%3A148489&t=NfQkS7CPSrZknAGF-4',
+    },
+  },
 }
 
 type Story = StoryObj<typeof Sidebar>
@@ -20,11 +27,4 @@ export const Default: Story = {
   },
 }
 
-Default.parameters = {
-  design: {
-    type: 'figma',
-    url: 'https://www.figma.com/file/IBmFKgGL1B4GzqD8LQTw6n/Design-System-for-Web?node-id=14692%3A148489&t=NfQkS7CPSrZknAGF-4',
-  },
-}
-
 export default meta

packages/components/src/sidebar/sidebar.tsx

@@ -56,9 +56,15 @@ const Sidebar = (props: Props) => {
   }
 
   return (
-    <Stack backgroundColor="$background">
+    <Stack
+      backgroundColor="$background"
+      borderRightWidth={1}
+      borderColor="$neutral-10"
+      height="100%"
+      overflow="scroll"
+    >
       <Image
-        src="https://images.unsplash.com/photo-1584475784921-d9dbfd9d17ca?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"
+        src="https://images.unsplash.com/photo-1574786527860-f2e274867c91?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1764&q=80"
         width="full"
         aspectRatio={2.6}
       />