Layout Structure

The layout components are located in resources/views/components. The main layout file is resources/views/components/layouts/app.blade.php, which orchestrates the following components:

• layouts/app.blade.php: The main layout wrapper. It handles the responsive logic, rendering sidebar.blade.php on desktop and bottom-bar.blade.php on mobile.
• sidebar.blade.php: The desktop sidebar navigation.
• bottom-bar.blade.php: The mobile bottom navigation bar.
• header.blade.php: The top header, typically containing the user profile and theme toggles.
• menu.blade.php: A shared component for navigation links, used by the sidebar.

Layout Customization

You can customize the layout colors (shell and content background) by modifying the CSS variables in resources/css/app.css.

 1:root {
 2--bg-shell: theme('colors.gray.100');
 3--bg-content: theme('colors.white');
 4}
 5 
 6.dark {
 7--bg-shell: theme('colors.gray.900');
 8--bg-content: theme('colors.gray.800');
 9}
10 
11@theme {
12--color-app-shell: var(--bg-shell);
13--color-app-content: var(--bg-content);
14}

1/* Slate (Cool Gray) */
2:root {
3--bg-shell: theme('colors.slate.100');
4--bg-content: theme('colors.white');
5}
6.dark {
7--bg-shell: theme('colors.slate.950');
8--bg-content: theme('colors.slate.900');
9}

1/* Zinc (Industrial) */
2:root {
3--bg-shell: theme('colors.zinc.100');
4--bg-content: theme('colors.white');
5}
6.dark {
7--bg-shell: theme('colors.zinc.950');
8--bg-content: theme('colors.zinc.900');
9}

1/* Neutral (Warm) */
2:root {
3--bg-shell: theme('colors.neutral.100');
4--bg-content: theme('colors.white');
5}
6.dark {
7--bg-shell: theme('colors.neutral.950');
8--bg-content: theme('colors.neutral.900');
9}