add: fontawesome

fix: navbar (now sidebar)
This commit is contained in:
Tobias Reisinger 2020-01-24 01:42:38 +01:00
parent ac5354a601
commit 0bb3d93704
6 changed files with 59 additions and 88 deletions

1
.gitignore vendored Normal file
View file

@ -0,0 +1 @@
fontawesome/

View file

@ -3,11 +3,6 @@ body, #wrapper
min-height: 100vh; min-height: 100vh;
} }
footer
{
margin-top: auto;
}
.flex-fill .flex-fill
{ {
flex: 1 1 auto; flex: 1 1 auto;

4
js/core-functions.js Normal file
View file

@ -0,0 +1,4 @@
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});

View file

@ -17,31 +17,32 @@
{% block stylesheets %} {% block stylesheets %}
{# do assets.addCss('https://unpkg.com/purecss@1.0.0/build/pure-min.css', 100) #} {# do assets.addCss('https://unpkg.com/purecss@1.0.0/build/pure-min.css', 100) #}
{% do assets.addCss('https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css', 100) %} {% do assets.addCss('https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css', 100) %}
{% do assets.addCss('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', 99) %} {% do assets.addCss('theme://fontawesome/css/all.css', 99) %}
{% do assets.addCss('theme://css/custom.css', 96) %} {% do assets.addCss('theme://css/custom.css', 96) %}
{% do assets.addCss('theme://css/sidebar.css', 96) %}
{% endblock %} {% endblock %}
{% block javascripts %} {% block javascripts %}
{% do assets.addJs('jquery', 100) %} {% do assets.addJs('jquery', 100) %}
{% do assets.addJs('https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', 99) %} {% do assets.addJs('https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', 99) %}
{% do assets.addJs('theme://js/core-functions.js', 98) %}
{% endblock %} {% endblock %}
{% block assets deferred %} {% block assets_css %}
{{ assets.css()|raw }} {{ assets.css()|raw }}
{{ assets.js()|raw }}
{% endblock %} {% endblock %}
</head> </head>
<body id="top" class="{{ page.header.body_classes }}"> <body>
<div id="wrapper" class="d-flex flex-column"> <div id="wrapper" class="d-flex flex-column">
{% block body %}
<main class="container py-3 flex-fill">
{% block header %}
{% include 'partials/navbar.html.twig' %} {% include 'partials/navbar.html.twig' %}
{% endblock %} <div class="content-wrapper flex-fill">
<main class="container-fluid py-3 clearfix">
<div class="container">
{% block content %}{% endblock %} {% block content %}{% endblock %}
</div>
</main> </main>
{% endblock %} </div>
<footer class="container-fluid w-100 bg-dark text-light py-3 content-wrapper">
{% block footer %} {% block footer %}
<footer class="container-fluid bg-dark text-light py-3"> <footer class="container-fluid bg-dark text-light py-3">
<div class="row"> <div class="row">
@ -55,10 +56,16 @@
</div> </div>
</footer> </footer>
{% endblock %} {% endblock %}
</footer>
</div> </div>
{% block bottom %} {% block bottom %}
{{ assets.js('bottom')|raw }} {{ assets.js('bottom')|raw }}
{% endblock %} {% endblock %}
</body> </body>
{% block assets_js deferred %}
{{ assets.js()|raw }}
{% endblock %}
</html> </html>

View file

@ -1,14 +1,9 @@
{% set logo = theme_var(mobile ? 'custom_logo_mobile' : 'custom_logo') %} {% set logo = theme_var(mobile ? 'custom_logo_mobile' : 'custom_logo') %}
<a href="{{ home_url }}" class="navbar-brand mr-10"> <a href="{{ home_url }}" class="navbar-brand mr-10">
<div class="float-left">
{% if logo %} {% if logo %}
{% set logo_file = (logo|first).name %} {% set logo_file = (logo|first).name %}
<img src="{{ url('theme://images/logo/' ~ logo_file) }}" /> <img src="{{ url('theme://images/logo/' ~ logo_file) }}" />
{% else %} {% else %}
<img src="{{ url('theme://images/ro-logo.svg') }}" /> <img src="{{ url('theme://images/ro-logo.svg') }}" />
{% endif %} {% endif %}
</div>
<div class="ml-2 float-right">
Reitanlage<br>Oranienburg
</div>
</a> </a>

View file

@ -1,50 +1,19 @@
{% macro loop(page) %} <nav id="sidebar-wrapper" class="navbar bg-dark">
{% for p in page.children.visible %} <div id="menu-toggle">
{% set current_page = (p.active or p.activeChild) ? 'selected' : '' %} <div id="menu-toggle-icon">
{% if p.children.visible.count > 0 %} <i class="fas fa-2x fa-bars"></i>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="{{ p.url }}" role="button" aria-haspopup="true" aria-expanded="false">{{ p.menu }}</a>
<div class="dropdown-menu">
{{ _self.loop(p) }}
</div> </div>
</li> </div>
{% else %} <ul class="sidebar-nav">
<li class="nav-item"> <li class="sidebar-spacer"></li>
<a class="nav-link" href="{{ p.url }}">{{ p.menu }}</a> <li class="sidebar-brand">
</li>
{% endif %}
{% endfor %}
{% endmacro %}
<nav class="navbar navbar-light navbar-expand-sm bg-light sticky-top">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsing_navbar">
<span class="navbar-toggler-icon"></span>
</button>
{% include 'partials/logo.html.twig' %} {% include 'partials/logo.html.twig' %}
</div> </li>
{% block header_navigation %}
<div class="navbar-collapse collapse" id="collapsing_navbar">
<ul class="nav navbar-nav">
{% if theme_config.dropdown.enabled %}
{{ _self.loop(pages) }}
{% else %}
{% for page in pages.children.visible %} {% for page in pages.children.visible %}
{% set current_page = (page.active or page.activeChild) ? 'selected' : '' %} {% set current_page = (page.active or page.activeChild) ? 'selected' : '' %}
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="{{ page.url }}">{{ page.menu }}</a> <a class="nav-link" href="{{ page.url }}" {{ current_page }}>{{ page.menu }}</a>
</li>
{% endfor %}
{% endif %}
{% for mitem in site.menu %}
<li class="nav-item">
<a class="nav-link" href="{{ mitem.url }}">{{ mitem.text }}</a>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
</div>
{% endblock %}
</div>
</nav> </nav>