MaterializeCSS with Ruby (Navbar Dropdown Menu)

I am following this tutorial unfortunately you won't be able to view it because it's a paid feature. I am very new to RoR and Materialize, I had a lot of trouble just setting this up now I am having trouble setting up Navbar Dropdown Menu, I did this twice and both times got the same result. Instead of getting the icons and actual drop-down action. It just comes back as "arrow_drop_down" doesn't allow me to do anything else. As for the mobile mode, it just says "menu" in the navbar.

Here are my Gem files

source "https://rubygems.org"
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby "3.0.0"

# Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
gem "rails", "~> 7.0.2", ">= 7.0.2.4"

# The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
gem "sprockets-rails"

# Use sqlite3 as the database for Active Record
gem "sqlite3", "~> 1.4"

# Use the Puma web server [https://github.com/puma/puma]
gem "puma", "~> 5.0"

# Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails]
gem "importmap-rails"

# Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
gem "turbo-rails"

# Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev]
gem "stimulus-rails"

# Build JSON APIs with ease [https://github.com/rails/jbuilder]
gem "jbuilder"

# Use Redis adapter to run Action Cable in production
# gem "redis", "~> 4.0"

# Use Kredis to get higher-level data types in Redis [https://github.com/rails/kredis]
# gem "kredis"

# Use Active Model has_secure_password [https://guides.rubyonrails.org/active_model_basics.html#securepassword]
# gem "bcrypt", "~> 3.1.7"

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem "tzinfo-data", platforms: %i[ mingw mswin x64_mingw jruby ]

# Reduces boot times through caching; required in config/boot.rb
gem "bootsnap", require: false

# Use Sass to process CSS
 gem "sassc-rails"

 gem 'materialize-sass'

# Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
# gem "image_processing", "~> 1.2"

# Gem Jquery and rails ujs
gem 'jquery-rails', '~> 4.3', '>= 4.3.3'
gem 'jquery-ui-rails'

gem 'rails-ujs'

group :development, :test do
  # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
  gem "debug", platforms: %i[ mri mingw x64_mingw ]
end

group :development do
  # Use console on exceptions pages [https://github.com/rails/web-console]
  gem "web-console"

  # Add speed badges [https://github.com/MiniProfiler/rack-mini-profiler]
  # gem "rack-mini-profiler"

  # Speed up commands on slow machines / big apps [https://github.com/rails/spring]
  # gem "spring"
end

group :test do
  # Use system testing [https://guides.rubyonrails.org/testing.html#system-testing]
  gem "capybara"
  gem "selenium-webdriver"
  gem "webdrivers"
end

My application.js: (note I removed turbolink as it wasn't working, and I did not install it as a gem)

//= require rails-ujs
//= require jquery
//= require jquery-ui
//= require materialize-sprockets
//= require_tree .

//= require jquery-ui/widgets/datepicker

My views/layouts/application.html.erb file: I copied the the code from materialize verbatim

<!DOCTYPE html>
<html>
  <head>
    <title>Code4Pro</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>

<body>
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
  <li><a href="#!">My Profile</a></li>
  <li><a href="#!">My Courses</a></li>
  <li class="divider"></li>
  <li><a href="#!">Log out</a></li>
</ul>

<ul id="dropdown2" class="dropdown-content">
  <li><a href="#!">My Profile</a></li>
  <li><a href="#!">My Courses</a></li>
  <li class="divider"></li>
  <li><a href="#!">Log out</a></li>
</ul>

  <header>
     <nav class="brown lighten-4 z-depth-2">
     <div class="container">
        <div class="nav-wrapper">
          <a href="#!" class="brand-logo">Shan Siddiqui</a>
          <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
          <ul class="right hide-on-med-and-down">
              <li><a href="#">Courses</a></li>
                <li><a href="#">Sign Up</a></li>
                <li><a href="#">Login</a></li>
       <!-- Dropdown Trigger -->
        <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Shan Siddiqui<i class="material-icons right">arrow_drop_down</i></a></li>
    </ul>
          </ul>
      </div>
    </div>
  </nav>
  
  <ul class="sidenav" id="mobile-demo">
        <li><a href="#">Courses</a></li>
        <li><a href="#">Sign Up</a></li>
        <li><a href="#">Login</a></li>
        <li><a class="dropdown-trigger" href="#!" data-target="dropdown2">Shan Siddiqui<i class="material-icons right">arrow_drop_down</i></a></li>
  </ul>
    </header> 

    <main>
    <div class="container">
      <%= yield %>
    </div>
    </main>

    

    <footer class="page-footer brown lighten-4">
    <div class="container">
      <div class="row">
        <div class="col l6 s12">
          <h5 class="white-text">Shan Siddiqui</h5>
          <p class="grey-text text-lighten-4">Lorem Ipusum fnkajnruwnfkjanf</p>
        </div>
        <div class="col l4 offset-l2 s12">
          <h5 class="white-text">Links</h5>
          <ul>
            <li><a class="grey-text text-lighten-3" href="#!">Twitter</a></li>
            <li><a class="grey-text text-lighten-3" href="#!">Facebook</a></li>
            <li><a class="grey-text text-lighten-3" href="#!">Github</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="footer-copyright">
      <div class="container">
      © 2022 Copyright Shan Siddiqui
      <%= link_to "About Us", pages_about_path, :class => "grey-text text-lighten-4 right"%>
      </div>
    </div>
  </footer>

  </body>


<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">
$(document).ready(function(){
    $('.sidenav').sidenav();
  });
  $(".dropdown-trigger").dropdown();
</script>
</html>

Lastly here is application.scss file According to the tutorial I was to change the extension from "CSS" to "scss"

 *= require_tree .
 *= require_self
 *= require jquery-ui/datepicker

 @import "materialize";
 @import 'jquery-ui/datepicker';

 body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  main {
    flex: 1 0 auto;
  }

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum