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 ""
git_source(:github) { |repo| "{repo}.git" }

ruby "3.0.0"

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

# The original asset pipeline for Rails []
gem "sprockets-rails"

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

# Use the Puma web server []
gem "puma", "~> 5.0"

# Use JavaScript with ESM import maps []
gem "importmap-rails"

# Hotwire's SPA-like page accelerator []
gem "turbo-rails"

# Hotwire's modest JavaScript framework []
gem "stimulus-rails"

# Build JSON APIs with ease []
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 []
# gem "kredis"

# Use Active Model has_secure_password []
# 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 []
# 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
  gem "debug", platforms: %i[ mri mingw x64_mingw ]

group :development do
  # Use console on exceptions pages []
  gem "web-console"

  # Add speed badges []
  # gem "rack-mini-profiler"

  # Speed up commands on slow machines / big apps []
  # gem "spring"

group :test do
  # Use system testing []
  gem "capybara"
  gem "selenium-webdriver"
  gem "webdrivers"

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>
    <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 %>

<!-- 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 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>

     <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 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>

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


    <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 class="col l4 offset-l2 s12">
          <h5 class="white-text">Links</h5>
            <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>
    <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"%>


<script src="">

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