first part of new theme integration

app/views/layouts/_left-sidebar.html.erb

@@ -0,0 +1,72 @@
+<!-- ========== Left Sidebar Start ========== -->
+<div class="leftside-menu">
+
+    <!-- LOGO -->
+    <a href="index.html" class="logo text-center logo-light">
+        <span class="logo-lg">
+            <%= image_pack_tag 'media/images/logo.png', alt: 'startup', height: 16 %>
+        </span>
+        <span class="logo-sm">
+            <%= image_pack_tag 'media/images/logo_sm.png', alt: 'startup', height: 16 %>
+        </span>
+    </a>
+
+    <div class="h-100" id="leftside-menu-container" data-simplebar>
+
+        <!--- Sidemenu -->
+        <ul class="side-nav">
+
+            <li class="side-nav-item">
+                <a data-bs-toggle="collapse" href="#sidebarCollection" aria-expanded="false" aria-controls="sidebarCollection" class="side-nav-link">
+                    <i class="fas fa-layer-group"></i>
+                    <span> Collections </span>
+                    <span class="fas fa-chevron-right"></span>
+                </a>
+                <div class="collapse" id="sidebarCollection">
+                    <ul class="side-nav-second-level">
+                        <li>
+                            <a class="<%= 'active' if current_page?(wow_mounts_path) %>" aria-current="page" href="<%= wow_mounts_path %>"><%= t('layouts.navbar.mounts') %></a>
+                        </li>
+                        <li>
+                            <a class="<%= 'active' if current_page?(wow_pets_path) %>" aria-current="page" href="<%= wow_pets_path %>"><%= t('layouts.navbar.pets') %></a>
+                        </li>
+                    </ul>
+                </div>
+            </li>
+
+            <li class="side-nav-item">
+                <a data-bs-toggle="collapse" href="#sidebarEmail" aria-expanded="false" aria-controls="sidebarEmail" class="side-nav-link">
+                    <i class="fas fa-gamepad"></i>
+                    <span> Games </span>
+                    <span class="fas fa-chevron-right"></span>
+                </a>
+                <div class="collapse" id="sidebarEmail">
+                    <ul class="side-nav-second-level">
+                        <li>
+                            <a class="<%= 'active' if current_page?(wow_characters_path) %>" aria-current="page" href="<%= wow_characters_path %>"><%= t('layouts.navbar.characters') %></a>
+                        </li>
+                        <li>
+                            <a class="<%= 'active' if current_page?(wow_reputations_path) %>" aria-current="page" href="<%= wow_reputations_path %>"><%= t('layouts.navbar.reputations') %></a>
+                        </li>
+                    </ul>
+                </div>
+            </li>
+
+            <li class="side-nav-item">
+                <a class="side-nav-link <%= 'active' if current_page?(achievements_path) %>" aria-current="page" href="<%= achievements_path %>">
+                    <i class="fas fa-book"></i>
+                    <span> <%= t('layouts.navbar.achievements') %> </span>
+                </a>
+            </li>
+
+        </ul>
+
+        <!-- End Sidebar -->
+
+        <div class="clearfix"></div>
+
+    </div>
+    <!-- Sidebar -left -->
+
+</div>
+<!-- Left Sidebar End -->

app/views/layouts/_locales.html.erb

@@ -1,19 +1,32 @@
-<li class="nav-item dropdown">
-  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-      <i class="fas fa-globe-europe"></i>
-  </a>
-  <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
-    <li class="dropdown-item"><%= link_to '<span class="flag-icon flag-icon-de"></span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'de-de', only_path: true)) %></li>
-    <li class="dropdown-item"><%= link_to '<span class="flag-icon flag-icon-gb"></span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'en-gb', only_path: true)) %></li>
-    <li class="dropdown-item"><%= link_to '<span class="flag-icon flag-icon-us"></span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'en-us', only_path: true)) %></li>
-    <li class="dropdown-item"><%= link_to '<span class="flag-icon flag-icon-mx"></span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'es-mx', only_path: true)) %></li>
-    <li class="dropdown-item"><%= link_to '<span class="flag-icon flag-icon-br"></span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'pt-br', only_path: true)) %></li>
-    <li class="dropdown-item"><%= link_to '<span class="flag-icon flag-icon-es"></span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'es-es', only_path: true)) %></li>
-    <li class="dropdown-item"><%= link_to '<span class="flag-icon flag-icon-fr"></span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'fr-fr', only_path: true)) %></li>
-    <li class="dropdown-item"><%= link_to '<span class="flag-icon flag-icon-it"></span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'it', only_path: true)) %></li>
-    <li class="dropdown-item"><%= link_to '<span class="flag-icon flag-icon-ru"></span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'ru-ru', only_path: true)) %></li>
-    <li class="dropdown-item"><%= link_to '<span class="flag-icon flag-icon-kr"></span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'ko', only_path: true)) %></li>
-    <li class="dropdown-item"><%= link_to '<span class="flag-icon flag-icon-tw"></span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'zh-tw', only_path: true)) %></li>
-    <li class="dropdown-item"><%= link_to '<span class="flag-icon flag-icon-cn"></span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'zh-cn', only_path: true)) %></li>
-  </ul>
+<li class="dropdown notification-list topbar-dropdown" id="locales">
+    <a class="nav-link dropdown-toggle arrow-none" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
+        <i class="fas fa-globe-europe align-middle"></i>
+        <i class="fas fa-chevron-down d-none d-sm-inline-block align-middle"></i>
+    </a>
+    <div class="dropdown-menu dropdown-menu-end dropdown-menu-animated topbar-dropdown-menu">
+
+        <%= link_to '<span class="flag-icon flag-icon-de align-middle">German</span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'de-de', only_path: true)), class: "dropdown-item notify-item" %>
+
+        <%= link_to '<span class="flag-icon flag-icon-gb align-middle">English</span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'en-gb', only_path: true)), class: "dropdown-item notify-item" %>
+
+        <%= link_to '<span class="flag-icon flag-icon-us align-middle">American</span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'en-us', only_path: true)), class: "dropdown-item notify-item" %>
+
+        <%= link_to '<span class="flag-icon flag-icon-mx align-middle">Mexicano</span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'es-mx', only_path: true)), class: "dropdown-item notify-item" %>
+
+        <%= link_to '<span class="flag-icon flag-icon-br align-middle">Portugués</span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'pt-br', only_path: true)), class: "dropdown-item notify-item" %>
+
+        <%= link_to '<span class="flag-icon flag-icon-es align-middle">Español</span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'es-es', only_path: true)), class: "dropdown-item notify-item" %>
+
+        <%= link_to '<span class="flag-icon flag-icon-fr align-middle">Français</span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'fr-fr', only_path: true)), class: "dropdown-item notify-item" %>
+
+        <%= link_to '<span class="flag-icon flag-icon-it align-middle">Italiano</span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'it', only_path: true)), class: "dropdown-item notify-item" %>
+
+        <%= link_to '<span class="flag-icon flag-icon-ru align-middle">Pусский</span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'ru-ru', only_path: true)), class: "dropdown-item notify-item" %>
+
+        <%= link_to '<span class="flag-icon flag-icon-kr align-middle">한국인</span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'ko', only_path: true)), class: "dropdown-item notify-item" %>
+
+        <%= link_to '<span class="flag-icon flag-icon-tw align-middle">台湾</span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'zh-tw', only_path: true)), class: "dropdown-item notify-item" %>
+
+        <%= link_to '<span class="flag-icon flag-icon-cn align-middle">中国人</span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'zh-cn', only_path: true)), class: "dropdown-item notify-item" %>
+    </div>
 </li>

app/views/layouts/_topbar.html.erb

@@ -0,0 +1,30 @@
+<!-- Topbar Start -->
+<div class="navbar-custom">
+    <ul class="list-unstyled topbar-menu float-end mb-0">
+
+        <%= render 'layouts/locales' %>
+
+        <li class="dropdown notification-list">
+            <a class="nav-link dropdown-toggle nav-user arrow-none me-0" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
+                <span class="account-user-name"><%= current_user.battletag %></span>
+
+            </a>
+            <div class="dropdown-menu dropdown-menu-end dropdown-menu-animated topbar-dropdown-menu profile-dropdown">
+                <!-- item-->
+                <div class=" dropdown-header noti-title">
+                    <h6 class="text-overflow m-0">Account</h6>
+                </div>
+
+                <%= link_to '<i class="fas fa-sign-out-alt"> Logout</i>'.html_safe, destroy_user_session_path, method: :delete, class: "dropdown-item notify-item" %>
+
+            </div>
+        </li>
+
+    </ul>
+
+    <button class="button-menu-mobile open-left">
+        <i class="fas fa-bars"></i>
+    </button>
+
+</div>
+<!-- end Topbar -->

app/views/layouts/application.html.erb

@@ -11,11 +11,26 @@
     <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
   </head>
 
-  <body>
-    <%= render 'layouts/navbar' %>
-    <%= render partial: 'layouts/flash', flash: flash %> 
-    <div class="container-fluid">
-    <%= yield %>
-    </div>
+  <% if user_signed_in? %>
+  <body class="loading" data-layout-config='{"leftSideBarTheme":"dark","layoutBoxed":false, "leftSidebarCondensed":false, "leftSidebarScrollable":false,"darkMode":false, "showRightSidebarOnStart": true}' style="visibility: visible;" data-leftbar-theme="dark">
+        <!-- Begin page -->
+        <div class="wrapper">
+            <%= render 'layouts/left-sidebar' %>
+
+            <div class="content-page">
+                <div class="content">
+                    <%= render 'layouts/topbar' %>
+
+                    <div class="container-fluid">
+                        <%= yield %>
+                    </div>
+                </div>
+            </div>
+        </div>
   </body>
+  <% else %>
+  <body class="loading" data-layout-config='{"darkMode":false}'>
+    <%= yield %>
+  </body>
+  <% end %>
 </html>