aside menu

2026-08-02 08:25:32 +04:00 · 2019-12-12 21:52:37 +01:00
parent 99c3874343
commit 2fe21d2425
16 changed files with 223 additions and 58 deletions
@@ -7,6 +7,7 @@ forms:
  url: form-elements.html
  title: Form elements
  icon: check-square
+  badge: New

 base:
  title: Base
@@ -15,42 +16,48 @@ base:
    buttons:
      url: buttons.html
      title: Buttons
+      badge: New
    cards:
      url: cards.html
      title: Cards
-    c:
-      url: c.html
-      title: C
+    calendar:
+      title: Calendar
+      icon: calendar
+      url: calendar.html
+    users:
+      title: Users
+      icon: users
+      url: users.html
+    gallery:
+      title: Gallery
+      icon: image
+      url: gallery.html

 charts:
  url: charts.html
  title: Charts
  icon: pie-chart

-calendar:
-  title: Calendar
-  icon: calendar
-  url: calendar.html
-
-users:
-  title: Users
-  icon: users
-  url: users.html
-
-gallery:
-  title: Gallery
-  icon: image
-  url: gallery.html

 layouts:
  title: Layouts
  icon: layout
  url: layouts.html

+extra:
+  title: Extra
+  icon: star
+  children:
+    invoice:
+      icon: file
+      title: Invoice
+      url: invoice.html
+
 docs:
  title: Documentation
  icon: file-text
  url: docs/index.html
+  docs: true

 #changelog:
 #  url: changelog.html
@@ -1,7 +0,0 @@
-<aside class="sidebar sidebar-dark">
-	<!-- Sidebar logo -->
-	{% include_cached parts/navbar-logo.html prefix="sidebar" %}
-
-	<!-- Sidebar menu -->
-	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores commodi consequuntur, doloribus fugiat mollitia nesciunt pariatur quod reiciendis, sequi soluta tempora unde? Ab eligendi molestiae odio, pariatur quisquam quo voluptas.
-</aside>
@@ -0,0 +1,38 @@
+{% assign current-page = page.menu | default: layout.menu | split: '.' %}
+
+<ul class="sidebar-nav">
+	<li class="sidebar-nav-title">Navigation</li>
+	{% for level-1 in site.data.menu %}
+	<li class="sidebar-nav-item">
+
+		<a href="{{ site.base }}/{{ level-2[1].url }}" class="sidebar-nav-link{% if level-1[0] == current-page[0] and current-page.size == 1 %} active{% endif %}">
+			{% if level-1[1].icon %}
+				{% assign icon = level-1[1].icon %}
+				{% include ui/icon.html icon=icon %}
+			{% endif %}
+
+			<span>{{ level-1[1].title }}</span>
+		</a>
+
+		{% comment %}
+		<div class="sidebar-nav-title">{{ level-1[1].title }}</div>
+		{% endcomment %}
+
+		{% if level-1[1].children %}
+		<ul>
+			{% for level-2 in level-1[1].children %}
+			<li class="sidebar-nav-item">
+				<a href="{{ site.base }}/{{ level-2[1].url }}" class="sidebar-nav-link{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] and current-page.size == 2 %} active{% endif %}">
+					<span>{{ level-2[1].title }}</span>
+					{% if level-2[1].badge %}
+					{% assign badge = level-2[1].badge %}
+					{% include ui/badge.html text=badge color="green" %}
+					{% endif %}
+				</a>
+			</li>
+			{% endfor %}
+		</ul>
+		{% endif %}
+	</li>
+	{% endfor %}
+</ul>
@@ -1,7 +1,5 @@
-{% removeemptylines %}
+{% assign current-page = page.menu | default: layout.menu | split: '.' %}
 <ul class="navbar-nav flex-wrap{% if include.class %} {{ include.class }}{% endif %}">
-   {% assign current-page = page.menu | default: layout.menu | split: '.' %}
-
   {% for level-1 in site.data.menu %}
   {% assign icon = level-1[1].icon %}

@@ -46,4 +44,3 @@
   </li>
   {% endfor %}
 </ul>
-{% endremoveemptylines %}
@@ -1,6 +1,6 @@
 {% assign prefix = include.prefix | default: 'navbar' %}

-<a href="{{ site.base }}" class="{{ prefix }}-brand">
+<a href="{{ site.base }}" class="{{ prefix }}-brand{% if include.class %} {{ include.class }}{% endif %}">
 	<img src="{{ site.base }}/img/logo{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="{{ prefix }}-brand-logo {{ prefix }}-brand-logo-lg">
 	<img src="{{ site.base }}/img/logo-small{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="{{ prefix }}-brand-logo {{ prefix }}-brand-logo-sm">
 </a>
@@ -1,4 +1,4 @@
-<div class="navbar-search ml-4 d-none d-lg-block">
+<div class="navbar-search d-none d-lg-block">
   <form action="" method="get">
      <input type="text" name="q" class="form-control bg-light" placeholder="Search...">
   </form>
@@ -1,11 +1,11 @@
 {% assign person-id = include.person-id | default: 12 | minus: 1 %}
 {% assign person = site.data.people[person-id] %}

-{% if page.menu-layout != 'vertical' %}
-	{% include_cached parts/navbar-logo.html %}
+{% if include.menu-layout != 'vertical' %}
+	{% include_cached layout/navbar-logo.html class="mr-4" %}
 {% endif %}

-{% include_cached parts/navbar-search.html %}
+{% include_cached layout/navbar-search.html %}

 <ul class="nav navbar-menu align-items-center ml-auto">
   <li class="nav-item d-none d-lg-flex mr-3">
@@ -0,0 +1,15 @@
+<aside class="sidebar sidebar-dark">
+	<!-- Sidebar logo -->
+	{% include_cached layout/navbar-logo.html prefix="sidebar" %}
+
+	<div class="sidebar-content">
+		<div>
+			<!-- Sidebar menu -->
+			{% include layout/menu-aside.html %}
+		</div>
+
+		<div class="mt-auto">
+			{% include ui/button.html text="Logout" color="primary" icon="log-out" block=true %}
+		</div>
+	</div>
+</aside>
@@ -1,7 +1,7 @@
 <header class="topnav topbar">
   <div class="container{% if include.fluid %}-fluid{% endif %}">
      <div class="navbar navbar-expand-lg {% if include.dark %}navbar-dark bg-dark text-white{% else %}navbar-light{% endif %}{% if include.sticky %} navbar-sticky{% endif %}">
-         {% include_cached parts/navbar.html search=true %}
+         {% include_cached layout/navbar.html search=true menu-layout=page.menu-layout %}
      </div>
   </div>
 </header>
@@ -5,7 +5,7 @@ layout: base
 <div class="wrapper">

 	{% if page.menu-layout == 'vertical' %}
-		{% include layout/aside.html %}
+		{% include layout/sidebar.html %}
 	{% endif %}

 	<div class="content">
@@ -5,6 +5,7 @@ sidenav-dark: true
 page-title: Layout test
 page-title-actions: breadcrumb
 menu-layout: vertical
+menu: base.buttons
 ---

 <div class="card" id="card-test">