Create a custom navigation bar using PlayFramework for a unique video streaming website

Attempting to create a dynamic navigation bar in Play using the code below in my main.scala.html file:

@(title: String)(content: Html)

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>@title</title>
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/main.css")">
        <link rel="shortcut icon" type="image/png" href="@routes.Assets.versioned("images/DCicon.jpg")">
        <script src="@routes.Assets.versioned("javascripts/hello.js")" type="text/javascript"></script>
        <script src="@routes.Assets.versioned("javascripts/jquery-1.12.0.min.js")" type="text/javascript"></script>
        <link rel='stylesheet' href='@routes.Assets.versioned("bootstrap/css/bootstrap.css")'>
        <link rel='stylesheet' href='@routes.Assets.versioned("bootstrap/css/bootstrap.min.css")'>
        <script type='text/javascript' src='@routes.WebJarAssets.at(WebJarAssets.locate("jquery.min.js"))'></script>
    </head>
    <body>
    <script>
        $(document).ready(function() {
            $('[data-toggle=offcanvas]').click(function() {
            $('.row-offcanvas').toggleClass('active');
            });
        });
    </script>
    <div class="page-container">

    <!-- top navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
       <div class="container">
        <div class="navbar-header">
           <button type="b...

Scala is still new territory for me, although I have extensive experience with Java. My current challenge lies in making this navigation bar adaptable as users navigate through different pages.

htmlcssscalaplayframework

Answer №1

If you want to add extra content to the navigation bar when creating a template, you can do so by following this structure:

@(title: String, navBar: Html = HtmlFormat.empty)(content: Html)

<!DOCTYPE html>
<html lang="en">
...
<!-- top navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
   <div class="container">
    <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".sidebar-nav">
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
       <a class="navbar-brand" href="@routes.Assets.versioned("images/DCicon.jpg")">DirtyChimp</a>
       @navBar
    </div>
   </div>
</div>
...
@content
</body>
</html>

You can also create other templates using this method:

@(title: String)

@navBarContent = {
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
  </div>
}
@main(title, navBar = navBarContent) {
  <h1>Page with custom navBar!</h1>
}

It is assumed that the initial template is named main.scala.html.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The function send_filer either returns None or finishes execution without encountering a return statement

I am currently developing an application where users can download a plot.png and a file.csv, but the send_files function isn't working as expected. Below is my Python code: app = Flask(__name__) app.USE_X_SENDFILE = True @app.route('/', met ...

pythonhtmlflaskserversendfile

Creating a row with 5 columns in Bootstrap 4 dynamically is a handy trick for enhancing the layout of your website

Struggling to find the right layout for displaying products on my store's home page. <div class="row"> @foreach($produts as $product) //this is the syntax of my templating engine <div class="col-md-3"> </div> @endf ...

cssbootstrap-4

repeating the identical content in the same setting

I am encountering an issue with jquery as I have 2 different sets of icons, each of which I want to do the same thing: My primary codes are <ul> <li> <a href=""> <i class="fa fa-facebook"></i> ...

javascriptjqueryhtmlcss

Ways to determine if a list is empty with thymeleaf?

<div th:if="${tblUserList != null}"> --content-- </div> I'm having some trouble with the thymeleaf code provided above. The variable tblUserList is a list, and I need to check if it is empty instead of just checking if it is null. How ca ...

htmlthymeleaf

Explore the styling options for SVG using CSS to manipulate different properties of the

After saving my SVG image in Illustrator, the code appears like this: <?xml version="1.0" encoding="utf-8"?> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBo ...

htmlcsssvg

Issues encountered with PHP integration for Bootstrap carousel

I'm facing a challenge with modifying an existing carousel to load data from an SQL database instead of hardcoding it. After successfully fetching the data using PHP, I noticed that the controls of the carousel are not functioning as expected. Upon i ...

phphtmltwitter-bootstrap

Implementing MySQL in JavaScript code leads to various possibilities

I am working on a web application that requires retrieving values from a MySQL database. The process involves: PHP code generates an HTML page successfully. Clicking a button updates a cookie, which also works. Using the cookie in a MySQL query, which is ...

phpjqueryhtmlmysqlajax

Having difficulty accurately interpreting the input value

As someone new to JavaScript, I set out to create a basic calculator using JavaScript and HTML. My goal is to have two input fields, named Fld1 and Fld2, that would add up the values entered into them when submitting. However, despite parsing the input val ...

javascripthtmlnumbersnan

Steps for styling an AngularJS Popup:1. Determine the desired appearance for

I have some code that displays a popup when clicked, along with its automatically generated CSS. I want to be able to make changes to the CSS by adding IDs or classes to it. How can I assign IDs or classes to this element so that I can easily target them f ...

javascriptcssangularjspopup

Problem with jQuery image gallery

Currently, I am in the process of creating a simple image gallery that enlarges an image when it is clicked. To achieve this functionality, I am utilizing jQuery to add and remove classes dynamically. $(".image").click(function() { $(this).addClass("b ...

jqueryhtmlcss

Transferring data from local storage to a PHP server using AJAX

My attempt to transfer data from local storage to PHP using AJAX resulted in an error mentioning 'undefined index data'. chart.php <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="t ...

javascriptphpjqueryajaxhtml

Outlook not adding padding to button in HTML email

https://i.stack.imgur.com/vMgGS.png Is there a way to apply the same padding to the border as seen on the button above? Adding the border directly to the td element seems like a solution, but it is not feasible due to the presence of border-radius in anot ...

htmlemailbuttonhtml-email

Discover the art of customizing child elements using vanilla extract!

I recently started using vanilla extract to add styles to a NextJS application. Is there a way to style child elements within the parent element without having to create another class? My React component has a structure like this: <ul className={style ...

cssnext.jsvanilla-extract

Outputting a variable using javascript

My challenge is to efficiently print the contract variable, which contains HTML content fetched from the server. How can I achieve this easily? I want the print window in Chrome to display the document with the contents of my variable when I click a button ...

javascriptjqueryhtmliframeprinting

Reorder children in a column layout with the top and bottom child elements reversed

I am attempting to create a layout using flex-direction: column-reverse in order to swap the positions of button 1 and button 2 without modifying the HTML: <button>2</button> <button>1</button> Unfortunately, I'm encountering ...

htmlcssflexbox

The feature of Switch css does not appear to function properly when used in conjunction with input type

Why does the switch button not work with the input type radio but works with a checkbox button? How can I maintain the radio input and solve this issue? @charset "utf-8"; /* CSS Document */ /* ---------- GENERAL ---------- */ body { background: #4a4a4 ...

htmlcssinputchecked

To access an RSS feed, use Google Chrome as your browser

I am struggling with my .php script that generates an RSS-Feed on-the-fly. My goal is to attach a .css stylesheet to this script so that browsers lacking a built-in RSS-viewer can properly display the feed. I achieved this using the following code snippet ...

phpcssgoogle-chromerss

Utilizing Knockout to Render JSON List Items

Utilizing Knockout.js to dynamically update a view from JSON response has been my current focus. The structure of the JSON is as follows: var data = { "Properties": { "Engine Capacity": "1499cc", "Doors": 3, "Extras": [ "LED lights", ...

javascripthtmlknockout.js

My toggleclass function seems to be malfunctioning

I am encountering a strange issue with my jQuery script. It seems to work initially when I toggle between classes, but then requires an extra click every time I want to repeat the process. The classes switch as expected at first, but subsequent toggles req ...

javascriptjqueryhtmlcss

Issue with URL routing causing page to display incorrectly

When using the normal Href, the page is rendered properly, but the URL is not hidden: <asp:Repeater ID="rCompany" runat="server" DataSourceID="sdsCompany" > <ItemTemplate> <div class="col4" id="trip_third"> <a href="discover_detail.as ...

c#htmlasp.neturl-routing