add main-menu (draft)

This commit is contained in:
e-serg 2024-04-14 00:38:52 +03:00
parent 401744a1aa
commit b58d98f2eb
5 changed files with 67 additions and 21 deletions

View File

@ -3,13 +3,15 @@
/*@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap');*/ /*@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Kurale&display=swap');*/ /*@import url('https://fonts.googleapis.com/css2?family=Kurale&display=swap');*/
/* НАВИГАЦИЯ */ /* НАВИГАЦИЯ - ШАПКА */
.navbar { .navbar#nav_header {
background: rgb(111,66,193); /* фон главной навигационной панели */
background: linear-gradient(11deg, rgba(111,66,193,1) 15%, rgba(152,66,193,0.7) 70%); background: #6F42C1;
background: linear-gradient(11deg, #6F42C1FF 15%, #9842C1B2 70%);
height: 75px; height: 75px;
} }
.navbar > div.container-fluid > a.navbar-brand { .navbar#nav_header > div.container-fluid > a.navbar-brand {
/* лого */
font-family: "Lobster", sans-serif; font-family: "Lobster", sans-serif;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
@ -17,11 +19,28 @@
color: #fff; color: #fff;
} }
/* НАВИГАЦИЯ - МЕНЮ */
.navbar#nav_main_menu {
/* фон меню */
background: #B5B1B2;
background: linear-gradient(11deg, #49434399 15%, #B5B1B2b2 70%);
height: 75px;
}
.navbar#nav_main_menu > ul.nav > li.nav-item > a.nav-link {
/* пункты меню */
color: black;
font-size: 11pt;
border-left: black 1px dashed;
}
/* МОДАЛЬНЫЕ ОКНА */
.modal { .modal {
/* фон затенения */
background: rgb(33, 20, 56); background: rgb(33, 20, 56);
background: linear-gradient(11deg, rgb(33, 20, 56, 1) 15%, rgba(49, 22, 64, 0.6) 70%); background: linear-gradient(11deg, rgb(33, 20, 56, 1) 15%, rgba(49, 22, 64, 0.6) 70%);
} }
.modal > .modal-dialog > .modal-content .modal-header, .modal > .modal-dialog > .modal-content .modal-header,
.modal > .modal-dialog > .modal-content .modal-footer { .modal > .modal-dialog > .modal-content .modal-footer {
/* фон заголовка и подвала модального окна */
background: whitesmoke; background: whitesmoke;
} }

View File

@ -37,7 +37,8 @@
{# <script type="text/javascript" src="{% static 'js/js.cookie.min.js' %}"></script> #} {# <script type="text/javascript" src="{% static 'js/js.cookie.min.js' %}"></script> #}
</head> </head>
<body>{% block BODY %} <body>{% block BODY %}
{% block CSS_1 %}{% endblock %}{% block CSS_2 %}{% endblock %}{% block CSS_3 %}{% endblock %}{% include "blocks/header_nav.jinja" %} {% block CSS_1 %}{% endblock %}{% block CSS_2 %}{% endblock %}{% block CSS_3 %}{% endblock %}{% include "blocks/nav_header.jinja" %}
{% include "blocks/nav_main_menu.jinja" %}
{% block CONTENT %}{% endblock CONTENT %} {% block CONTENT %}{% endblock CONTENT %}
{# {% include "blocks/footer.jinja" %} #}{# {% if COOKIES %}#} {# {% include "blocks/footer.jinja" %} #}{# {% if COOKIES %}#}
{# {% include "blocks/accept-cookies.jinja2" %}{% endif %} #} {# {% include "blocks/accept-cookies.jinja2" %}{% endif %} #}

View File

@ -1,15 +0,0 @@
{# ВЕРХНЯЯ НАВИГАЦИЯ #}<nav class="navbar">
<div class="container-fluid">
<a class="navbar-brand mb-0 h1" href="/">Тестовое задание Frontend</a>
<div class="navbar-nav ms-auto"><nobr>{% if request.user.is_authenticated %}
<i class="fa-solid fa-user"></i> {{ user }}
<a class="btn btn-secondary btn-sm ms-3"href="/logout">выход
<i class="fa-solid fa-person-walking-arrow-right"></i>
</a>{% else %}
<a class="btn btn-secondary btn-sm" href="#"
data-bs-toggle="modal" data-bs-target="#login_modal">
<i class="fa-solid fa-right-to-bracket"></i> вход
</a>{% endif %}</nobr>
</div>
</div>
</nav>{% include "popup/logon-logout.jinja" %}

View File

@ -0,0 +1,15 @@
{# ВЕРХНЯЯ НАВИГАЦИЯ #}<nav class="navbar shadow-sm" id="nav_header">
<div class="container-fluid">
<a class="navbar-brand mb-0 h1" href="/">Тестовое задание Frontend</a>
<div class="navbar-nav ms-auto"><nobr>{% if request.user.is_authenticated %}
<i class="fa-solid fa-user"></i> {{ user }}
<a class="btn btn-secondary btn-sm ms-3"href="/logout">выход
<i class="fa-solid fa-person-walking-arrow-right"></i>
</a>{% else %}
<a class="btn btn-secondary btn-sm" href="#"
data-bs-toggle="modal" data-bs-target="#login_modal">
<i class="fa-solid fa-right-to-bracket"></i> вход
</a>{% endif %}</nobr>
</div>
</div>
</nav>{% include "popup/logon-logout.jinja" %}

View File

@ -0,0 +1,26 @@
{# ВЕРХНЯЯ НАВИГАЦИЯ #}<nav class="navbar shadow-lg border-top" id="nav_main_menu">
<ul class="nav justify-content-end ms-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">
<i class="fa-solid fa-pen-to-square"></i> Ввод данных
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Форма ввода</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">
<i class="fa-solid fa-table"></i> Отчёты
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Отчёт 1</a></li>
<li><a class="dropdown-item" href="#">Отчёт 2</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa-solid fa-circle-info"></i> Информация
</a>
</li>
</ul>
</nav>