As I continue to work on my website, I encountered an error that has me puzzled. The website is a single page application with angular routing, and I have chosen not to utilize bootstrap for this project. My current challenge involves trying to reveal a side bar when the menu is clicked.
Provided below is the relevant code snippet:
<div class="w3-top" ng-controller="mainController">
<ul class="w3-navbar w3-white w3-card-2" id="myNavbar">
<li>
<a href="" ng-click="redirectToOtherPage()" class="w3-wide"><img src="./img/monkey.png" width="75" height="75"></a>
</li>
<!-- Right-sided navbar links -->
<li class="w3-right w3-hide-small">
<a href="" ng-click="redirectToPackages()"><i class="fa fa-birthday-cake"></i> PACKAGES</a>
<a href="" ng-click="redirectToOpenPlay()"><i class="fa fa-child"></i> OPEN PLAY</a>
<a href="" ng-click="redirectToGallery()"><i class="fa fa-camera-retro"></i> GALLERY</a>
<a href="" ng-click="redirectToContact()"><i class="fa fa-envelope"></i> CONTACT</a>
<a href="https://www.facebook.com/goinbananas/"><i class="fa fa-facebook-official fa-fb"></i></a>
<a href="https://www.instagram.com/goinbananas_frenchies/"><i class="fa fa-instagram fa-insta"></i></a>
</li>
<!-- Hide right-floated links on small screens and replace them with a menu icon -->
<li>
<div class="w3-right w3-hide-large w3-hide-medium">
<a href="" ng-click="sidenav = !sidenav" class="btn btn-primary btn-lg"><i class="fa fa-bars w3-padding-right w3-padding-left"></i></a>
</div>
<!-- Sidenav on small screens when clicking the menu icon -->
<div class="w3-sidenav w3-white w3-card-2 w3-animate-left w3-hide-medium w3-hide-large" style="display:block" ng-show="sidenav" ng-controller="mainController">
<a href="" ng-click="redirectToPackages()"><i class="fa fa-birthday-cake"></i> PACKAGES</a>
<a href="" ng-click="redirectToOpenPlay()"><i class="fa fa-child"></i> OPEN PLAY</a>
<a href="" ng-click="redirectToGallery()"><i class="fa fa-camera-retro"></i> GALLERY</a>
<a href="" ng-click="redirectToContact()"><i class="fa fa-envelope"></i> CONTACT</a>
<a href="https://www.facebook.com/goinbananas/"><i class="fa fa-facebook-official fa-fb"></i></a>
<a href="https://www.instagram.com/goinbananas_frenchies/"><i class="fa fa-instagram fa-insta"></i></a>
</div>
</li>
</ul>
This is the controller in use:
var app = angular.module('myApp');
app.controller('mainController', function($scope, $location){
$scope.redirectToOtherPage = function(){
$location.path("/");
};
$scope.redirectToContact = function(){
$location.path("/contactus");
};
$scope.redirectToPackages = function(){
$location.path("/packages");
};
$scope.redirectToSignup = function(){
$location.path("/signup");
};
$scope.redirectToGallery = function(){
$location.path("/gallery");
};
$scope.redirectToOpenPlay = function(){
$location.path("/openplay");
};
$scope.sidenav = false;
});
Is there something crucial missing? I've been grappling with this issue all day and would appreciate any guidance to steer me in the right direction.