Tooloop/Caramel-CRM-Backup
Archived
2
0
Fork 0
Code Issues 40 Pull Requests Projects 3 Releases Wiki Activity

Overall design work

Browse Source
This commit is contained in:
Daniel Stock
2025-11-11 11:49:38 +01:00
parent ec482cea6c
commit b81c6d71f4
12 changed files with 101 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/ui/sidebar/Sidebar.vue
+3 -3
View File
@@ -63,7 +63,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
<!-- This is what handles the sidebar gap on desktop -->
<div
:class="cn(
'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
'relative w-(--sidebar-width) bg-transparent transition-[width] duration-100 ease-linear',
'group-data-[collapsible=offcanvas]:w-0',
'group-data-[side=right]:rotate-180',
variant === 'floating' || variant === 'inset'
@@ -73,14 +73,14 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
/>
<div
:class="cn(
'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-100 ease-linear md:flex',
side === 'left'
? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
: 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
// Adjust the padding for floating and inset variants.
variant === 'floating' || variant === 'inset'
? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
: 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
: 'p-4 pr-2 group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-0 group-data-[side=right]:border-0',
props.class,
)"
v-bind="$attrs"
resources/js/components/ui/sidebar/SidebarProvider.vue
+4 -1
View File
@@ -66,6 +66,9 @@ provideSidebarContext({
<template>
<TooltipProvider :delay-duration="0">
<!-- :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', props.class)" -->
<!-- :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-linear-45 from-orange-200 to-orange-300 flex min-h-svh w-full', props.class)" -->
<!-- linear-[45deg,rgb(235,217,178)_0%,_rgb(237,183,83)_100%] -->
<div
data-slot="sidebar-wrapper"
:style="{
@@ -74,7 +77,7 @@ provideSidebarContext({
}"
:class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', props.class)"
v-bind="$attrs"
>
>
<slot />
</div>
</TooltipProvider>
resources/js/components/ui/sidebar/utils.ts
+2 -2
View File
@@ -3,9 +3,9 @@ import { createContext } from 'reka-ui'
export const SIDEBAR_COOKIE_NAME = 'sidebar_state'
export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
export const SIDEBAR_WIDTH = '16rem'
export const SIDEBAR_WIDTH = '14rem'
export const SIDEBAR_WIDTH_MOBILE = '18rem'
export const SIDEBAR_WIDTH_ICON = '3rem'
export const SIDEBAR_WIDTH_ICON = '4rem'
export const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
export const [useSidebar, provideSidebarContext] = createContext<{