Setup sidebar

Gemfile

@@ -17,6 +17,7 @@ gem 'haml-rails'
 gem 'turbolinks', '~> 5'
 gem 'jquery-rails'
 gem 'jquery-ui-rails'
+gem 'js_cookie_rails'
 gem 'bootstrap', '~> 4.4.1'
 gem 'font-awesome-sass', '~> 5.12.0'
 gem 'bootstrap-will_paginate'

Gemfile.lock

@@ -104,6 +104,8 @@ GEM
       thor (>= 0.14, < 2.0)
     jquery-ui-rails (6.0.1)
       railties (>= 3.2.16)
+    js_cookie_rails (2.2.0)
+      railties (>= 3.1)
     listen (3.1.5)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
@@ -227,6 +229,7 @@ DEPENDENCIES
   jbuilder (~> 2.5)
   jquery-rails
   jquery-ui-rails
+  js_cookie_rails
   listen (>= 3.0.5, < 3.2)
   mysql2 (>= 0.3.18, < 0.5)
   nested_form

app/assets/javascripts/application.js

@@ -14,5 +14,6 @@
 //= require turbolinks
 //= require jquery3
 //= require jquery-ui/effect.all
+//= require js.cookie
 //= require bootstrap
 //= require_tree ./application

app/assets/javascripts/application/template-scripts.js

@@ -4,6 +4,9 @@ $(document).on('click', "#sidebarToggle, #sidebarToggleTop", function(e) {
     $(".sidebar").toggleClass("toggled");
     if ($(".sidebar").hasClass("toggled")) {
         $('.sidebar .collapse').collapse('hide');
+        Cookies.set("sidebar_toggled", true);
+    } else {
+        Cookies.remove("sidebar_toggled");
     };
 });
 

app/views/layouts/application/_sidebar.haml

-%ul#accordionSidebar.navbar-nav.bg-gradient-primary.sidebar.sidebar-dark.accordion
-  / Sidebar - Brand
-  %a.sidebar-brand.d-flex.align-items-center.justify-content-center{href: "index.html"}
+%ul#accordionSidebar.navbar-nav.bg-gradient-primary.sidebar.sidebar-dark.accordion{class: ("toggled" if cookies["sidebar_toggled"]) }
+
+  = link_to root_path, class: "sidebar-brand d-flex align-items-center justify-content-center" do
     .sidebar-brand-icon.rotate-n-15
-      %i.fas.fa-laugh-wink
+      = icon 'fas', 'drumstick-bite'
     .sidebar-brand-text.mx-3
-      SB Admin
-      %sup 2
-  / Divider
-  %hr.sidebar-divider.my-0/
-  / Nav Item - Dashboard
+      Chicken Farm
+  %hr.sidebar-divider.my-0
+
   %li.nav-item.active
-    %a.nav-link{href: "index.html"}
-      %i.fas.fa-fw.fa-tachometer-alt
-      %span Dashboard
-  / Divider
-  %hr.sidebar-divider/
-  / Heading
-  .sidebar-heading
-    Interface
-  / Nav Item - Pages Collapse Menu
-  %li.nav-item
-    %a.nav-link.collapsed{"aria-controls" => "collapseTwo", "aria-expanded" => "true", "data-target" => "#collapseTwo", "data-toggle" => "collapse", href: "#"}
-      %i.fas.fa-fw.fa-cog
-      %span Components
-    #collapseTwo.collapse{"aria-labelledby" => "headingTwo", "data-parent" => "#accordionSidebar"}
-      .bg-white.py-2.collapse-inner.rounded
-        %h6.collapse-header Custom Components:
-        %a.collapse-item{href: "buttons.html"} Buttons
-        %a.collapse-item{href: "cards.html"} Cards
-  / Nav Item - Utilities Collapse Menu
-  %li.nav-item
-    %a.nav-link.collapsed{"aria-controls" => "collapseUtilities", "aria-expanded" => "true", "data-target" => "#collapseUtilities", "data-toggle" => "collapse", href: "#"}
-      %i.fas.fa-fw.fa-wrench
-      %span Utilities
-    #collapseUtilities.collapse{"aria-labelledby" => "headingUtilities", "data-parent" => "#accordionSidebar"}
-      .bg-white.py-2.collapse-inner.rounded
-        %h6.collapse-header Custom Utilities:
-        %a.collapse-item{href: "utilities-color.html"} Colors
-        %a.collapse-item{href: "utilities-border.html"} Borders
-        %a.collapse-item{href: "utilities-animation.html"} Animations
-        %a.collapse-item{href: "utilities-other.html"} Other
-  / Divider
-  %hr.sidebar-divider/
-  / Heading
-  .sidebar-heading
-    Addons
-  / Nav Item - Pages Collapse Menu
-  %li.nav-item
-    %a.nav-link.collapsed{"aria-controls" => "collapsePages", "aria-expanded" => "true", "data-target" => "#collapsePages", "data-toggle" => "collapse", href: "#"}
-      %i.fas.fa-fw.fa-folder
-      %span Pages
-    #collapsePages.collapse{"aria-labelledby" => "headingPages", "data-parent" => "#accordionSidebar"}
-      .bg-white.py-2.collapse-inner.rounded
-        %h6.collapse-header Login Screens:
-        %a.collapse-item{href: "login.html"} Login
-        %a.collapse-item{href: "register.html"} Register
-        %a.collapse-item{href: "forgot-password.html"} Forgot Password
-        .collapse-divider
-        %h6.collapse-header Other Pages:
-        %a.collapse-item{href: "404.html"} 404 Page
-        %a.collapse-item{href: "blank.html"} Blank Page
-  / Nav Item - Charts
-  %li.nav-item
-    %a.nav-link{href: "charts.html"}
-      %i.fas.fa-fw.fa-chart-area
-      %span Charts
-  / Nav Item - Tables
-  %li.nav-item
-    %a.nav-link{href: "tables.html"}
-      %i.fas.fa-fw.fa-table
-      %span Tables
-  / Divider
-  %hr.sidebar-divider.d-none.d-md-block/
+    = link_to root_path, class: 'nav-link' do
+      = icon('fas', 'tachometer-alt', class: 'fa-fw') + "\n" + tag.span("Головна")
+
+
+
+  %hr.sidebar-divider.d-none.d-md-block
   / Sidebar Toggler (Sidebar)
   .text-center.d-none.d-md-inline
     %button#sidebarToggle.rounded-circle.border-0
\ No newline at end of file