diff --git a/.github/PULL_REQUEST_TEMPLATE/bug_fix.md b/.github/PULL_REQUEST_TEMPLATE/bug_fix.md deleted file mode 100644 index 2cbb71a7..00000000 --- a/.github/PULL_REQUEST_TEMPLATE/bug_fix.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: '🐞 fix: ' -labels: bug ---- diff --git a/.github/PULL_REQUEST_TEMPLATE/documentation.md b/.github/PULL_REQUEST_TEMPLATE/documentation.md deleted file mode 100644 index c5d4ae89..00000000 --- a/.github/PULL_REQUEST_TEMPLATE/documentation.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: '📚 docs: ' -labels: documentation ---- diff --git a/.github/PULL_REQUEST_TEMPLATE/empty.md b/.github/PULL_REQUEST_TEMPLATE/empty.md deleted file mode 100644 index c9985e7e..00000000 --- a/.github/PULL_REQUEST_TEMPLATE/empty.md +++ /dev/null @@ -1 +0,0 @@ -Describe your PR <3 diff --git a/.github/PULL_REQUEST_TEMPLATE/enhancement.md b/.github/PULL_REQUEST_TEMPLATE/enhancement.md deleted file mode 100644 index 74f8b581..00000000 --- a/.github/PULL_REQUEST_TEMPLATE/enhancement.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: '🚀 enhancement: ' -labels: enhancement ---- diff --git a/.github/PULL_REQUEST_TEMPLATE/feature.md b/.github/PULL_REQUEST_TEMPLATE/feature.md deleted file mode 100644 index e1ade85d..00000000 --- a/.github/PULL_REQUEST_TEMPLATE/feature.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: '✨ feature: ' -labels: feature ---- diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index eb26da4b..9410195d 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -1,6 +1,5 @@ -Please go the the `Preview` tab and select the appropriate sub-template: +Please follow [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) for your PR title, e.g.: -- [🐞 Bug Fix](?expand=1&labels=bug&title=🐞+fix%3a&template=empty.md) -- [🚀 Enhancement](?expand=1&labels=enhancement&title=🚀+enhancement%3a&template=empty.md) -- [✨ Feature](?expand=1&labels=feature&title=✨+feature%3a&template=empty.md) -- [📚 Documentation](?expand=1&labels=documentation&title=📚+documentation%3a&template=empty.md) +- `feat: add new authentication method` +- `fix: correct typo in documentation` +- `chore: update dependencies` diff --git a/.github/release.yml b/.github/release.yml deleted file mode 100644 index d25c5c88..00000000 --- a/.github/release.yml +++ /dev/null @@ -1,23 +0,0 @@ -changelog: - exclude: - labels: - - skip-changelog - authors: - - dependabot[bot] - categories: - - title: ✨ Features - labels: - - feature - - title: 🚀 Enhancment - labels: - - enhancement - - title: 🐞 Bug Fixes - labels: - - bug - - bug (high priority) - - title: 📚 Documentation - labels: - - documentation - - title: Other Changes - labels: - - '*' # Catch-all for pull requests that didn't match any of the previous categories diff --git a/.github/workflows/build_image.yml b/.github/workflows/build_image.yml index 37bb4088..bd245b5d 100644 --- a/.github/workflows/build_image.yml +++ b/.github/workflows/build_image.yml @@ -1,25 +1,34 @@ name: Build and publish container images on: - release: - types: [published] push: branches: - - main + - 'main' + tags: + - '*' + pull_request: + branches: + - 'main' jobs: build: name: Build and publish container images runs-on: ubuntu-latest - strategy: - matrix: - runtime: [node, bun] steps: - - name: Checkout code - uses: actions/checkout@v4 - - - name: Set up QEMU - uses: docker/setup-qemu-action@v3 + - uses: actions/checkout@v4 + - uses: oven-sh/setup-bun@v2 + - run: bun install --frozen-lockfile + - name: Run Trivy scanner on fs + uses: aquasecurity/trivy-action@0.32.0 + with: + scan-type: 'fs' + scan-ref: '.' + exit-code: 1 + format: 'table' + ignore-unfixed: true + vuln-type: 'os,library' + severity: 'CRITICAL,HIGH' + trivyignores: .trivyignore - name: Set up Docker Buildx uses: docker/setup-buildx-action@v3 @@ -41,32 +50,60 @@ jobs: id: meta uses: docker/metadata-action@v5 with: - flavor: | - latest=false images: | - deutschemodelunitednations/chase + deutschemodelunitednations/munify-chase ghcr.io/${{ github.repository_owner }}/${{ github.repository }} tags: | - type=raw,value=${{ github.sha }},suffix=${{ matrix.runtime != 'bun' && format('-{0}', matrix.runtime) || '' }} - - type=semver,pattern={{version}},value=${{ github.event.release.tag_name }},enable=${{ github.event_name == 'release' }},suffix=${{ matrix.runtime != 'bun' && format('-{0}', matrix.runtime) || '' }} - - type=raw,value=latest,enable=${{ github.event_name == 'release' && !github.event.release.prerelease }} - type=semver,pattern={{major}},value=${{ github.event.release.tag_name }},enable=${{ github.event_name == 'release' && !github.event.release.prerelease }},suffix=${{ matrix.runtime != 'bun' && format('-{0}', matrix.runtime) || '' }} - type=semver,pattern={{major}}.{{minor}},value=${{ github.event.release.tag_name }},enable=${{ github.event_name == 'release' && !github.event.release.prerelease }},suffix=${{ matrix.runtime != 'bun' && format('-{0}', matrix.runtime) || '' }} - - type=raw,value=prerelease,enable=${{ github.event_name == 'release' && github.event.release.prerelease }},suffix=${{ matrix.runtime != 'bun' && format('-{0}', matrix.runtime) || '' }} - type=raw,value=nightly,enable=${{ github.event_name == 'push' && github.ref == 'refs/heads/main' }},suffix=${{ matrix.runtime != 'bun' && format('-{0}', matrix.runtime) || '' }} + type=ref,event=branch + type=ref,event=pr + type=semver,pattern={{version}} + type=semver,pattern={{major}}.{{minor}} - - name: Build and push Docker image + - name: Build Docker image uses: docker/build-push-action@v5 + id: build with: - context: . - push: true - # platforms: linux/amd64,linux/arm64 + load: true + push: false tags: ${{ steps.meta.outputs.tags }} labels: ${{ steps.meta.outputs.labels }} - file: ./Dockerfile.${{ matrix.runtime }} + cache-from: type=gha + cache-to: type=gha,mode=max build-args: | - VERSION=${{ github.event.release.tag_name }} + TAG=${{ steps.split-tags.outputs.fragment }} SHA=${{ github.sha }} + + - name: Get first built image ref + id: split-tags + run: echo "fragment=$(echo "${DOCKER_METADATA_OUTPUT_TAGS}" | head -n 1)" >> $GITHUB_OUTPUT + + - name: Run Trivy vulnerability scanner on the built image + uses: aquasecurity/trivy-action@0.32.0 + with: + image-ref: ${{ steps.split-tags.outputs.fragment }} + format: 'table' + exit-code: '1' + ignore-unfixed: true + vuln-type: 'os,library' + severity: 'CRITICAL,HIGH' + skip-setup-trivy: true + trivyignores: .trivyignore + + - name: Push images + run: | + set -eu + echo "Pushing images..." + TAGS="${{ steps.meta.outputs.tags }}" + echo "Raw tags: $TAGS" + echo "$TAGS" | sed 's/,/ /g' | tr ' ' '\n' | sed '/^\s*$/d' | while read -r tag; do + echo "Pushing $tag" + docker push "$tag" + done + + - name: Create GitHub Release + uses: softprops/action-gh-release@v2 + if: github.ref_type == 'tag' + with: + generate_release_notes: true + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/build_run.yml b/.github/workflows/build_run.yml deleted file mode 100644 index b8db2ccb..00000000 --- a/.github/workflows/build_run.yml +++ /dev/null @@ -1,20 +0,0 @@ -name: Build and run - -on: - pull_request: - -jobs: - build: - runs-on: ubuntu-latest - steps: - - name: Checkout - uses: actions/checkout@v4 - - uses: oven-sh/setup-bun@v2 - - run: bun install --frozen-lockfile - - run: bun run build - - run: bun run check - # TODO - # - run: | - # bun run preview & - # sleep 10 - # curl -f http://localhost:4173 diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml deleted file mode 100644 index c3e1c180..00000000 --- a/.github/workflows/lint.yml +++ /dev/null @@ -1,14 +0,0 @@ -name: Lint - -on: - pull_request: - -jobs: - lint: - runs-on: ubuntu-latest - steps: - - name: Checkout - uses: actions/checkout@v4 - - uses: oven-sh/setup-bun@v2 - - run: bun install - - run: bun run lint diff --git a/.gitignore b/.gitignore index 8bc46946..b346da25 100644 --- a/.gitignore +++ b/.gitignore @@ -22,5 +22,7 @@ Thumbs.db vite.config.js.timestamp-* vite.config.ts.timestamp-* +# Paraglide +src/lib/paraglide -.houdini +src/lib/api/rumbleClient \ No newline at end of file diff --git a/.graphqlrc.yaml b/.graphqlrc.yaml deleted file mode 100644 index 5eb640e9..00000000 --- a/.graphqlrc.yaml +++ /dev/null @@ -1,9 +0,0 @@ -projects: - default: - schema: - - ./schema.graphql - - ./.houdini/graphql/schema.graphql - documents: - - '**/*.gql' - - '**/*.svelte' - - ./.houdini/graphql/documents.gql diff --git a/.prettierignore b/.prettierignore index 87cc69b5..7d74fe24 100644 --- a/.prettierignore +++ b/.prettierignore @@ -2,4 +2,8 @@ package-lock.json pnpm-lock.yaml yarn.lock -schema.graphql \ No newline at end of file +bun.lock +bun.lockb + +# Miscellaneous +/static/ diff --git a/.prettierrc b/.prettierrc index 7ebb855b..0bb09a6c 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,15 +1,16 @@ { - "useTabs": true, - "singleQuote": true, - "trailingComma": "none", - "printWidth": 100, - "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"], - "overrides": [ - { - "files": "*.svelte", - "options": { - "parser": "svelte" - } - } - ] + "useTabs": false, + "singleQuote": true, + "trailingComma": "none", + "printWidth": 100, + "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"], + "tailwindStylesheet": "./src/routes/layout.css", + "overrides": [ + { + "files": "*.svelte", + "options": { + "parser": "svelte" + } + } + ] } diff --git a/.vscode/daisyui.md b/.vscode/daisyui.md deleted file mode 100644 index e3219443..00000000 --- a/.vscode/daisyui.md +++ /dev/null @@ -1,1884 +0,0 @@ -# daisyUI 5 - -daisyUI 5 is a CSS library for Tailwind CSS 4 -daisyUI 5 provides class names for common UI components - -- [daisyUI 5 docs](http://daisyui.com) -- [Guide: How to use this file in LLMs and code editors](https://daisyui.com/docs/editor/) -- [daisyUI 5 release notes](https://daisyui.com/docs/v5/) -- [daisyUI 4 to 5 upgrade guide](https://daisyui.com/docs/upgrade/) - -## daisyUI 5 install notes - -[install guide](https://daisyui.com/docs/install/) - -1. daisyUI 5 requires Tailwind CSS 4 -2. `tailwind.config.js` file is deprecated in Tailwind CSS v4. do not use `tailwind.config.js`. Tailwind CSS v4 only needs `@import "tailwindcss";` in the CSS file if it's a node dependency. -3. daisyUI 5 can be installed using `npm i -D daisyui@latest` and then adding `@plugin "daisyui";` to the CSS file -4. daisyUI is suggested to be installed as a dependency but if you really want to use it from CDN, you can use Tailwind CSS and daisyUI CDN files: - -```html - - -``` - -5. A CSS file with Tailwind CSS and daisyUI looks like this (if it's a node dependency) - -```css -@import 'tailwindcss'; -@plugin "daisyui"; -``` - -## daisyUI 5 usage rules - -1. We can give styles to a HTML element by adding daisyUI class names to it. By adding a component class name, part class names (if there's any available for that component), and modifier class names (if there's any available for that component) -2. Components can be customized using Tailwind CSS utility classes if the customization is not possible using the existing daisyUI classes. For example `btn px-10` sets a custom horizontal padding to a `btn` -3. If customization of daisyUI styles using Tailwind CSS utility classes didn't work because of CSS specificity issues, you can use the `!` at the end of the Tailwind CSS utility class to override the existing styles. For example `btn bg-red-500!` sets a custom background color to a `btn` forcefully. This is a last resort solution and should be used sparingly -4. If a specific component or something similar to it doesn't exist in daisyUI, you can create your own component using Tailwind CSS utility -5. when using Tailwind CSS `flex` and `grid` for layout, it should be responsive using Tailwind CSS responsive utility prefixes. -6. Only allowed class names are existing daisyUI class names or Tailwind CSS utility classes. -7. Ideally, you won't need to write any custom CSS. Using daisyUI class names or Tailwind CSS utility classes is preferred. -8. suggested - if you need placeholder images, use https://picsum.photos/200/300 with the size you want -9. suggested - when designing , don't add a custom font unless it's necessary -10. don't add `bg-base-100 text-base-content` to body unless it's necessary -11. For design decisions, use Refactoring UI book best practices - -daisyUI 5 class names are one of the following categories. these type names are only for reference and are not used in the actual code - -- `component`: the required component class -- `part`: a child part of a component -- `style`: sets a specific style to component or part -- `behavior`: changes the behavior of component or part -- `color`: sets a specific color to component or part -- `size`: sets a specific size to component or part -- `placement`: sets a specific placement to component or part -- `direction`: sets a specific direction to component or part -- `modifier`: modifies the component or part in a specific way - -## Config - -daisyUI 5 config docs: https://daisyui.com/docs/config/ -daisyUI without config: - -```css -@plugin "daisyui"; -``` - -daisyUI config with `light` theme only: - -```css -@plugin "daisyui" { - themes: light --default; -} -``` - -daisyUI with all the default configs: - -```css -@plugin "daisyui" { - themes: - light --default, - dark --prefersdark; - root: ':root'; - include:; - exclude:; - prefix:; - logs: true; -} -``` - -An example config: -In below config, all the built-in themes are enabled while bumblebee is the default theme and synthwave is the prefersdark theme (default dark mode) -All the other themes are enabled and can be used by adding `data-theme="THEME_NAME"` to the `` element -root scrollbar gutter is excluded. `daisy-` prefix is used for all daisyUI classes and console.log is disabled - -```css -@plugin "daisyui" { - themes: - light, - dark, - cupcake, - bumblebee --default, - emerald, - corporate, - synthwave --prefersdark, - retro, - cyberpunk, - valentine, - halloween, - garden, - forest, - aqua, - lofi, - pastel, - fantasy, - wireframe, - black, - luxury, - dracula, - cmyk, - autumn, - business, - acid, - lemonade, - night, - coffee, - winter, - dim, - nord, - sunset, - caramellatte, - abyss, - silk; - root: ':root'; - include:; - exclude: rootscrollgutter, checkbox; - prefix: daisy-; - logs: false; -} -``` - -## daisyUI 5 colors - -### daisyUI color names - -- `primary`: Primary brand color, The main color of your brand -- `primary-content`: Foreground content color to use on primary color -- `secondary`: Secondary brand color, The optional, secondary color of your brand -- `secondary-content`: Foreground content color to use on secondary color -- `accent`: Accent brand color, The optional, accent color of your brand -- `accent-content`: Foreground content color to use on accent color -- `neutral`: Neutral dark color, For not-saturated parts of UI -- `neutral-content`: Foreground content color to use on neutral color -- `base-100`:-100 Base surface color of page, used for blank backgrounds -- `base-200`:-200 Base color, darker shade, to create elevations -- `base-300`:-300 Base color, even more darker shade, to create elevations -- `base-content`: Foreground content color to use on base color -- `info`: Info color, For informative/helpful messages -- `info-content`: Foreground content color to use on info color -- `success`: Success color, For success/safe messages -- `success-content`: Foreground content color to use on success color -- `warning`: Warning color, For warning/caution messages -- `warning-content`: Foreground content color to use on warning color -- `error`: Error color, For error/danger/destructive messages -- `error-content`: Foreground content color to use on error color - -### daisyUI color rules - -1. daisyUI adds semantic color names to Tailwind CSS colors -2. daisyUI color names can be used in utility classes, like other Tailwind CSS color names. for example, `bg-primary` will use the primary color for the background -3. daisyUI color names include variables as value so they can change based the theme -4. There's no need to use `dark:` for daisyUI color names -5. Ideally only daisyUI color names should be used for colors so the colors can change automatically based on the theme -6. If a Tailwind CSS color name (like `red-500`) is used, it will be same red color on all themes -7. If a daisyUI color name (like `primary`) is used, it will change color based on the theme -8. Using Tailwind CSS color names for text colors should be avoided because Tailwind CSS color `text-gray-800` on `bg-base-100` would be unreadable on a dark theme - because on dark theme, `bg-base-100` is a dark color -9. `*-content` colors should have a good contrast compared to their associated colors -10. suggestion - when designing a page use `base-*` colors for majority of the page. use `primary` color for important elements - -### daisyUI custom theme with custom colors - -A CSS file with Tailwind CSS, daisyUI and a custom daisyUI theme looks like this: - -```css -@import 'tailwindcss'; -@plugin "daisyui"; -@plugin "daisyui/theme" { - name: 'mytheme'; - default: true; /* set as default */ - prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */ - color-scheme: light; /* color of browser-provided UI */ - - --color-base-100: oklch(98% 0.02 240); - --color-base-200: oklch(95% 0.03 240); - --color-base-300: oklch(92% 0.04 240); - --color-base-content: oklch(20% 0.05 240); - --color-primary: oklch(55% 0.3 240); - --color-primary-content: oklch(98% 0.01 240); - --color-secondary: oklch(70% 0.25 200); - --color-secondary-content: oklch(98% 0.01 200); - --color-accent: oklch(65% 0.25 160); - --color-accent-content: oklch(98% 0.01 160); - --color-neutral: oklch(50% 0.05 240); - --color-neutral-content: oklch(98% 0.01 240); - --color-info: oklch(70% 0.2 220); - --color-info-content: oklch(98% 0.01 220); - --color-success: oklch(65% 0.25 140); - --color-success-content: oklch(98% 0.01 140); - --color-warning: oklch(80% 0.25 80); - --color-warning-content: oklch(20% 0.05 80); - --color-error: oklch(65% 0.3 30); - --color-error-content: oklch(98% 0.01 30); - - --radius-selector: 1rem; /* border radius of selectors (checkbox, toggle, badge) */ - --radius-field: 0.25rem; /* border radius of fields (button, input, select, tab) */ - --radius-box: 0.5rem; /* border radius of boxes (card, modal, alert) */ - - --size-selector: 0.25rem; /* base size of selectors (checkbox, toggle, badge) */ - --size-field: 0.25rem; /* base size of fields (button, input, select, tab) */ - - --border: 1px; /* border size */ - - --depth: 1; /* only 0 or 1 – Adds a shadow and subtle 3D effect to components */ - --noise: 0; /* only 0 or 1 - Adds a subtle noise effect to components */ -} -``` - -#### Rules - -- All CSS variables above are required -- Colors can be OKLCH or hex or other formats - -You can use https://daisyui.com/theme-generator/ to create your own theme - -## daisyUI 5 components - -### accordion - -Accordion is used for showing and hiding content but only one item can stay open at a time - -[accordion docs](https://daisyui.com/components/accordion/) - -#### Class names - -- component: `collapse` -- part: `collapse-title`, `collapse-content` -- modifier: `collapse-arrow`, `collapse-plus`, `collapse-open`, `collapse-close` - -#### Syntax - -```html -
{CONTENT}
-``` - -where content is: - -```html - -
{title}
-
{CONTENT}
-``` - -#### Rules - -- {MODIFIER} is optional and can have one of the modifier class names -- Accordion uses radio inputs. All radio inputs with the same name work together and only one of them can be open at a time -- If you have more than one set of accordion items on a page, use different names for the radio inputs on each set -- Replace {name} with a unique name for the accordion group -- replace `{checked}` with `checked="checked"` if you want the accordion to be open by default - -### alert - -Alert informs users about important events - -[alert docs](https://daisyui.com/components/alert/) - -#### Class names - -- component: `alert` -- style: `alert-outline`, `alert-dash`, `alert-soft` -- color: `alert-info`, `alert-success`, `alert-warning`, `alert-error` -- direction: `alert-vertical`, `alert-horizontal` - -#### Syntax - -```html - -``` - -#### Rules - -- {MODIFIER} is optional and can have one of each style/color/direction class names -- Add `sm:alert-horizontal` for responsive layouts - -### avatar - -Avatars are used to show a thumbnail - -[avatar docs](https://daisyui.com/components/avatar/) - -#### Class names - -- component: `avatar`, `avatar-group` -- modifier: `avatar-online`, `avatar-offline`, `avatar-placeholder` - -#### Syntax - -```html -
-
- -
-
-``` - -#### Rules - -- {MODIFIER} is optional and can have one of the modifier class names -- Use `avatar-group` for containing multiple avatars -- You can set custom sizes using `w-*` and `h-*` -- You can use mask classes such as `mask-squircle`, `mask-hexagon`, `mask-triangle` - -### badge - -Badges are used to inform the user of the status of specific data - -[badge docs](https://daisyui.com/components/badge/) - -#### Class names - -- component: `badge` -- style: `badge-outline`, `badge-dash`, `badge-soft`, `badge-ghost` -- color: `badge-neutral`, `badge-primary`, `badge-secondary`, `badge-accent`, `badge-info`, `badge-success`, `badge-warning`, `badge-error` -- size: `badge-xs`, `badge-sm`, `badge-md`, `badge-lg`, `badge-xl` - -#### Syntax - -```html -Badge -``` - -#### Rules - -- {MODIFIER} is optional and can have one of each style/color/size class names -- Can be used inside text or buttons -- To create an empty badge, just remove the text between the span tags - -### breadcrumbs - -Breadcrumbs helps users to navigate - -[breadcrumbs docs](https://daisyui.com/components/breadcrumbs/) - -#### Class names - -- component: `breadcrumbs` - -#### Syntax - -```html -
- -
-``` - -#### Rules - -- breadcrumbs only has one main class name -- Can contain icons inside the links -- If you set `max-width` or the list gets larger than the container it will scroll - -### button - -Buttons allow the user to take actions - -[button docs](https://daisyui.com/components/button/) - -#### Class names - -- component: `btn` -- color: `btn-neutral`, `btn-primary`, `btn-secondary`, `btn-accent`, `btn-info`, `btn-success`, `btn-warning`, `btn-error` -- style: `btn-outline`, `btn-dash`, `btn-soft`, `btn-ghost`, `btn-link` -- behavior: `btn-active`, `btn-disabled` -- size: `btn-xs`, `btn-sm`, `btn-md`, `btn-lg`, `btn-xl` -- modifier: `btn-wide`, `btn-block`, `btn-square`, `btn-circle` - -#### Syntax - -```html - -``` - -#### Rules - -- {MODIFIER} is optional and can have one of each color/style/behavior/size/modifier class names -- btn can be used on any html tags such as ` -``` - -#### Rules - -- {MODIFIER} is optional and can have one of the size class names -- To make a button active, add `dock-active` class to the button -- add `` is required for responsivness of the dock in iOS - -### drawer - -Drawer is a grid layout that can show/hide a sidebar on the left or right side of the page - -[drawer docs](https://daisyui.com/components/drawer/) - -#### Class names - -- component: `drawer` -- part: `drawer-toggle`, `drawer-content`, `drawer-side`, `drawer-overlay` -- placement: `drawer-end` -- modifier: `drawer-open` - -#### Syntax - -```html -
- -
{CONTENT}
-
{SIDEBAR}
-
-``` - -where {CONTENT} can be navbar, site content, footer, etc -and {SIDEBAR} can be a menu like: - -```html - -``` - -#### Rules - -- {MODIFIER} is optional and can have one of the modifier/placement class names -- `id` is required for the `drawer-toggle` input. change `my-drawer` to a unique id according to your needs -- `lg:drawer-open` can be used to make sidebar visible on larger screens -- `drawer-toggle` is a hidden checkbox. Use label with "for" attribute to toggle state -- if you want to open the drawer when a button is clicked, use `` where `my-drawer` is the id of the `drawer-toggle` input -- when using drawer, every page content must be inside `drawer-content` element. for example navbar, footer, etc should not be outside of `drawer` - -### dropdown - -Dropdown can open a menu or any other element when the button is clicked - -[dropdown docs](https://daisyui.com/components/dropdown/) - -#### Class names - -- component: `dropdown` -- part: `dropdown-content` -- placement: `dropdown-start`, `dropdown-center`, `dropdown-end`, `dropdown-top`, `dropdown-bottom`, `dropdown-left`, `dropdown-right` -- modifier: `dropdown-hover`, `dropdown-open` - -#### Syntax - -Using details and summary - -```html -
- Button - -
-``` - -Using popover API - -```html - - -``` - -Using CSS focus - -```html -
-
Button
- -
-``` - -#### Rules - -- {MODIFIER} is optional and can have one of the modifier/placement class names -- replace `{id}` and `{anchor}` with a unique name -- For CSS focus dropdowns, use `tabindex="0"` and `role="button"` on the button -- The content can be any HTML element (not just `