add sidebar nav (incomplete)

This commit is contained in:
2021-12-22 15:28:30 -06:00
parent 92920b3b89
commit b9dc626e28
3 changed files with 37 additions and 14 deletions

View File

@@ -6,17 +6,30 @@
{% include 'base_layout.html' %}
</head>
<body class="bg-light">
<div>
{% block navbar %}
{% include 'navbar.html' %}
{% endblock %}
<body class="bg-light">
</div>
<div>
{% block header %}
{% endblock %}
<main role="main" class="container my-2">
<h1>{% block page_heading %}{% endblock %}</h1>
{% block content %}{% endblock %}
</main>
</div>
<div class="row flex-row flex-nowrap">
<div class="col-auto">
{% block sidebar %}
{% endblock %}
</div>
<div class="container my-2 col-sm min-vh-100">
<h1>{% block page_heading %}{% endblock %}</h1>
{% block content %}{% endblock %}
</div>
</div></div>
</body>
</html>

View File

@@ -1,23 +1,33 @@
{% extends "base.html" %}{% load static %}
{% block title %}Bench Coach Home{% endblock %}
{% block sidebar %}
<div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark min-vh-100 " style="width: 200px;">
<ul class="nav nav-pills flex-column mb-auto">
{% for page in pages %}
<li class="nav-item">
<a class="nav-link text-white" style="text-transform:capitalize;" href="{% url page %}"
aria-current="page">{{ page }} </a>
</li>
{% endfor %}
</ul>
</div>
{% endblock %}
{% block content %}
<div class="text-center my-2">
<h1><img class="mx-auto" src="{% static 'benchcoach.svg' %}" style="width: 64px;" /><span class="text-nowrap"><strong>Welcome to Bench Coach</strong></span></h1>
<h1><img class="mx-auto" src="{% static 'benchcoach.svg' %}" style="width: 64px;" /><strong>Welcome to Bench Coach</strong></h1>
<div class="col-lg-6 m-auto">
<p class="lead mb-4 d-none">Quisque at curabitur mollis ornare, malesuada maecenas. Orci elit tristique, malesuada eu pharetra. Est praesent tortor porttitor aptent, amet quisque.</p>
{# <div class="d-grid gap-2 d-sm-flex justify-content-sm-center mx-1">#}
{# <button class="btn btn-primary" type="button">Login</button><button class="btn btn-outline-secondary" type="button">Sign Up</button>#}
{# </div>#}
</div>
<div class="container-sm">
<div class="list-group">
{% for page in pages %}
<li class="list-group-item"><a style="text-transform:capitalize;"
href="{% url page %}">{{ page }} </a></li>
{% endfor %}
</div>
{# <ul class="nav nav-pills flex-column mb-auto">#}
</div>
</div>

View File

@@ -1,5 +1,5 @@
{% load static %}
<nav class="navbar navbar-dark navbar-expand-md bg-dark py-0">
<nav class="navbar navbar-dark navbar-expand-md py-0" style="background: #323669;">
<a class="navbar-brand d-flex text-uppercase fw-bold m-2 mx-4 text-dark" href="{% url 'home' %}">
<img class="d-inline-block" width="32" height="32" src="{% static 'benchcoach.svg' %}" />
<span class="d-none d-print-inline-block d-sm-inline-block d-md-inline-block d-lg-inline-block d-xl-inline-block d-xxl-inline-block mx-1 my-auto text-white">bench coach</span>