diff --git a/public/css/app.css b/public/css/app.css index e221812..f6b7fe1 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -380,10 +380,8 @@ Ensure the default browser behavior of the `hidden` attribute. display: none; } *, ::before, ::after { - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; + --tw-border-opacity: 1; + border-color: rgb(229 231 235 / var(--tw-border-opacity)); } .container { width: 100%; @@ -418,44 +416,144 @@ Ensure the default browser behavior of the `hidden` attribute. max-width: 1536px; } } +.absolute { + position: absolute; +} +.relative { + position: relative; +} .m-0 { margin: 0px; } -.mb-0 { - margin-bottom: 0px; +.ml-2 { + margin-left: 0.5rem; } -.mr-auto { - margin-right: auto; +.mt-2 { + margin-top: 0.5rem; } -.ml-auto { - margin-left: auto; +.mb-0 { + margin-bottom: 0px; } .block { display: block; } +.flex { + display: flex; +} .hidden { display: none; } -.bg-gray-500 { - --tw-bg-opacity: 1; - background-color: rgb(107 114 128 / var(--tw-bg-opacity)); +.h-screen { + height: 100vh; +} +.h-12 { + height: 3rem; +} +.h-8 { + height: 2rem; +} +.h-5 { + height: 1.25rem; +} +.h-full { + height: 100%; +} +.w-1\/3 { + width: 33.333333%; +} +.w-8 { + width: 2rem; +} +.w-5 { + width: 1.25rem; +} +.w-56 { + width: 14rem; +} +.flex-1 { + flex: 1 1 0%; +} +.flex-col { + flex-direction: column; +} +.items-center { + align-items: center; +} +.justify-end { + justify-content: flex-end; +} +.justify-center { + justify-content: center; +} +.overflow-y-hidden { + overflow-y: hidden; +} +.rounded-full { + border-radius: 9999px; +} +.border-b-2 { + border-bottom-width: 2px; +} +.border-blue-500 { + --tw-border-opacity: 1; + border-color: rgb(59 130 246 / var(--tw-border-opacity)); +} +.border-white { + --tw-border-opacity: 1; + border-color: rgb(255 255 255 / var(--tw-border-opacity)); } .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } +.bg-gray-200 { + --tw-bg-opacity: 1; + background-color: rgb(229 231 235 / var(--tw-bg-opacity)); +} +.fill-current { + fill: currentColor; +} +.object-cover { + -o-object-fit: cover; + object-fit: cover; +} .p-0 { padding: 0px; } -.py-4 { - padding-top: 1rem; - padding-bottom: 1rem; +.px-4 { + padding-left: 1rem; + padding-right: 1rem; +} +.px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; +} +.pl-8 { + padding-left: 2rem; } .align-baseline { vertical-align: baseline; } -.shadow-sm { - --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); - --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +.font-sans { + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +} +.text-sm { + font-size: 0.875rem; + line-height: 1.25rem; +} +.text-gray-700 { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} +.text-gray-800 { + --tw-text-opacity: 1; + color: rgb(31 41 55 / var(--tw-text-opacity)); +} +.antialiased { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.focus\:outline-none:focus { + outline: 2px solid transparent; + outline-offset: 2px; } \ No newline at end of file diff --git a/public/js/app.js b/public/js/app.js index 3decc03..90b9f3e 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -1908,6 +1908,7 @@ module.exports = { "use strict"; __webpack_require__.r(__webpack_exports__); +/* harmony import */ var _Nav__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Nav */ "./resources/js/components/Nav.vue"); // // // @@ -1915,8 +1916,12 @@ __webpack_require__.r(__webpack_exports__); // // // + /* harmony default export */ __webpack_exports__["default"] = ({ name: 'App', + components: { + Nav: _Nav__WEBPACK_IMPORTED_MODULE_0__["default"] + }, mounted: function mounted() { console.log('App mounted.'); } @@ -1924,6 +1929,75 @@ __webpack_require__.r(__webpack_exports__); /***/ }), +/***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/Nav.vue?vue&type=script&lang=js&": +/*!**************************************************************************************************************************************************************!*\ + !*** ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/Nav.vue?vue&type=script&lang=js& ***! + \**************************************************************************************************************************************************************/ +/*! exports provided: default */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +/* harmony default export */ __webpack_exports__["default"] = ({ + name: "Nav" +}); + +/***/ }), + /***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/views/Start.vue?vue&type=script&lang=js&": /*!***********************************************************************************************************************************************************!*\ !*** ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/views/Start.vue?vue&type=script&lang=js& ***! @@ -19641,8 +19715,8 @@ var render = function () { var _c = _vm._self._c || _h return _c( "div", - { staticClass: "container" }, - [_vm._v("\n Hello world\n "), _c("router-view")], + { staticClass: "flex flex-col flex-1 h-screen overflow-y-hidden" }, + [_c("Nav"), _vm._v(" "), _c("router-view")], 1 ) } @@ -19651,6 +19725,187 @@ render._withStripped = true +/***/ }), + +/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/Nav.vue?vue&type=template&id=7cd4f788&scoped=true&": +/*!******************************************************************************************************************************************************************************************************************!*\ + !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/Nav.vue?vue&type=template&id=7cd4f788&scoped=true& ***! + \******************************************************************************************************************************************************************************************************************/ +/*! exports provided: render, staticRenderFns */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "render", function() { return render; }); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return staticRenderFns; }); +var render = function () { + var _vm = this + var _h = _vm.$createElement + var _c = _vm._self._c || _h + return _c("div", { staticClass: "bg-white h-12 flex px-4 items-center" }, [ + _c("div", { staticClass: "w-1/3" }, [ + _c( + "div", + { staticClass: "flex" }, + [ + _c("router-link", { attrs: { to: "/" } }, [ + _c( + "svg", + { + staticClass: "fill-current w-8 h-8", + attrs: { + xmlns: "http://www.w3.org/2000/svg", + viewBox: "0 0 24 24", + }, + }, + [ + _c("path", { + attrs: { + d: "M23 12.1c0-6.1-4.9-11-11-11S1 6 1 12.1c0 5.5 4 10.1 9.3 10.9v-7.7H7.5v-3.2h2.8V9.7c0-2.8 1.6-4.3 4.2-4.3 1.2 0 2.5.2 2.5.2v2.7h-1.4c-1.4 0-1.8.8-1.8 1.7v2.1h3.1l-.5 3.2h-2.6V23c5.2-.9 9.2-5.4 9.2-10.9z", + fill: "#1877f2", + }, + }), + ] + ), + ]), + _vm._v(" "), + _c("div", { staticClass: "ml-2 relative" }, [ + _c("div", { staticClass: "absolute text-gray-700" }, [ + _c( + "svg", + { + staticClass: "fill-current w-5 h-5 mt-2 ml-2", + attrs: { viewBox: "0 0 24 24" }, + }, + [ + _c("path", { + attrs: { + "fill-rule": "evenodd", + d: "M20.2 18.1l-1.4 1.3-5.5-5.2 1.4-1.3 5.5 5.2zM7.5 12c-2.7 0-4.9-2.1-4.9-4.6s2.2-4.6 4.9-4.6 4.9 2.1 4.9 4.6S10.2 12 7.5 12zM7.5.8C3.7.8.7 3.7.7 7.3s3.1 6.5 6.8 6.5c3.8 0 6.8-2.9 6.8-6.5S11.3.8 7.5.8z", + "clip-rule": "evenodd", + }, + }), + ] + ), + ]), + _vm._v(" "), + _c("input", { + staticClass: + "rounded-full w-56 bg-gray-200 h-8 focus:outline-none focus:shadow-outline text-sm pl-8", + attrs: { + type: "text", + name: "search", + placeholder: "Search Facebook", + }, + }), + ]), + ], + 1 + ), + ]), + _vm._v(" "), + _c( + "div", + { staticClass: "w-1/3 flex justify-center items-center h-full" }, + [ + _c( + "router-link", + { + staticClass: + "px-6 border-b-2 border-blue-500 h-full flex items-center", + attrs: { to: "/" }, + }, + [ + _c( + "svg", + { + staticClass: "fill-current w-5 h-5", + attrs: { + xmlns: "http://www.w3.org/2000/svg", + viewBox: "0 0 24 24", + }, + }, + [ + _c("path", { + attrs: { + d: "M22.6 11l-9.9-9c-.4-.4-1.1-.4-1.5 0l-9.9 9c-.3.3-.5.8-.3 1.2.2.5.6.8 1.1.8h1.6v9c0 .4.3.6.6.6h5.4c.4 0 .6-.3.6-.6v-5.5h3.2V22c0 .4.3.6.6.6h5.4c.4 0 .6-.3.6-.6v-9h1.6c.5 0 .9-.3 1.1-.7.3-.5.2-1-.2-1.3zm-2.5-8h-4.3l5 4.5V3.6c0-.3-.3-.6-.7-.6z", + }, + }), + ] + ), + ] + ), + _vm._v(" "), + _c( + "router-link", + { + staticClass: "px-6 border-white h-full flex items-center", + attrs: { to: "/" }, + }, + [ + _c("img", { + staticClass: "w-8 h-8 object-cover rounded-full", + attrs: { + src: "https://cdn.pixabay.com/photo/2014/07/09/10/04/man-388104_960_720.jpg", + alt: "profile image for user", + }, + }), + ] + ), + _vm._v(" "), + _c( + "router-link", + { + staticClass: "px-6 border-white h-full flex items-center", + attrs: { to: "/" }, + }, + [ + _c( + "svg", + { + staticClass: "fill-current w-5 h-5", + attrs: { + xmlns: "http://www.w3.org/2000/svg", + viewBox: "0 0 24 24", + }, + }, + [ + _c("path", { + attrs: { + d: "M.5 11.6c0 3.4 1.7 6.3 4.3 8.3V24l3.9-2.1c1 .3 2.2.4 3.3.4 6.4 0 11.5-4.8 11.5-10.7C23.5 5.8 18.3 1 12 1S.5 5.8.5 11.6zm10.3-2.9l3 3.1 5.6-3.1-6.3 6.7-2.9-3.1-5.7 3.1 6.3-6.7z", + }, + }), + ] + ), + ] + ), + ], + 1 + ), + _vm._v(" "), + _c("div", { staticClass: "w-1/3 flex justify-end" }, [ + _c( + "svg", + { + staticClass: "fill-current w-5 h-5", + attrs: { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" }, + }, + [ + _c("path", { + attrs: { + d: "M22.9 10.1c-.1-.1-.2-.2-.3-.2L20 9.5c-.1-.5-.3-.9-.6-1.4.2-.2.4-.6.8-1 .3-.4.6-.8.7-1 .1 0 .1-.2.1-.3 0-.1 0-.2-.1-.3-.3-.5-1.1-1.3-2.4-2.4-.1-.1-.2-.1-.4-.1-.1 0-.3 0-.3.1l-2 1.5c-.4-.2-.8-.4-1.3-.5l-.4-2.6c0-.1-.1-.2-.2-.3-.1-.2-.2-.2-.3-.2h-3.2c-.3 0-.4.1-.5.4-.1.5-.3 1.4-.4 2.7-.5.1-.9.3-1.3.5l-2-1.5c-.1-.1-.3-.2-.4-.2-.2 0-.7.3-1.4 1-.6.7-1.1 1.3-1.4 1.6-.1.1-.1.2-.1.3 0 .1 0 .2.1.3.6.8 1.2 1.4 1.5 2-.2.5-.3.9-.5 1.4l-2.6.4c-.1 0-.2.1-.3.2-.1.1-.1.2-.1.3v3.2c0 .1 0 .2.1.3.1.1.2.2.3.2l2.6.4c.1.5.3.9.6 1.4-.2.2-.4.6-.8 1-.3.4-.6.8-.7 1-.1.1-.1.2-.1.3 0 .1 0 .2.1.3.4.5 1.2 1.3 2.4 2.4.1.1.2.2.4.2.1 0 .3 0 .4-.1l2-1.5c.3.1.7.3 1.2.5l.4 2.6c0 .1.1.2.2.3.1.1.2.1.4.1h3.2c.3 0 .4-.1.5-.4.1-.5.3-1.4.4-2.7.4-.1.9-.3 1.3-.5l2 1.5c.1.1.3.1.4.1.2 0 .7-.3 1.3-1 .7-.7 1.2-1.2 1.4-1.5.1-.1.1-.2.1-.3 0-.1 0-.2-.1-.4-.7-.8-1.2-1.5-1.5-2 .2-.4.4-.8.6-1.3l2.7-.4c.1 0 .2-.1.3-.2.1-.1.1-.2.1-.3v-3.2c-.2-.1-.2-.2-.3-.3zm-8.3 4.5c-.7.7-1.6 1.1-2.6 1.1s-1.9-.4-2.6-1.1c-.7-.7-1.1-1.6-1.1-2.6s.4-1.9 1.1-2.6c.7-.7 1.6-1.1 2.6-1.1s1.9.4 2.6 1.1c.7.7 1.1 1.6 1.1 2.6s-.4 1.9-1.1 2.6z", + }, + }), + ] + ), + ]), + ]) +} +var staticRenderFns = [] +render._withStripped = true + + + /***/ }), /***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/views/Start.vue?vue&type=template&id=0af62c5a&scoped=true&": @@ -35204,6 +35459,75 @@ __webpack_require__.r(__webpack_exports__); +/***/ }), + +/***/ "./resources/js/components/Nav.vue": +/*!*****************************************!*\ + !*** ./resources/js/components/Nav.vue ***! + \*****************************************/ +/*! exports provided: default */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var _Nav_vue_vue_type_template_id_7cd4f788_scoped_true___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Nav.vue?vue&type=template&id=7cd4f788&scoped=true& */ "./resources/js/components/Nav.vue?vue&type=template&id=7cd4f788&scoped=true&"); +/* harmony import */ var _Nav_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Nav.vue?vue&type=script&lang=js& */ "./resources/js/components/Nav.vue?vue&type=script&lang=js&"); +/* empty/unused harmony star reexport *//* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ "./node_modules/vue-loader/lib/runtime/componentNormalizer.js"); + + + + + +/* normalize component */ + +var component = Object(_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__["default"])( + _Nav_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__["default"], + _Nav_vue_vue_type_template_id_7cd4f788_scoped_true___WEBPACK_IMPORTED_MODULE_0__["render"], + _Nav_vue_vue_type_template_id_7cd4f788_scoped_true___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"], + false, + null, + "7cd4f788", + null + +) + +/* hot reload */ +if (false) { var api; } +component.options.__file = "resources/js/components/Nav.vue" +/* harmony default export */ __webpack_exports__["default"] = (component.exports); + +/***/ }), + +/***/ "./resources/js/components/Nav.vue?vue&type=script&lang=js&": +/*!******************************************************************!*\ + !*** ./resources/js/components/Nav.vue?vue&type=script&lang=js& ***! + \******************************************************************/ +/*! exports provided: default */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var _node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Nav_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib??ref--4-0!../../../node_modules/vue-loader/lib??vue-loader-options!./Nav.vue?vue&type=script&lang=js& */ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/Nav.vue?vue&type=script&lang=js&"); +/* empty/unused harmony star reexport */ /* harmony default export */ __webpack_exports__["default"] = (_node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Nav_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__["default"]); + +/***/ }), + +/***/ "./resources/js/components/Nav.vue?vue&type=template&id=7cd4f788&scoped=true&": +/*!************************************************************************************!*\ + !*** ./resources/js/components/Nav.vue?vue&type=template&id=7cd4f788&scoped=true& ***! + \************************************************************************************/ +/*! exports provided: render, staticRenderFns */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_Nav_vue_vue_type_template_id_7cd4f788_scoped_true___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../node_modules/vue-loader/lib??vue-loader-options!./Nav.vue?vue&type=template&id=7cd4f788&scoped=true& */ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/Nav.vue?vue&type=template&id=7cd4f788&scoped=true&"); +/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "render", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_Nav_vue_vue_type_template_id_7cd4f788_scoped_true___WEBPACK_IMPORTED_MODULE_0__["render"]; }); + +/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_Nav_vue_vue_type_template_id_7cd4f788_scoped_true___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"]; }); + + + /***/ }), /***/ "./resources/js/router.js": @@ -35321,8 +35645,8 @@ __webpack_require__.r(__webpack_exports__); /*! no static exports found */ /***/ (function(module, exports, __webpack_require__) { -__webpack_require__(/*! /var/www/app/resources/js/app.js */"./resources/js/app.js"); -module.exports = __webpack_require__(/*! /var/www/app/resources/sass/app.scss */"./resources/sass/app.scss"); +__webpack_require__(/*! /var/www/html/facebook-clone-laravel/resources/js/app.js */"./resources/js/app.js"); +module.exports = __webpack_require__(/*! /var/www/html/facebook-clone-laravel/resources/sass/app.scss */"./resources/sass/app.scss"); /***/ }) diff --git a/resources/js/components/App.vue b/resources/js/components/App.vue index d88f092..75e1880 100644 --- a/resources/js/components/App.vue +++ b/resources/js/components/App.vue @@ -1,13 +1,18 @@ + + diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index 0295377..d3acfaa 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -19,60 +19,9 @@ - +
- - -
+
@yield('content')