sposchedule

1
export default {
2
  root: {
3
    class: [
4
      'relative',
5

6
      // Flexbox
7
      'flex',
8
      'items-center',
9

10
      // Spacing
11
      'p-2',
12

13
      // Shape
14
      'rounded-md',
15

16
      // Color
17
      'bg-surface-0 dark:bg-surface-900',
18
      'border border-surface-200 dark:border-surface-700',
19
    ],
20
  },
21
  rootList: ({ props }) => ({
22
    class: [
23
      // Flexbox
24
      'sm:flex',
25
      'items-center',
26
      'flex-wrap',
27
      'flex-col sm:flex-row',
28
      { hidden: !props?.mobileActive, flex: props?.mobileActive },
29

30
      // Position
31
      'absolute sm:relative',
32
      'top-full left-0',
33
      'sm:top-auto sm:left-auto',
34

35
      // Size
36
      'w-full sm:w-auto',
37

38
      // Spacing
39
      'm-0',
40
      'p-1 sm:py-0 sm:p-0',
41
      'list-none',
42

43
      // Shape
44
      'shadow-md sm:shadow-none',
45
      'border-0',
46

47
      // Color
48
      'bg-surface-0 dark:bg-surface-900 sm:bg-transparent',
49

50
      // Misc
51
      'outline-none',
52
    ],
53
  }),
54
  item: {
55
    class: 'sm:relative sm:w-auto w-full static my-[2px] [&:first-child]:mt-0',
56
  },
57
  itemContent: ({ context }) => ({
58
    class: [
59
      // Shape
60
      'rounded-[4px]',
61

62
      // Colors
63
      'text-surface-700 dark:text-white/80',
64
      {
65
        'text-surface-500 dark:text-white/70':
66
          !context.focused && !context.active,
67
        'text-surface-500 dark:text-white/70 bg-surface-200':
68
          context.focused && !context.active,
69
        'bg-highlight':
70
          (context.focused && context.active) ||
71
          context.active ||
72
          (!context.focused && context.active),
73
      },
74

75
      // States
76
      {
77
        'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]':
78
          !context.active,
79
        'hover:bg-highlight-emphasis': context.active,
80
      },
81

82
      // Transitions
83
      'transition-all',
84
      'duration-200',
85
    ],
86
  }),
87
  itemLink: ({ context }) => ({
88
    class: [
89
      'relative',
90

91
      // Flexbox
92
      'flex',
93
      'items-center',
94

95
      // Spacing
96
      'py-2',
97
      'px-3',
98

99
      // Size
100
      {
101
        'pl-9 sm:pl-5': context.level === 1,
102
        'pl-14 sm:pl-5': context.level === 2,
103
      },
104
      'leading-none',
105

106
      // Misc
107
      'select-none',
108
      'cursor-pointer',
109
      'no-underline ',
110
      'overflow-hidden',
111
    ],
112
  }),
113
  itemIcon: {
114
    class: 'mr-2',
115
  },
116
  submenuIcon: ({ props }) => ({
117
    class: [
118
      {
119
        'ml-auto sm:ml-2': props.root,
120
        'ml-auto': !props.root,
121
      },
122
    ],
123
  }),
124
  submenu: ({ props }) => ({
125
    class: [
126
      'flex flex-col',
127
      // Size
128
      'rounded-md',
129
      'min-w-[12.5rem]',
130

131
      // Spacing
132
      'p-1',
133
      'm-0',
134
      'list-none',
135

136
      // Shape
137
      'shadow-none sm:shadow-md',
138
      'border border-surface-200 dark:border-surface-700',
139

140
      // Position
141
      'static sm:absolute',
142
      'z-10',
143
      { 'sm:absolute sm:left-full sm:top-0': props.level > 1 },
144

145
      // Color
146
      'bg-surface-0 dark:bg-surface-900',
147
    ],
148
  }),
149
  separator: {
150
    class: 'border-t border-surface-200 dark:border-surface-600 my-[2px]',
151
  },
152
  button: {
153
    class: [
154
      // Flexbox
155
      'flex sm:hidden',
156
      'items-center justify-center',
157

158
      // Size
159
      'w-7',
160
      'h-7',
161

162
      // Shape
163
      'rounded-full',
164
      // Color
165
      'text-surface-500 dark:text-white/80',
166

167
      // States
168
      'hover:text-surface-600 dark:hover:text-white/60',
169
      'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
170
      'focus:outline-none focus:outline-offset-0',
171
      'focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
172

173
      // Transitions
174
      'transition duration-200 ease-in-out',
175

176
      // Misc
177
      'cursor-pointer',
178
      'no-underline',
179
    ],
180
  },
181
  end: {
182
    class: 'ml-auto self-center',
183
  },
184
};
185