Import layout from template

Gemfile

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

Gemfile.lock

@@ -102,6 +102,8 @@ GEM
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
+    jquery-ui-rails (6.0.1)
+      railties (>= 3.2.16)
     listen (3.1.5)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
@@ -224,6 +226,7 @@ DEPENDENCIES
   haml-rails
   jbuilder (~> 2.5)
   jquery-rails
+  jquery-ui-rails
   listen (>= 3.0.5, < 3.2)
   mysql2 (>= 0.3.18, < 0.5)
   nested_form

app/assets/javascripts/application.js

@@ -13,5 +13,6 @@
 //= require rails-ujs
 //= require turbolinks
 //= require jquery3
+//= require jquery-ui/effect.all
 //= require bootstrap
 //= require_tree ./application

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

+// Toggle the side navigation
+$(document).on('click', "#sidebarToggle, #sidebarToggleTop", function(e) {
+    $("body").toggleClass("sidebar-toggled");
+    $(".sidebar").toggleClass("toggled");
+    if ($(".sidebar").hasClass("toggled")) {
+        $('.sidebar .collapse').collapse('hide');
+    };
+});
+
+// Close any open menu accordions when window is resized below 768px
+$(window).resize(function() {
+    if ($(window).width() < 768) {
+        $('.sidebar .collapse').collapse('hide');
+    };
+
+    // Toggle the side navigation when window is resized below 480px
+    if ($(window).width() < 480 && !$(".sidebar").hasClass("toggled")) {
+        $("body").addClass("sidebar-toggled");
+        $(".sidebar").addClass("toggled");
+        $('.sidebar .collapse').collapse('hide');
+    };
+});
+
+// Prevent the content wrapper from scrolling when the fixed side navigation hovered over
+// # TODO @kolosfed ???
+$(document).on('mousewheel DOMMouseScroll wheel', 'body.fixed-nav .sidebar', function(e) {
+    if ($(window).width() > 768) {
+        var e0 = e.originalEvent,
+            delta = e0.wheelDelta || -e0.detail;
+        this.scrollTop += (delta < 0 ? 1 : -1) * 30;
+        e.preventDefault();
+    }
+});
+
+// Scroll to top button appear
+$(document).on('scroll', function() {
+    var scrollDistance = $(this).scrollTop();
+    if (scrollDistance > 100) {
+        $('.scroll-to-top').fadeIn();
+    } else {
+        $('.scroll-to-top').fadeOut();
+    }
+});
+
+// Smooth scrolling using jQuery easing
+$(document).on('click', 'a.scroll-to-top', function(e) {
+    var $anchor = $(this);
+    $('html, body').stop().animate({
+        scrollTop: ($('#content-wrapper').offset().top)
+    }, 1000, 'easeInOutExpo');
+    e.preventDefault();
+});
\ No newline at end of file

app/views/layouts/application.haml

@@ -2,15 +2,22 @@
 %html
   %head
     %meta{content: "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}
-    %title Chicken Farm
-
     = csrf_meta_tags
-    %meta{charset: "utf-8"}
     %meta{"http-equiv": "X-UA-Compatible", content: "IE=edge"}
     %meta{name: "viewport", content: "width=device-width, initial-scale=1, shrink-to-fit=no"}
 
+    %title= (content_for(:title) ? yield(:title) + " | " : "") + "Chicken Farm"
+
     = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' # TODO @kolosfed data-turbolinks-track?
     = stylesheet_link_tag 'https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i'
     = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
   %body
+    #wrapper
+      = render 'layouts/application/sidebar'
+      #content-wrapper.d-flex.flex-column
+        #content
+          = render 'layouts/application/topbar'
+          .container-fluid{height: 1000}
             = yield
+        = render 'layouts/application/footer'
+      = render 'layouts/application/scroll_to_top'
\ No newline at end of file

app/views/layouts/application/_footer.haml

+%footer.sticky-footer.bg-white
+  .container.my-auto
+    .copyright.text-center.my-auto
+      %span Copyright © Your Website 2019
\ No newline at end of file

app/views/layouts/application/_scroll_to_top.haml

+%a.scroll-to-top.rounded{href: "#page-top"}
+  %i.fas.fa-angle-up
\ No newline at end of file

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"}
+    .sidebar-brand-icon.rotate-n-15
+      %i.fas.fa-laugh-wink
+    .sidebar-brand-text.mx-3
+      SB Admin
+      %sup 2
+  / Divider
+  %hr.sidebar-divider.my-0/
+  / Nav Item - Dashboard
+  %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/
+  / Sidebar Toggler (Sidebar)
+  .text-center.d-none.d-md-inline
+    %button#sidebarToggle.rounded-circle.border-0
\ No newline at end of file

app/views/layouts/application/_topbar.haml

+%nav.navbar.navbar-expand.navbar-light.bg-white.topbar.mb-4.static-top.shadow
+  / Sidebar Toggle (Topbar)
+  %button#sidebarToggleTop.btn.btn-link.d-md-none.rounded-circle.mr-3
+    %i.fa.fa-bars
+  / Topbar Search
+  %form.d-none.d-sm-inline-block.form-inline.mr-auto.ml-md-3.my-2.my-md-0.mw-100.navbar-search
+    .input-group
+      %input.form-control.bg-light.border-0.small{"aria-describedby" => "basic-addon2", "aria-label" => "Search", placeholder: "Search for...", type: "text"}/
+      .input-group-append
+        %button.btn.btn-primary{type: "button"}
+          %i.fas.fa-search.fa-sm
+  / Topbar Navbar
+  %ul.navbar-nav.ml-auto
+    / Nav Item - Search Dropdown (Visible Only XS)
+    %li.nav-item.dropdown.no-arrow.d-sm-none
+      %a#searchDropdown.nav-link.dropdown-toggle{"aria-expanded" => "false", "aria-haspopup" => "true", "data-toggle" => "dropdown", href: "#", role: "button"}
+        %i.fas.fa-search.fa-fw
+      / Dropdown - Messages
+      .dropdown-menu.dropdown-menu-right.p-3.shadow.animated--grow-in{"aria-labelledby" => "searchDropdown"}
+        %form.form-inline.mr-auto.w-100.navbar-search
+          .input-group
+            %input.form-control.bg-light.border-0.small{"aria-describedby" => "basic-addon2", "aria-label" => "Search", placeholder: "Search for...", type: "text"}/
+            .input-group-append
+              %button.btn.btn-primary{type: "button"}
+                %i.fas.fa-search.fa-sm
+    / Nav Item - Alerts
+    %li.nav-item.dropdown.no-arrow.mx-1
+      %a#alertsDropdown.nav-link.dropdown-toggle{"aria-expanded" => "false", "aria-haspopup" => "true", "data-toggle" => "dropdown", href: "#", role: "button"}
+        %i.fas.fa-bell.fa-fw
+        / Counter - Alerts
+        %span.badge.badge-danger.badge-counter 3+
+      / Dropdown - Alerts
+      .dropdown-list.dropdown-menu.dropdown-menu-right.shadow.animated--grow-in{"aria-labelledby" => "alertsDropdown"}
+        %h6.dropdown-header
+          Alerts Center
+        %a.dropdown-item.d-flex.align-items-center{href: "#"}
+          .mr-3
+            .icon-circle.bg-primary
+              %i.fas.fa-file-alt.text-white
+          %div
+            .small.text-gray-500 December 12, 2019
+            %span.font-weight-bold A new monthly report is ready to download!
+        %a.dropdown-item.d-flex.align-items-center{href: "#"}
+          .mr-3
+            .icon-circle.bg-success
+              %i.fas.fa-donate.text-white
+          %div
+            .small.text-gray-500 December 7, 2019
+            $290.29 has been deposited into your account!
+        %a.dropdown-item.d-flex.align-items-center{href: "#"}
+          .mr-3
+            .icon-circle.bg-warning
+              %i.fas.fa-exclamation-triangle.text-white
+          %div
+            .small.text-gray-500 December 2, 2019
+            Spending Alert: We've noticed unusually high spending for your account.
+        %a.dropdown-item.text-center.small.text-gray-500{href: "#"} Show All Alerts
+    / Nav Item - Messages
+    %li.nav-item.dropdown.no-arrow.mx-1
+      %a#messagesDropdown.nav-link.dropdown-toggle{"aria-expanded" => "false", "aria-haspopup" => "true", "data-toggle" => "dropdown", href: "#", role: "button"}
+        %i.fas.fa-envelope.fa-fw
+        / Counter - Messages
+        %span.badge.badge-danger.badge-counter 7
+      / Dropdown - Messages
+      .dropdown-list.dropdown-menu.dropdown-menu-right.shadow.animated--grow-in{"aria-labelledby" => "messagesDropdown"}
+        %h6.dropdown-header
+          Message Center
+        %a.dropdown-item.d-flex.align-items-center{href: "#"}
+          .dropdown-list-image.mr-3
+            %img.rounded-circle{alt: "", src: "https://source.unsplash.com/fn_BT9fwg_E/60x60"}/
+            .status-indicator.bg-success
+          .font-weight-bold
+            .text-truncate Hi there! I am wondering if you can help me with a problem I've been having.
+            .small.text-gray-500 Emily Fowler · 58m
+        %a.dropdown-item.d-flex.align-items-center{href: "#"}
+          .dropdown-list-image.mr-3
+            %img.rounded-circle{alt: "", src: "https://source.unsplash.com/AU4VPcFN4LE/60x60"}/
+            .status-indicator
+          %div
+            .text-truncate I have the photos that you ordered last month, how would you like them sent to you?
+            .small.text-gray-500 Jae Chun · 1d
+        %a.dropdown-item.d-flex.align-items-center{href: "#"}
+          .dropdown-list-image.mr-3
+            %img.rounded-circle{alt: "", src: "https://source.unsplash.com/CS2uCrpNzJY/60x60"}/
+            .status-indicator.bg-warning
+          %div
+            .text-truncate Last month's report looks great, I am very happy with the progress so far, keep up the good work!
+            .small.text-gray-500 Morgan Alvarez · 2d
+        %a.dropdown-item.d-flex.align-items-center{href: "#"}
+          .dropdown-list-image.mr-3
+            %img.rounded-circle{alt: "", src: "https://source.unsplash.com/Mv9hjnEUHR4/60x60"}/
+            .status-indicator.bg-success
+          %div
+            .text-truncate Am I a good boy? The reason I ask is because someone told me that people say this to all dogs, even if they aren't good...
+            .small.text-gray-500 Chicken the Dog · 2w
+        %a.dropdown-item.text-center.small.text-gray-500{href: "#"} Read More Messages
+    .topbar-divider.d-none.d-sm-block
+    / Nav Item - User Information
+    %li.nav-item.dropdown.no-arrow
+      %a#userDropdown.nav-link.dropdown-toggle{"aria-expanded" => "false", "aria-haspopup" => "true", "data-toggle" => "dropdown", href: "#", role: "button"}
+        %span.mr-2.d-none.d-lg-inline.text-gray-600.small Valerie Luna
+        %img.img-profile.rounded-circle{src: "https://source.unsplash.com/QAB-WJcbgJk/60x60"}/
+      / Dropdown - User Information
+      .dropdown-menu.dropdown-menu-right.shadow.animated--grow-in{"aria-labelledby" => "userDropdown"}
+        %a.dropdown-item{href: "#"}
+          %i.fas.fa-user.fa-sm.fa-fw.mr-2.text-gray-400
+          Profile
+        %a.dropdown-item{href: "#"}
+          %i.fas.fa-cogs.fa-sm.fa-fw.mr-2.text-gray-400
+          Settings
+        %a.dropdown-item{href: "#"}
+          %i.fas.fa-list.fa-sm.fa-fw.mr-2.text-gray-400
+          Activity Log
+        .dropdown-divider
+        %a.dropdown-item{"data-target" => "#logoutModal", "data-toggle" => "modal", href: "#"}
+          %i.fas.fa-sign-out-alt.fa-sm.fa-fw.mr-2.text-gray-400
+          Logout
\ No newline at end of file