feat: add pages and shared layout

Author: dhayab

package.json

@@ -5,6 +5,8 @@
         "build": "vite build"
     },
     "devDependencies": {
+        "@tailwindcss/aspect-ratio": "^0.4.2",
+        "@tailwindcss/forms": "^0.5.3",
         "autoprefixer": "^10.4.8",
         "axios": "^0.27",
         "laravel-vite-plugin": "^0.5.0",

postcss.config.js

@@ -1,5 +1,6 @@
 module.exports = {
     plugins: {
+        "tailwindcss/nesting": {},
         tailwindcss: {},
         autoprefixer: {},
     },

resources/css/app.css

@@ -0,0 +1,11 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.mobile-menu {
+    @apply hidden;
+
+    &--visible {
+        @apply flex;
+    }
+}

resources/css/bootstrap.css

@@ -0,0 +1,8 @@
+.mobile-filters-menu {
+    @apply hidden;
+
+    &--visible {
+        @apply flex;
+    }
+}
+

resources/css/home.css

@@ -1,34 +1,17 @@
-import _ from 'lodash';
+import _ from "lodash";
+import axios from "axios";
+
+import { handleMobileMenu } from "./utils";
+
 window._ = _;
 
 /**
  * We'll load the axios HTTP library which allows us to easily issue requests
  * to our Laravel back-end. This library automatically handles sending the
  * CSRF token as a header based on the value of the "XSRF" token cookie.
  */
-
-import axios from 'axios';
 window.axios = axios;
+window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
 
-window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
-
-/**
- * Echo exposes an expressive API for subscribing to channels and listening
- * for events that are broadcast by Laravel. Echo and event broadcasting
- * allows your team to easily build robust real-time web applications.
- */
-
-// import Echo from 'laravel-echo';
-
-// import Pusher from 'pusher-js';
-// window.Pusher = Pusher;
-
-// window.Echo = new Echo({
-//     broadcaster: 'pusher',
-//     key: import.meta.env.VITE_PUSHER_APP_KEY,
-//     wsHost: import.meta.env.VITE_PUSHER_HOST ?? `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
-//     wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
-//     wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
-//     forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
-//     enabledTransports: ['ws', 'wss'],
-// });
+/** Mobile menu */
+handleMobileMenu(".mobile-menu");

resources/css/search.css

@@ -0,0 +1,4 @@
+import { handleMobileMenu } from "./utils";
+
+/** Mobile filters menu */
+handleMobileMenu(".mobile-filters-menu");

resources/js/app.js

@@ -0,0 +1,17 @@
+export function handleMobileMenu(target) {
+    const mobileMenu = document.querySelector(target);
+
+    function toggleMobileMenu(value) {
+        mobileMenu.classList[value ? "add" : "remove"](
+            `${target.slice(1)}--visible`
+        );
+    }
+
+    document
+        .querySelector(`${target}-open-trigger`)
+        .addEventListener("click", () => toggleMobileMenu(true));
+
+    document
+        .querySelector(`${target}-close-trigger`)
+        .addEventListener("click", () => toggleMobileMenu(false));
+}