Update pattern

This commit is contained in:
Dita Aji Pratama 2024-02-20 16:49:42 +07:00
parent ed1e9e2fde
commit 39c6220347
3 changed files with 55 additions and 57 deletions

View File

@ -17,15 +17,11 @@ Dashboard template from [Creative Tim](https://www.creative-tim.com/product/blac
title = "CostaPy" title = "CostaPy"
baseurl = "http://localhost" baseurl = "http://localhost"
menu_icon = "fa fa-user-tie"
menu_name = "Dashboard"
profile_picture = "http://localhost/profile/1.jpg"
profile_name = "John Smith"
logout = "http://localhost/logout" logout = "http://localhost/logout"
color = "blue" # blue | green | orange | red color = "blue" # blue | green | orange | red
logo = "http://localhost/logo.png" logo = "http://localhost/logo.png"
user_roles = ["member"] # A roles that user have roles = [2] # A roles that user have
active_page = "Dashboard" # Current active page name active_page = "Dashboard" # Current active page name
copyright = "Dita Aji Pratama" # Copyright on the footer copyright = "Dita Aji Pratama" # Copyright on the footer
@ -34,20 +30,24 @@ Dashboard template from [Creative Tim](https://www.creative-tim.com/product/blac
navbar_menu = [ navbar_menu = [
{ {
"name" :"Home", "icon" :"tim-icons icon-bell-55",
"href" :"/" "name" :"Notifications",
}, "list" :[
{ {
"name" :"Dashboard", "name" :"See all notifications",
"href" :"#" "href" :"#"
}, }
{ ],
"name" :"CostaPy Website", "notification":False
"href" :"https://costapy.ditaajipratama.com"
} }
] ]
profile_menu = [ - Config a profile on your modules function
data_profile = {
"picture" : "http://localhost/profile/1.jpg",
"name" : "John Smith",
"menu" : [
{ {
"name" :"Profile", "name" :"Profile",
"href" :"/profile" "href" :"/profile"
@ -57,6 +57,7 @@ Dashboard template from [Creative Tim](https://www.creative-tim.com/product/blac
"href" :"/setting" "href" :"/setting"
} }
] ]
}
- Config a sidebar menu on your modules function - Config a sidebar menu on your modules function
@ -65,13 +66,13 @@ Dashboard template from [Creative Tim](https://www.creative-tim.com/product/blac
"icon" :"fa fa-home", "icon" :"fa fa-home",
"name" :"Dashboard", "name" :"Dashboard",
"href" :"/", "href" :"/",
"roles" :["member", "admin"] "roles" :[1,2]
}, },
{ {
"icon" :"fa fa-users", "icon" :"fa fa-users",
"name" :"Users", "name" :"Users",
"href" :"/users", "href" :"/users",
"roles" :["admin"] "roles" :[1]
} }
] ]
@ -93,20 +94,15 @@ Dashboard template from [Creative Tim](https://www.creative-tim.com/product/blac
baseurl = baseurl, baseurl = baseurl,
navbar = Template(params["mako"]["website"]['navbar']).render( navbar = Template(params["mako"]["website"]['navbar']).render(
title = title, title = title,
baseurl = baseurl,
menu_icon = menu_icon,
menu_name = menu_name,
menu = navbar_menu, menu = navbar_menu,
profile_picture = profile_picture, profile = data_profile,
profile_name = profile_name,
profile_menu = profile_menu,
logout = logout logout = logout
), ),
sidebar = Template(params["mako"]["website"]['sidebar']).render( sidebar = Template(params["mako"]["website"]['sidebar']).render(
color = color, color = color,
logo = logo, logo = logo,
title = title, title = title,
user_roles = user_roles, roles = roles,
active_page = active_page, active_page = active_page,
menu = sidebar_menu menu = sidebar_menu
), ),

View File

@ -9,7 +9,7 @@
<span class="navbar-toggler-bar bar3"></span> <span class="navbar-toggler-bar bar3"></span>
</button> </button>
</div> </div>
<a class="navbar-brand" href="${baseurl}">${title}</a> <a class="navbar-brand" href="javascript:void(0)">${title}</a>
</div> </div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-bar navbar-kebab"></span> <span class="navbar-toggler-bar navbar-kebab"></span>
@ -24,38 +24,40 @@
</button> </button>
</li> --> </li> -->
% for item in menu:
<li class="dropdown nav-item"> <li class="dropdown nav-item">
<a href="javascript:void(0)" class="dropdown-toggle nav-link" data-toggle="dropdown"> <a href="javascript:void(0)" class="dropdown-toggle nav-link" data-toggle="dropdown">
<div class="notification d-none d-lg-block d-xl-block"></div> <div class="${'notification' if item['notification'] == True else ''} d-none d-lg-block d-xl-block"></div>
<i class="${menu_icon}"></i> <i class="${item['icon']}"></i>
<p class="d-lg-none"> <p class="d-lg-none">
${menu_name} ${item['name']}
</p> </p>
</a> </a>
<ul class="dropdown-menu dropdown-menu-right dropdown-navbar"> <ul class="dropdown-menu dropdown-menu-right dropdown-navbar">
% for item in menu: % for link in item['list']:
<li class="nav-link"> <li class="nav-link">
<a href="${item['href']}" class="nav-item dropdown-item"> <a href="${link['href']}" class="nav-item dropdown-item">
${item['name']} ${link['name']}
</a> </a>
</li> </li>
% endfor % endfor
</ul> </ul>
</li> </li>
% endfor
<li class="dropdown nav-item"> <li class="dropdown nav-item">
<a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown"> <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
<div class="photo"> <div class="photo">
<img src="${profile_picture}" alt="Profile Photo"> <img src="${profile['picture']}" alt="Photo">
</div> </div>
<b class="caret d-none d-lg-block d-xl-block"></b> <b class="caret d-none d-lg-block d-xl-block"></b>
<p class="d-lg-none"> <p class="d-lg-none">
${profile_name} ${profile['name']}
</p> </p>
</a> </a>
<ul class="dropdown-menu dropdown-navbar"> <ul class="dropdown-menu dropdown-navbar">
% for item in profile_menu: % for item in profile['menu']:
<li class="nav-link"> <li class="nav-link">
<a href="${item['href']}" class="nav-item dropdown-item"> <a href="${item['href']}" class="nav-item dropdown-item">
${item['name']} ${item['name']}

View File

@ -13,7 +13,7 @@
</div> </div>
<ul class="nav"> <ul class="nav">
% for item in menu: % for item in menu:
% if any(role in item['roles'] for role in user_roles): % if any(role in item['roles'] for role in roles):
<li class="${'active' if item['name'] == active_page else ''}"> <li class="${'active' if item['name'] == active_page else ''}">
<a href="${item['href']}"> <a href="${item['href']}">
<i class="${item['icon']}"></i> <i class="${item['icon']}"></i>