Skip to content

Commit

Permalink
feat(layout): add horizontal layout
Browse files Browse the repository at this point in the history
  • Loading branch information
zuramai committed Aug 1, 2021
1 parent 17b6450 commit 9e3837b
Show file tree
Hide file tree
Showing 63 changed files with 2,719 additions and 862 deletions.
783 changes: 393 additions & 390 deletions dist/application-chat.html

Large diffs are not rendered by default.

5 changes: 4 additions & 1 deletion dist/application-checkout.html
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,10 @@
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical with Navbar</a>
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
Expand Down
5 changes: 4 additions & 1 deletion dist/application-email.html
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,10 @@
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical with Navbar</a>
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
Expand Down
5 changes: 4 additions & 1 deletion dist/application-gallery.html
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,10 @@
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical with Navbar</a>
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
Expand Down
196 changes: 196 additions & 0 deletions dist/assets/css/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -1007,6 +1007,198 @@
display: none;
}

.layout-horizontal .header-top {
background-color: white;
padding: 1.5rem;
}
.layout-horizontal .header-top .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.layout-horizontal .header-top .burger-btn i {
height: 20px;
display: inline-block;
}
.layout-horizontal .header-top .logo img {
height: 20px;
}
.layout-horizontal .main-navbar {
background-color: #435ebe;
padding: 1rem;
}
.layout-horizontal .main-navbar ul {
list-style: none;
padding: 0;
display: flex;
gap: 2rem;
margin-bottom: 0;
}
.layout-horizontal .main-navbar ul .menu-link {
display: flex;
position: relative;
flex-direction: row;
padding: 0.4rem 0;
gap: 0.5rem;
align-items: center;
}
.layout-horizontal .main-navbar ul .menu-link span {
height: 20px;
}
.layout-horizontal .main-navbar ul > .menu-item {
position: relative;
}
.layout-horizontal .main-navbar ul > .menu-item .menu-link {
color: #dee2e6;
}
.layout-horizontal .main-navbar ul > .menu-item.has-sub .menu-link {
padding-right: 1.3rem;
}
.layout-horizontal .main-navbar ul > .menu-item.has-sub .menu-link:after {
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23ccc" opacity="0.7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9" ></polyline></svg>');
position: absolute;
color: #fff;
right: 0;
top: 7px;
display: block;
}
.layout-horizontal .main-navbar ul > .menu-item:hover .menu-link {
color: white;
}
.layout-horizontal .main-navbar ul > .menu-item:hover .submenu {
visibility: visible;
opacity: 1;
top: 100%;
}
.layout-horizontal .main-navbar .submenu {
visibility: hidden;
opacity: 0;
top: 125%;
transition: all 0.3s cubic-bezier(0, 0.55, 0.45, 1);
position: absolute;
z-index: 999;
border-radius: 0.2rem;
background-color: white;
box-shadow: 0px 5px 20px rgba(100, 100, 100, 0.1);
}
.layout-horizontal .main-navbar .submenu .submenu-group-wrapper {
position: relative;
}
.layout-horizontal .main-navbar .submenu .submenu-group {
display: table-cell;
padding: 0.5rem 0.3rem 0.3rem 0.5rem;
flex-wrap: wrap;
max-height: 200px;
min-width: 200px;
}
.layout-horizontal .main-navbar .submenu .submenu-group .submenu-item {
position: relative;
}
.layout-horizontal .main-navbar .submenu .submenu-group .submenu-item.has-sub .submenu-link {
position: relative;
}
.layout-horizontal .main-navbar .submenu .submenu-group .submenu-item.has-sub .submenu-link:after {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-40%);
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23888' class='bi bi-chevron-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}
.layout-horizontal .main-navbar .submenu .submenu-group .submenu-item a {
padding: 0.6rem;
padding-right: 2rem;
color: #6c757d;
display: block;
}
.layout-horizontal .main-navbar .submenu .submenu-group .submenu-item a:hover {
color: #343a40;
}
.layout-horizontal .main-navbar .submenu .submenu-group .submenu-item:hover .subsubmenu {
visibility: visible;
top: 0rem;
opacity: 1;
}
.layout-horizontal .main-navbar .subsubmenu {
visibility: hidden;
opacity: 0;
top: 125%;
transition: all 0.3s cubic-bezier(0, 0.55, 0.45, 1);
position: absolute;
z-index: 999;
border-radius: 0.2rem;
background-color: white;
box-shadow: 0px 5px 20px rgba(100, 100, 100, 0.1);
gap: 0;
top: 1rem;
left: 100%;
display: flex;
padding: 0.5rem;
flex-direction: column;
border-radius: 0.3rem;
min-width: 200px;
}
@media screen and (max-width: 1199px) {
.layout-horizontal .main-navbar {
background-color: #f5f7fc;
overflow: hidden;
padding: 1rem;
display: none;
}
.layout-horizontal .main-navbar.active {
max-height: initial;
}
.layout-horizontal .main-navbar ul {
flex-direction: column;
gap: 0;
}
.layout-horizontal .main-navbar ul .menu-item.has-sub .menu-link:after {
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23888" opacity="0.7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9" ></polyline></svg>') !important;
top: unset;
}
.layout-horizontal .main-navbar ul .menu-link {
color: #6c757d !important;
padding: 1rem 0;
}
.layout-horizontal .main-navbar .submenu {
visibility: visible !important;
opacity: 1;
box-shadow: none;
position: static;
padding: 1rem;
background-color: unset;
transition: all 0.2s;
padding-top: 0;
display: none;
padding-bottom: 0;
}
.layout-horizontal .main-navbar .submenu .submenu-group-wrapper {
display: flex;
flex-direction: column;
max-height: unset;
}
.layout-horizontal .main-navbar .submenu .submenu-group {
max-height: unset;
padding: 0;
min-width: unset;
width: 100%;
}
.layout-horizontal .main-navbar .submenu.active {
display: block;
}
.layout-horizontal .main-navbar .subsubmenu {
visibility: visible !important;
opacity: 1;
box-shadow: none;
position: static;
padding: 1rem;
background-color: unset;
display: none;
}
.layout-horizontal .main-navbar .subsubmenu.active {
display: block;
}
}

.pagination.pagination-primary .page-item.active .page-link {
background-color: #435ebe;
border-color: #435ebe;
Expand Down Expand Up @@ -1226,6 +1418,10 @@
#main.layout-navbar {
padding: 0;
}
#main.layout-horizontal {
padding: 0;
margin: 0;
}
#main #main-content {
padding: 2rem;
}
Expand Down
40 changes: 40 additions & 0 deletions dist/assets/js/pages/horizontal-layout.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
function slideToggle(t,e,o){0===t.clientHeight?j(t,e,o,!0):j(t,e,o)}function slideUp(t,e,o){j(t,e,o)}function slideDown(t,e,o){j(t,e,o,!0)}function j(t,e,o,i){void 0===e&&(e=400),void 0===i&&(i=!1),t.style.overflow="hidden",i&&(t.style.display="block");var p,l=window.getComputedStyle(t),n=parseFloat(l.getPropertyValue("height")),a=parseFloat(l.getPropertyValue("padding-top")),s=parseFloat(l.getPropertyValue("padding-bottom")),r=parseFloat(l.getPropertyValue("margin-top")),d=parseFloat(l.getPropertyValue("margin-bottom")),g=n/e,y=a/e,m=s/e,u=r/e,h=d/e;window.requestAnimationFrame(function l(x){void 0===p&&(p=x);var f=x-p;i?(t.style.height=g*f+"px",t.style.paddingTop=y*f+"px",t.style.paddingBottom=m*f+"px",t.style.marginTop=u*f+"px",t.style.marginBottom=h*f+"px"):(t.style.height=n-g*f+"px",t.style.paddingTop=a-y*f+"px",t.style.paddingBottom=s-m*f+"px",t.style.marginTop=r-u*f+"px",t.style.marginBottom=d-h*f+"px"),f>=e?(t.style.height="",t.style.paddingTop="",t.style.paddingBottom="",t.style.marginTop="",t.style.marginBottom="",t.style.overflow="",i||(t.style.display="none"),"function"==typeof o&&o()):window.requestAnimationFrame(l)})}

// Responsive burger btn onclick
document.querySelector('.burger-btn').addEventListener('click', (e) => {
e.preventDefault()
let navbar = document.querySelector('.main-navbar')

slideToggle(navbar, 300)
})

window.onload = () => checkWindowSize()
window.addEventListener('resize',(event) => {
checkWindowSize()
})

function checkWindowSize() {
if(window.innerWidth < 1200) listener()
}

function listener() {
let menuItems = document.querySelectorAll('.menu-item.has-sub')
console.log(menuItems)
menuItems.forEach(menuItem => {
menuItem.querySelector('.menu-link').addEventListener('click', (e) => {
e.preventDefault()
let submenu = menuItem.querySelector('.submenu')
submenu.classList.toggle('active')
})
})

// Three level menu event listener
let submenuItems = document.querySelectorAll('.submenu-item.has-sub')

submenuItems.forEach(submenuItem => {
submenuItem.querySelector('.submenu-link').addEventListener('click', e => {
e.preventDefault()
submenuItem.querySelector('.subsubmenu').classList.toggle('active')
})
})
}
5 changes: 4 additions & 1 deletion dist/component-alert.html
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,10 @@
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical with Navbar</a>
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
Expand Down
5 changes: 4 additions & 1 deletion dist/component-badge.html
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,10 @@
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical with Navbar</a>
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
Expand Down
5 changes: 4 additions & 1 deletion dist/component-breadcrumb.html
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,10 @@
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical with Navbar</a>
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
Expand Down
5 changes: 4 additions & 1 deletion dist/component-button.html
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,10 @@
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical with Navbar</a>
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
Expand Down
5 changes: 4 additions & 1 deletion dist/component-card.html
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,10 @@
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical with Navbar</a>
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
Expand Down
5 changes: 4 additions & 1 deletion dist/component-carousel.html
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,10 @@
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical with Navbar</a>
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
Expand Down
5 changes: 4 additions & 1 deletion dist/component-dropdown.html
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,10 @@
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical with Navbar</a>
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
Expand Down
5 changes: 4 additions & 1 deletion dist/component-list-group.html
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,10 @@
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical with Navbar</a>
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
Expand Down
5 changes: 4 additions & 1 deletion dist/component-modal.html
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,10 @@
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical with Navbar</a>
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
Expand Down
Loading

0 comments on commit 9e3837b

Please sign in to comment.