Qfyilyi

I'm working on an early-in-development Django + Vue website that uses the Maisonette Bootstrap theme. Part of the website is regular Django-rendered templates, and part of the website is a single-page app.

I've been tasked with making the navbar for the Vue single-page app match the navbar in the Maisonette theme. The Vue SPA was set up to use Bootstrap-Vue before I started working on it.

My first thought was to just copy the Django template code into the Vue template, but that didn't work at all (I'm not sure why). It seems I must use the Bootstrap-Vue tags to have this work.

However, I'm now encountering a problem where I'm trying to get a dropdown-activator(?) link(?) to look the same, and it seems not possible because of the way Bootstrap-Vue creates dropdown links.

I want to make the SPA look like this (image taken from the Django part of the website):

...which uses this code in the Django template:

    <a href="#" data-toggle="dropdown" role="button" aria-expanded="false"

       class="dropdown-toggle nav-link">

      <span class="user-name">{{ user.get_username }}</span>

      <span class="angle-down s7-angle-down"></span>

    </a>

...but in Bootstrap-Vue I only seem to have access to this tag:

            <b-nav-item-dropdown text="Navigation" right>

...which ends up looking like this in the SPA:

So the way the Bootstrap-Vue tag works seems to make it impossible to add the angle-down span.

Is there a way to accomplish this?

The full code for the Django navbar:

{% extends 'base.html' %} {% load static %} {% block nav %}

<nav class="navbar navbar-expand navbar-dark mai-top-header">

  <div class="container">

    <a href="#" class="navbar-brand"></a>

    <!--Left Menu-->

    <ul class="nav navbar-nav mai-top-nav">

      <li class="nav-item">

        <a href="/" class="nav-link">Home</a>

      </li>

      <li class="nav-item">

        <a href="http://www.bluescanlabs.com/index.html" class="nav-link">About</a>

      </li>

    </ul>

    <!--User Menu-->

    <ul class="nav navbar-nav float-lg-right mai-user-nav">

      <li class="dropdown nav-item">

        <a href="#" data-toggle="dropdown" role="button" aria-expanded="false"

           class="dropdown-toggle nav-link">

          <span class="user-name">{{ user.get_username }}</span>

          <span class="angle-down s7-angle-down"></span>

        </a>

        <div role="menu" class="dropdown-menu">

          <a href="/" class="dropdown-item">

            <span class="icon s7-home"> </span>Home</a>

          <a href="{% url 'account_profile' %}" class="dropdown-item">

            <span class="icon s7-user"> </span>Profile</a>

          <a href="{% url 'account_change_password' %}" class="dropdown-item">

            <span class="icon s7-lock"> </span>Password</a>

          <a href="{% url 'account_logout' %}" class="dropdown-item">

            <span class="icon s7-power"> </span>Log Out</a>

        </div>

      </li>

    </ul>

  </div>

</nav>

{% endblock %}

The full (but not finished) code for the SPA's navbar:

<template>

    <b-navbar toggleable="md"

              type="dark"

              class="mai-top-header">

        <b-container>

            <b-navbar-brand :to="{ name: 'home' }"></b-navbar-brand>

            <!--Left Menu-->

            <b-navbar-nav class="mai-top-nav">

                <b-nav-item :to="{ name: 'home' }">Home</b-nav-item>

                <b-nav-item href="http://www.bluescanlabs.com/index.html">About</b-nav-item>

            </b-navbar-nav>

            <!--User Menu-->

            <b-navbar-nav class="float-lg-right mai-user-nav">

                <b-nav-item-dropdown text="Navigation" right>

                    <b-dropdown-item class="icon s7-home">Home</b-dropdown-item>

                    <b-dropdown-item class="icon s7-user">Profile</b-dropdown-item>

                    <b-dropdown-item>Password</b-dropdown-item>

                    <b-dropdown-item>Log Out</b-dropdown-item>

                </b-nav-item-dropdown>

            </b-navbar-nav>

        </b-container>

    </b-navbar>

</template>



<script>

    export default {}

</script>



<style scoped>



</style>

The answer was to put <template slot="button-content">custom <b>text</b></template> just after the opening <b-nav-item-dropdown> tag. I was then able to replace the custom <b>text</b> with whatever custom HTML I wanted.

I got this answer here.