header nav-panel edit

src/app/Http/Controllers/UserController.php

@@ -59,8 +59,6 @@ class UserController extends Controller
         return redirect()->back()->with('error', 'Sittings saving error');
     }
     
-    
-    
     public function loginForm() {
         return view('user.login');
     }

src/public/assets/css/common.css

@@ -11,8 +11,15 @@
     text-align: right;
     }
     
+ 
+.b-auth-wrap
+    {
+    height: calc(100vh - 160px);
+    }
+    
 .btn-google,
-.btn-email
+.btn-email,
+#sign-in-with-apple
     {
     color: #545454;
     background-color: #ffffff;
@@ -20,25 +27,22 @@
     }
     
     .btn-google:focus,
-    .btn-email:focus
+    .btn-email:focus,
+    #sign-in-with-apple:focus
         {
         outline: 0;
         box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
         }
     
-    :not(.btn-check)+.btn-google:active {
-        border-color: transparent;
-    }
     
 #sign-in-with-apple
     {
-    display: inline !important;
-    padding: 10px !important;
-    border-color: #000 !important;
+    padding: 8px !important;
     border-radius: 8px !important;
+    color: #545454 !important;
+    border: none !important;
     }
     
-    
 .b-email,
 .b-social
     {

src/public/assets/css/style.css

@@ -117,7 +117,7 @@ h6 {
 # Header
 --------------------------------------------------------------*/
 #header {
-  transition: all 0.5s;
+  /*transition: all 0.5s;*/
   background: #fff;
   z-index: 997;
   padding: 15px 0;
@@ -184,7 +184,7 @@ h6 {
   font-size: 14px;
   color: #16507b;
   white-space: nowrap;
-  transition: 0.3s;
+  /*transition: 0.3s;*/
 }
 
 .navbar a i,
@@ -251,10 +251,17 @@ h6 {
   color: #2487ce;
 }
 
+/*
 .navbar .dropdown:hover>ul {
   opacity: 1;
   top: 100%;
   visibility: visible;
+}*/
+
+.navbar .dropdown ul.visible {
+  opacity: 1;
+  top: 100%;
+  visibility: visible;
 }
 
 .navbar .dropdown .dropdown ul {
@@ -300,10 +307,10 @@ h6 {
   .mobile-nav-toggle {
     display: block;
   }
-
+  /*
   .navbar ul {
     display: none;
-  }
+  }*/
 }
 
 .navbar-mobile {

src/public/assets/js/login.js

@@ -33,11 +33,14 @@
     }
     
     on('click', '.btn-email', function(e) {
+        e.preventDefault();
         ToggleAuthBlock();
     });
 
     on('click', '.b-email_back', function(e) {
+        e.preventDefault();
         ToggleAuthBlock();
+        
     });
 
     

src/public/assets/js/main.js

@@ -272,4 +272,24 @@
    */
   new PureCounter();
   
+  
+    // Клик по логину-почте:
+    const navbarDropdown = document.querySelector('#navbar .dropdown');
+    const navbarDropdownUl = document.querySelector('#navbar .dropdown ul');
+    
+    if (navbarDropdownUl) {
+        document.addEventListener( 'click', (e) => {
+            const withinDropdown = e.composedPath().includes(navbarDropdown);
+            const withinBoundaries = e.composedPath().includes(navbarDropdownUl);
+                if (withinDropdown && !withinBoundaries) {
+                    e.preventDefault();
+                    navbarDropdownUl.classList.toggle('visible');
+                } else if (!withinBoundaries) {
+                    navbarDropdownUl.classList.remove('visible');
+                }
+        });
+    }
+    
+  
+
 })()
\ No newline at end of file

src/resources/views/layouts/layout.blade.php

@@ -31,16 +31,44 @@
             
             <h1 class="logo col-4"><a href="{{ route('home') }}">{{ config('project.name') }}</a></h1>
             
+            <nav id="navbar" class="navbar">
+                <ul>
+                    @auth
+                    
+                        @php
+                            $email = auth()->user()->email;
+                            //$email_brief = 'aa.chaplyginchaplyginchaplyginchaplyginchaplyginchaplygin@gmail.com';
+                            $email_brief = (strlen($email) > 30) ? substr_replace($email, '...', 5, 25) : $email;
+                        @endphp
+
+                        <li class="dropdown"><a href="#"><span class="fw-bold">{{ $email_brief }}</span> <i class="bi bi-chevron-down"></i></a>
+                            <ul>
+                                <li><a href="{{ url('settings') }}">Налаштування</a></li>
+                                <li><a href="{{ route('logout') }}">Вийти</a></li>
+                            </ul>
+                        </li>
+                    @endauth
+                    @guest
+                        <li><a class="getstarted" href="{{ route('login.create') }}">Увiйти</a></li>
+                    @endguest
+                </ul>
+                
+            </nav><!-- .navbar -->
+            
+            
+            <?php /* ?>
             <div class="b-header-menu col-4">
             @auth
-                <a class="" href="{{ url('settings') }}">Налаштування</a>
+                <a class="" href="{{ url('settings') }}">Налаштування</a> |
                 <a class="" href="{{ route('logout') }}">Вийти</a>
             @endauth
             @guest
-                <a class="" href="{{ route('login.create') }}">Вхiд</a>
+                <a class="" href="{{ route('login.create') }}">Вхiд</a> |
                 <a class="" href="{{ route('register.create') }}">Регiстрацiя</a>
             @endguest
             </div>
+            <?php */ ?>
+            
             
             @yield('head_content')
             

src/resources/views/user/login.blade.php

@@ -14,6 +14,10 @@
 <section>
     <div class='container'>
         
+        <div class="b-auth-wrap d-flex row align-items-center justify-content-center">
+
+            <div>
+
                 <div class="text-center">
                     <h4>Авторизацiя</h4>
                 </div>
@@ -26,12 +30,12 @@
                                 <a class="btn btn-google" href="{{ route('login.google') }}" role="button"><img src="https://img.icons8.com/color/16/000000/google-logo.png"> Sign in with Google</a>
                             </div>
                             <br>
-                    <div class="row">
+                            <div class="row b-social_apple">
                                 @signInWithApple("white", true, "sign-in", 10)
                             </div>
                             <br>
                             <div class="row">
-                        <a class="btn btn-email" href="#" role="button">Продолжить с помощью e-mail</a>
+                                <a class="btn btn-email" href="#" role="button">Продовжити за допомогою e-mail</a>
                             </div>
                         </div>
                     </div>
@@ -65,6 +69,10 @@
                 </div>
 
             </div>
+            
+        </div>
+            
+    </div>
 </section>
 
 

src/routes/web.php

@@ -17,11 +17,15 @@ use Laravel\Socialite\Facades\Socialite;
 |
 */
 
+
+Route::get('/test', function () {
+    return view('test');
+});
+
 Route::get('/', function () {
     return view('home');
 }) -> name('home');
 
-
 Route::group(['middleware' => 'guest'], function(){
     
     Route::get('/register', [UserController::class, 'create']) -> name('register.create');