fix: top navigation, navigation tabs, and breadcrumbs

resources/sass/app.scss

@@ -19,5 +19,6 @@
 @import 'components/quick_search';
 @import 'components/user-active';
 @import 'components/user-torrents';
+@import 'layout/header';
 @import 'layout/secondary-nav';
 @import 'layout/top_nav';

resources/sass/layout/_header.scss

@@ -0,0 +1,8 @@
+body > header {
+    position: sticky;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 10;
+    margin-bottom: 16px;
+}

resources/sass/layout/_secondary-nav.scss

@@ -1,16 +1,13 @@
 /* Secondary nav */
 
 .secondary-nav {
-    position: fixed;
-    top: 0;
-    z-index: 5;
     display: grid;
     grid-template-columns: 1fr auto 1fr;
     background-color: #292929;
-    margin: 48px 0 16px 0;
+    margin: 0;
     padding: 0 18px;
     column-gap: 18px;
-    width: 100vw;
+    width: 100%;
 
     @media only screen and (max-width: 1024px) {
         display: flex;
@@ -52,7 +49,7 @@
     }
 
     @media only screen and (max-width: 1024px) {
-        padding: 16px 18px;
+        padding: 12px;
     }
 }
 
@@ -69,12 +66,10 @@
 }
 
 .nav-tab-menu__items {
-    position: static;
-    box-shadow: none;
     margin-left: 12px;
     display: none;
     position: absolute;
-    top: calc(32px - 5px);
+    top: calc(80px - 5px);
     flex-direction: column;
     align-items: stretch;
     padding: 8px 0 8px 0;
@@ -86,7 +81,7 @@
     z-index: 1000;
 
     @media only screen and (max-width: 1024px) {
-        top: calc(32px + 2 * 11px - 5px);
+        top: calc(80px + (12px - 5px) - 5px);
     }
 }
 
@@ -115,7 +110,6 @@
     font-size: 14px;
     align-items: center;
     overflow-x: hidden;
-    min-width: 240px;
     max-width: 100%;
 }
 

resources/sass/layout/_top_nav.scss

@@ -2,29 +2,21 @@
     background-color: #363636;
     box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.2);
     display: grid;
-    grid-template: 'left menus right toggle' 48px / 1fr auto 1fr auto;
+    grid-template: 'left . menus . right toggle' 48px / 1fr 40px auto 40px 1fr auto;
     align-items: center;
     padding: 0 14px;
-    position: fixed;
-    width: 100vw;
-    top: 0;
-    left: 0;
-    z-index: 10;
 
     &.mobile {
         grid-template: 'left toggle' 'menus menus' 'right right' auto / 1fr auto;
+        height: 100vh;
+        overflow-y: auto;
     }
 }
 
 .top-nav__left {
     grid-area: left;
     display: flex;
-    gap: 36px;
-    padding: 12px 12px 12px 6px;
-
-    @media screen and (max-width: 1280px) {
-        gap: 16px;
-    }
+    column-gap: 32px;
 
     @media screen and (max-width: 767px) {
         & .top-nav__site-logo,
@@ -38,17 +30,13 @@
 .top-nav__right {
     grid-area: right;
     display: flex;
-    gap: 36px;
+    column-gap: 40px;
     justify-content: end;
 
     &.mobile {
         display: flex;
         flex-direction: column;
     }
-
-    @media screen and (max-width: 1280px) {
-        gap: 16px;
-    }
 }
 
 /* Branding
@@ -59,7 +47,7 @@
     text-decoration: none;
     color: #9682de;
     display: flex;
-    gap: 5px;
+    column-gap: 5px;
     align-items: center;
     font-size: 3rem;
 }
@@ -89,7 +77,7 @@
     list-style-type: none;
     align-items: stretch;
     grid-area: menus;
-    margin: auto 48px;
+    margin: auto 0;
     padding: 0;
 
     &.mobile {
@@ -108,10 +96,6 @@
         }
     }
 
-    @media screen and (max-width: 1280px) {
-        margin: auto 16px;
-    }
-
     @media screen and (max-width: 767px) {
         display: none;
         margin: auto 0;
@@ -180,7 +164,7 @@
     top: calc(48px - 5px);
     flex-direction: column;
     padding: 6px;
-    gap: 6px;
+    row-gap: 6px;
     background-color: #3c3c3c;
     border-radius: 6px;
     box-shadow: 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12),
@@ -220,7 +204,7 @@
     height: 100%;
     display: grid;
     grid-template-columns: 30px auto;
-    gap: 10px;
+    column-gap: 10px;
     align-items: center;
     line-height: 15px;
     background: transparent;
@@ -279,15 +263,14 @@
     padding: 0;
     margin: 0;
 
-    @media screen and (min-width: 767px) and (max-width: 1280px) {
+    @media screen and (min-width: 767px) and (max-width: 1400px) {
         display: none;
     }
 
-    @media screen and (min-width: 1800px) {
+    @media screen and (min-width: 2100px) {
         grid-template-rows: auto;
         grid-template-columns: repeat(8, auto);
         font-size: 12px;
-        margin: 0 40px;
     }
 
     @media screen and (max-width: 767px) {
@@ -344,7 +327,7 @@
 .top-nav__icon-bar {
     display: flex;
     list-style-type: none;
-    gap: 14px;
+    column-gap: 14px;
     align-items: center;
     grid-area: icon-bar;
     margin: 0;
@@ -358,12 +341,12 @@
         display: flex;
         flex-wrap: wrap;
         justify-content: space-around;
-        gap: 0;
+        column-gap: 0;
         width: 100%;
 
         & > li:not(& > li:last-child) {
             width: 32px;
-            margin: 16px calc((25% - 32px) / 2);
+            margin: 16px;
         }
 
         & > li:last-child {
@@ -436,7 +419,7 @@
     margin: 0;
     padding: 0;
 
-    @media screen and (min-width: 1023px) and (max-width: 1280px) {
+    @media screen and (min-width: 1023px) and (max-width: 1400px) {
         display: grid;
     }
 }
@@ -480,7 +463,7 @@
 
 .top-nav__username.top-nav__username {
     text-align: center;
-    padding: 12px 0 2px 0;
+    padding: 12px 0;
     grid-template-columns: auto;
 }
 

resources/sass/main/_custom.scss

@@ -40,9 +40,6 @@ body {
     line-height: 1.46666667;
     color: #696969;
 }
-main {
-    margin-top: 100px;
-}
 
 #main-content {
     margin-left: 230px;

resources/views/layout/default.blade.php

@@ -7,19 +7,19 @@
 <header>
     @include('partials.top_nav')
     <nav class="secondary-nav">
-        <ul class="breadcrumbsV2">
+        <ol class="breadcrumbsV2">
             @if (! Route::is('home.index'))
                 <li class="breadcrumbV2">
-                  <a class="breadcrumb__link">
+                  <a class="breadcrumb__link" href="{{ route('home.index') }}">
                       <i class="{{ config('other.font-awesome') }} fa-home"></i>
                   </a>
                 </li>
             @endif
             @yield('breadcrumbs')
-        </ul>
-        <ol class="nav-tabsV2">
-            @yield('nav-tabs')
         </ol>
+        <ul class="nav-tabsV2">
+            @yield('nav-tabs')
+        </ul>
     </nav>
     @include('cookie-consent::index')
     @include('partials.alerts')

resources/views/mediahub/tv/season/show.blade.php

@@ -20,7 +20,7 @@
         </a>
     </li>
     <li class="breadcrumbV2">
-        <a href="{{ route('mediahub.shows.show') }}" class="breadcrumb__link">
+        <a href="{{ route('mediahub.shows.show', ['id' => $show->id]) }}" class="breadcrumb__link">
             {{ $show->name }}
         </a>
     </li>

resources/views/rss/index.blade.php

@@ -12,7 +12,7 @@
 @endsection
 
 @section('nav-tabs')
-    <li class="nav-tab">
+    <li class="nav-tabV2">
         <a class="nav-tab__link" href="{{ route('torrents') }}">
             List
         </a>

resources/views/top10/index.blade.php

@@ -11,7 +11,7 @@
 @endsection
 
 @section('nav-tabs')
-    <li class="nav-tab">
+    <li class="nav-tabV2">
         <a class="nav-tab__link" href="{{ route('torrents') }}">
             List
         </a>

resources/views/torrent/upload.blade.php

@@ -16,8 +16,8 @@
 @endsection
 
 @section('nav-tabs')
-    <li class="nav-tab--active">
-        <a class="nav-tab--active__link" href="{{ route('torrents') }}">
+    <li class="nav-tabV2">
+        <a class="nav-tab__link" href="{{ route('torrents') }}">
             List
         </a>
     </li>
@@ -41,8 +41,8 @@
             {{ __('rss.rss') }}
         </a>
     </li>
-    <li class="nav-tabV2">
-        <a class="nav-tab__link" href="{{ route('upload_form', ['category_id' => 1]) }}">
+    <li class="nav-tab--active">
+        <a class="nav-tab--active__link" href="{{ route('upload_form', ['category_id' => 1]) }}">
             {{ __('common.upload') }}
         </a>
     </li>