I wasn't sure how you wanted either of them actually done, so figured id just submit this

This is great. I also noticed the menu slides in from the right, which feels wrong. So I updated side="left" in Sidebar.vue

<SheetContent
      data-sidebar="sidebar"
      data-mobile="true"
      side="left"
      class="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
      :style="{
        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
      }"
    >
    ```

I also had to remove the bg-sidebar class from the tag, as it was overlaying the menu.

Is it worth wrapping up these mobile fixes into a PR?

@glennjacobs did you add the extends classes to the config ?

@glennjacobs did you add the extends classes to the config ?

Ah good point. I added those in (as below), but I still have the same issue. I also just noticed I don't have the mouseover styles, I must have done something wrong...

        sidebar: {
          'DEFAULT': 'hsl(var(--sidebar-background))',
          'foreground': 'hsl(var(--sidebar-foreground))',
          'primary': 'hsl(var(--sidebar-primary))',
          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
          'accent': 'hsl(var(--sidebar-accent))',
          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
          'border': 'hsl(var(--sidebar-border))',
          'ring': 'hsl(var(--sidebar-ring))',
        },
        ```

Ah! I was missing the CSS properties from my app.css.

So the class does NOT need to be removed as you expected.

@glennjacobs did you add the extends classes to the config ?

Ah good point. I added those in (as below), but I still have the same issue. I also just noticed I don't have the mouseover styles, I must have done something wrong...

        sidebar: {
          'DEFAULT': 'hsl(var(--sidebar-background))',
          'foreground': 'hsl(var(--sidebar-foreground))',
          'primary': 'hsl(var(--sidebar-primary))',
          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
          'accent': 'hsl(var(--sidebar-accent))',
          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
          'border': 'hsl(var(--sidebar-border))',
          'ring': 'hsl(var(--sidebar-ring))',
        },
        ```

Hello, I am new to chadcn-ui and vue. Where those properties should be in ?
Thanks for your help

@glennjacobs did you add the extends classes to the config ?您是否将扩展类添加到配置中？

Ah good point. I added those in (as below), but I still have the same issue. I also just noticed I don't have the mouseover styles, I must have done something wrong...啊，好点。我添加了这些（如下），但我仍然有同样的问题。我还刚刚注意到我没有鼠标悬停样式，我一定做错了什么......

        sidebar: {
          'DEFAULT': 'hsl(var(--sidebar-background))',
          'foreground': 'hsl(var(--sidebar-foreground))',
          'primary': 'hsl(var(--sidebar-primary))',
          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
          'accent': 'hsl(var(--sidebar-accent))',
          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
          'border': 'hsl(var(--sidebar-border))',
          'ring': 'hsl(var(--sidebar-ring))',
        },
        ```

Hello, I am new to chadcn-ui and vue. Where those properties should be in ?你好，我是 chadcn-ui 和 vue 的新手。这些属性应该在哪里？ Thanks for your help 感谢您的帮助

theme.extend.colors in tailwind.config.js

This is great. I also noticed the menu slides in from the right, which feels wrong. So I updated side="left" in Sidebar.vue这太棒了。我还注意到菜单是从右侧滑入的，这感觉不对。所以我在 Sidebar.vue 中更新了side="left"

<SheetContent
      data-sidebar="sidebar"
      data-mobile="true"
      side="left"
      class="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
      :style="{
        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
      }"
    >
    ```

Can use side prop, change it:

<SheetContent
      data-sidebar="sidebar"
      data-mobile="true"
      :side="side"
      class="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
      :style="{
        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
      }"
    >

@lukepolo thank you, you saved my time

I'm searching and searching. What are the variables in this case, I cannot find them anywhere. I have default style and natural as a baseColor.

I'm searching and searching. What are the variables in this case, I cannot find them anywhere. I have default style and natural as a baseColor.

What integration are you using?

I think the issue is the installer and the theme picker don't have these CSS variables included currently.

Its Vite in my case. There is an ./assets/index.css file which I customized a bit. Maybe that's why during the installation of the Sidebar (VSC Plugin) it wasn't changed?

@Nagell this is what I have in my Laravel install

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --background: 0 0% 100%;
        --foreground: 240 10% 3.9%;

        --card: 0 0% 100%;
        --card-foreground: 240 10% 3.9%;

        --popover: 0 0% 100%;
        --popover-foreground: 240 10% 3.9%;

        --primary: 240 5.9% 10%;
        --primary-foreground: 0 0% 98%;

        --secondary: 240 4.8% 95.9%;
        --secondary-foreground: 240 5.9% 10%;

        --muted: 240 4.8% 95.9%;
        --muted-foreground: 240 3.8% 46.1%;

        --accent: 240 4.8% 95.9%;
        --accent-foreground: 240 5.9% 10%;

        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 0 0% 98%;

        --border:240 5.9% 90%;
        --input:240 5.9% 90%;
        --ring:240 5.9% 10%;
        --radius: 0.5rem;

        --sidebar-background: 0 0% 98%;
        --sidebar-foreground: 240 5.3% 26.1%;
        --sidebar-primary: 240 5.9% 10%;
        --sidebar-primary-foreground: 0 0% 98%;
        --sidebar-accent: 240 4.8% 95.9%;
        --sidebar-accent-foreground: 240 5.9% 10%;
        --sidebar-border: 220 13% 91%;
        --sidebar-ring: 217.2 91.2% 59.8%;
    }

    .dark {
        --background: 222.2 84% 4.9%;
        --foreground: 210 40% 98%;

        --muted: 217.2 32.6% 17.5%;
        --muted-foreground: 215 20.2% 65.1%;

        --popover: 222.2 84% 4.9%;
        --popover-foreground: 210 40% 98%;

        --card: 222.2 84% 4.9%;
        --card-foreground: 210 40% 98%;

        --border: 217.2 32.6% 17.5%;
        --input: 217.2 32.6% 17.5%;

        --primary: 210 40% 98%;
        --primary-foreground: 222.2 47.4% 11.2%;

        --secondary: 217.2 32.6% 17.5%;
        --secondary-foreground: 210 40% 98%;

        --accent: 217.2 32.6% 17.5%;
        --accent-foreground: 210 40% 98%;

        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 210 40% 98%;

        --ring: 212.7 26.8% 83.9%;

        --sidebar-background: 222.2 84% 4.9%;
        --sidebar-foreground: 210 40% 98%;
        --sidebar-primary: 210 40% 98%;
        --sidebar-primary-foreground: 222.2 47.4% 11.2%;
        --sidebar-accent: 217.2 32.6% 17.5%;
        --sidebar-accent-foreground: 210 40% 98%;
        --sidebar-border: 217.2 32.6% 17.5%;
        --sidebar-ring: 212.7 26.8% 83.9%;
    }
}

@layer base {
    * {
        @apply border-border;
    }

    body {
        @apply bg-background text-foreground;
    }
}

Some of the dark mode colours are custom however.

This explains a lot :D Thank you @glennjacobs!