Demo - Bootstrap 5.3 Scss - theme

This demo-theme has multilevel and offcanvas in small mode
This commit is contained in:
g7sim 2023-07-22 18:16:29 +02:00
parent 65316edb07
commit a242f1122a
19 changed files with 1107 additions and 0 deletions

View file

@ -0,0 +1,55 @@
@import 'include/thirdparty/Bootstrap5.3/scss/_bootstrap.scss';
/*! @import '_variables.scss'; */
$text-shadow: 0 1px 0 rgba(0, 0, 0, .05) !default;
$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
@mixin btn-shadow($color){
@include gradient-y-three-colors(lighten($color, 8%), $color, 60%, darken($color, 4%));
}
@import '../_common/common_style.scss';
@import '../assets/css/style.scss';
/*! 0.001 rem; == off ! --> custom height if no header wanted */
header.section-header{ height:5rem;
margin-top:-57px;
background-color: lightgray;
}
nav.nav-custom{
background-image: linear-gradient(#f9fafb, #f8f9fa 60%, #e9eaeb);
}
.dropdown-item.active, .dropdown-item:active {
color: var(--bs-dropdown-link-active-color);
background-color: var(--bs-dropdown-link-active-bg);
}
.dropdown-menu {
--bs-dropdown-link-color: var(--bs-body-color);
--bs-dropdown-link-hover-color: var(--bs-body-color);
--bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
--bs-dropdown-link-active-color: #fff;
--bs-dropdown-link-active-bg: lightgray; /*! #0d6efd; */
}
/*! ----- search-button -----*/
div.input-group span.input-group-btn{
background-color: lightgray;
}
/*! --- common footer-styles in _common/footer.scss ----- */
$footer-bg: $gray-300; /*! Standard */

View file

@ -0,0 +1,46 @@
@import 'include/thirdparty/Bootstrap5.3/scss/_bootstrap.scss';
/*! @import '_variables.scss'; */
$text-shadow: 0 1px 0 rgba(0, 0, 0, .05) !default;
$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
@mixin btn-shadow($color){
@include gradient-y-three-colors(lighten($color, 8%), $color, 60%, darken($color, 4%));
}
@import '../_common/common_style.scss';
@import '../assets/css/style.scss';
/*! 0.001 rem; == off ! --> custom height if no header wanted */
header.section-header{ height:5rem;
margin-top:-57px;
background-color: lightgray;
}
/*!
nav.nav-custom{ background-image: linear-gradient(#f9fafb, #f8f9fa 60%, #e9eaeb); }
*/
.dropdown-item.active, .dropdown-item:active {
color: var(--bs-dropdown-link-active-color);
background-color: var(--bs-dropdown-link-active-bg);
}
.dropdown-menu {
--bs-dropdown-link-color: var(--bs-body-color);
--bs-dropdown-link-hover-color: var(--bs-body-color);
--bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
--bs-dropdown-link-active-color: #fff;
--bs-dropdown-link-active-bg: lightgray; /*! #0d6efd; */
}

View file

@ -0,0 +1,67 @@
@import 'include/thirdparty/Bootstrap5.3/scss/_bootstrap.scss';
/*! @import '_variables.scss'; */
$text-shadow: 0 1px 0 rgba(0, 0, 0, .05) !default;
$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
@mixin btn-shadow($color){
@include gradient-y-three-colors(lighten($color, 8%), $color, 60%, darken($color, 4%));
}
@import '../_common/common_style.scss';
@import '../assets/css/style.scss';
/*! 0.001 rem; == off ! --> custom height if no header wanted : a compromise! */
header.section-header{ height:4rem;
margin-top:-57px;
background-color: lightblue;
}
nav.nav-custom {
background-color: #2c5b9c;
ul:not(.submenu) a{color:dimgray;}
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
color: dimgray;
}
@media only screen and ( min-width: 951px ) {
nav.nav-custom {
ul:not(.submenu) a{color:white;}
ul.dropdown-menu a, ul.submenu a {color:dimgray;}
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
color: white; }
}
@media only screen and ( max-width: 950px ) {
ul.navbar-nav{min-width:250px;}
}
.dropdown-item.active, .dropdown-item:active {
color: var(--bs-dropdown-link-active-color);
background-color: var(--bs-dropdown-link-active-bg);
}
.dropdown-menu {
--bs-dropdown-link-color: var(--bs-body-color);
--bs-dropdown-link-hover-color: var(--bs-body-color);
--bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
--bs-dropdown-link-active-color: #fff;
--bs-dropdown-link-active-bg: lightgray; /*! #0d6efd; */
}
div.input-group span.input-group-btn:hover {
background-color: lightblue;
}

View file

@ -0,0 +1,63 @@
@import 'include/thirdparty/Bootstrap5.3/scss/_bootstrap.scss';
/*! @import '_variables.scss'; */
$text-shadow: 0 1px 0 rgba(0, 0, 0, .05) !default;
$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
@mixin btn-shadow($color){
@include gradient-y-three-colors(lighten($color, 8%), $color, 60%, darken($color, 4%));
}
@import '../_common/common_style.scss';
@import '../assets/css/style.scss';
/*! 0.001 rem; == off ! --> custom height if no header wanted */
header.section-header{ height:4rem;
margin-top:-57px;
background-color: lightgreen;
}
nav.nav-custom {
background-color: #008000;
ul:not(.submenu) a{color:dimgray;}
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
color: dimgray;
}
@media only screen and ( min-width: 951px ) {
nav.nav-custom {
ul:not(.submenu) a{color:white;}
ul.dropdown-menu a, ul.submenu a {color:dimgray;}
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
color: white; }
}
@media only screen and ( max-width: 950px ) {
ul.navbar-nav{min-width:250px;}
}
.dropdown-item.active, .dropdown-item:active {
color: var(--bs-dropdown-link-active-color);
background-color: var(--bs-dropdown-link-active-bg);
}
.dropdown-menu {
--bs-dropdown-link-color: var(--bs-body-color);
--bs-dropdown-link-hover-color: var(--bs-body-color);
--bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
--bs-dropdown-link-active-color: #fff;
--bs-dropdown-link-active-bg: lightgray; /*! #0d6efd; */
}
div.input-group span.input-group-btn:hover {
background-color: lightgreen;
}

View file

@ -0,0 +1,10 @@
Addon_Name = 'Boot5.3-offcan-mult'
;Addon_Unique_ID =
Addon_Version = 0.8
min_gpeasy_version = 5.2
About = 'A Bootstrap 5.3 demo - theme with offcanvas mode and multilevel.';
[FrontEndFramework]
name = Bootstrap
version = 5

View file

@ -0,0 +1,135 @@
// Theme Bootswatch 4 Scss
// Common styles used in all layouts
//
// Instead of Autoprefixer we use vendor-prefix mixins,
// see /include/thirdparty/Bootstrap4/scss/bootstrap/vp-mixins
//
// Migrate to Bootstrap 4: check out https://getbootstrap.com/docs/4.4/migration/
// Imports
@if variable-exists(web-font-path) {
@import url($web-font-path);
}
@import 'contactform.scss';
@import 'compensate_fixed_navbar.scss'; // default, import only with 'fixed-top' class on navbar in template.php line 44
@import 'footer.scss';
// Page Flex Layout for Sticky Footer ==========================================
html, body {
height: 100%;
}
body {
// vendor-prefix mixin
@include vp-flexbox();
@include vp-flex-direction(column);
}
// Height fix for Admin Top Bar and hidden admin UI
html:not(.override_admin_style) body.gpAdmin {
height: calc(100% - 29px);
}
// Navbar =======================================================================
$navbar-font-size: 1rem !default; // non-standard variable, needs a default value. actual value see layout's variables.scss
.navbar {
font-size: $navbar-font-size;
}
// Content Area
.main-content {
// vendor-prefix mixin
@include vp-flex(1 0 auto);
}
// Add padding-top to the first content section to prevent content sticking to the navbar
#gpx_content > .GPAREA:first-child {
padding-top: 2rem;
}
// Main Footer
footer.main-footer {
// vendor-prefix mixin
@include vp-flex-shrink(0);
// more in footer.scss
}
// Fix for bad container paddings in navbars (as of Bootstrap 4.1.1)
@include media-breakpoint-up(sm) {
.navbar > .container,
.navbar > .container-fluid {
padding-right: ($grid-gutter-width / 2);
padding-left: ($grid-gutter-width / 2);
}
}
// Align menu right, fix dropdown alignment
.navbar-right {
> .GPAREA:first-child {
margin-left: auto;
}
.dropdown-menu {
left: auto;
right: 0;
}
}
// convert Typesetter grid to become Bootstrap 4 (flex) grid =====================
.gpRow { @extend .row; }
.gpCol-1 { @extend .col-md-1; }
.gpCol-2 { @extend .col-md-2; }
.gpCol-3 { @extend .col-md-3; }
.gpCol-4 { @extend .col-md-4; }
.gpCol-5 { @extend .col-md-5; }
.gpCol-6 { @extend .col-md-6; }
.gpCol-7 { @extend .col-md-7; }
.gpCol-8 { @extend .col-md-8; }
.gpCol-9 { @extend .col-md-9; }
.gpCol-10 { @extend .col-md-10; }
.gpCol-11 { @extend .col-md-11; }
.gpCol-12 { @extend .col-12; }
[class *= "gpCol-"] { margin-bottom: unset; }
// fixes for flex grid
.filetype-wrapper_section.row {
> .gpclear {
display: none;
}
&:after{
content: none;
}
}
// Extra Content 'Dropdown Divider'
.gpArea_Extra_Bootstrap_Dropdown_Divider {
@extend .dropdown-divider;
}
// Admin Links
.footer-bottom {
> span {
margin-right: 0.75em;
}
.sitemap_link > a:before,
.login_link > a:before {
display: inline-block;
font-family: FontAwesome;
}
.sitemap_link > a:before {
content: "\f0ca\a0";
}
.login_link > a:before {
content: "\f2bd\a0";
}
}

View file

@ -0,0 +1,25 @@
// Theme Bootswatch 4 Scss
// Compensations for fixed navbar
// only required when the main navbar has the css class 'fixed-top'
// padding-top for the body element
body {
padding-top: $navbar-height;
}
// Prevent targeted anchors hiding behind fixed navbar
// default compensation
.GPAREA a[name]:not([href]),
.GPAREA a[id]:not([href]) {
margin-top: calc( ( #{$navbar-height} + 2rem ) * -1 );
padding-top: calc( #{$navbar-height} + 2rem );
z-index: -5;
}
// compensation when logged-in
// with support for HideAdminUI plugin https://github.com/juek/HideAdminUI
html:not(.override_admin_style) body.gpAdmin .GPAREA a[name]:not([href]),
html:not(.override_admin_style) body.gpAdmin .GPAREA a[id]:not([href]) {
margin-top: calc( ( #{$navbar-height} + 2rem + 29px ) * -1 );
padding-top: calc( #{$navbar-height} + 2rem + 29px );
}

View file

@ -0,0 +1,50 @@
// Typesetter's built-in contact form
form.contactform {
width: 100%;
label:not([for="contact_message"]) {
width: auto;
float: none;
clear: both;
margin: 0 0 0.6em 0;
> span.title {
display: block;
float: none;
width: auto;
margin: 0;
}
&:after {
content: "";
display: block;
clear: both;
}
}
input, textarea {
float: none;
width: 100%;
margin-top: 0.5rem;
}
input.submit.btn {
float: none;
width: auto;
padding: $input-btn-padding-y $input-btn-padding-x;
}
> label[for="contact_message"] {
width: auto;
float: none;
clear: both;
margin: 0;
}
> textarea#contact_message {
margin-bottom: 0.6em;
}
> .alert {
text-align: center;
margin-top: 20px;
}
}

View file

@ -0,0 +1,102 @@
// footer variables
// these are no Bootstrap standard variables
// therefore we need to define default values
$footer-font-size: 0.875rem !default;
$footer-bg: $gray-300 !default;
$footer-border-top: none !default;
$footer-color: $body-color !default;
$footer-headings-color: $headings-color !default;
$footer-link-color: $link-color !default;
$footer-link-hover-color: $link-hover-color !default;
$footer-nav-bg: transparent !default;
$footer-nav-item-border: none !default;
$footer-nav-link-color: $footer-link-color !default;
$footer-nav-link-bg: transparent !default;
$footer-nav-link-hover-color: $footer-link-hover-color !default;
$footer-nav-link-hover-bg: transparent !default;
$footer-nav-link-active-color: $footer-link-hover-color !default;
$footer-nav-link-active-bg: transparent !default;
footer.main-footer {
font-size: $footer-font-size;
background: $footer-bg;
border-top: $footer-border-top;
color: $footer-color;
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
color: $footer-headings-color;
}
a {
color: $footer-link-color;
&:hover {
color: $footer-link-hover-color;
}
}
}
.footer-nav,
.footer-nav ul {
list-style: none;
padding: 0;
}
.footer-nav {
margin: 0.6rem 0;
background: $footer-nav-bg;
border-bottom: $footer-nav-item-border;
li {
display: block;
margin: 0;
padding: 0;
border-top: $footer-nav-item-border;
&:last-child {
border-bottom: none;
}
}
a, a:hover, a:visited, a:active, a:focus {
text-decoration: none;
color: $footer-nav-link-color;
background: $footer-nav-link-bg;
}
a {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0.4rem 0;
&.active {
color: $footer-nav-link-active-color;
background: $footer-nav-link-active-bg;
}
&:hover, &:focus {
color: $footer-nav-link-hover-color;
background: $footer-nav-link-hover-bg;
}
}
ul {
margin: 0;
}
// 2nd level links
> li > ul > li > a {
text-indent: 1em;
}
// 3rd level links
> li > ul > li > ul > li > a {
text-indent: 2em;
}
}

View file

@ -0,0 +1,4 @@
# bs5-offcanvas-menu
Bootstrap 5 Off Canvas Menu
<br>
Live Preview https://engrasel.github.io/bs5-offcanvas-menu/

View file

@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (c) 2023 Anil Kumar (https://codepen.io/anil-vinnakoti5/pen/rNZomxX)
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,188 @@
/*! this scss contains general styles for all theme-colors ! */
* { margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
color-scheme: light;
}
body {
-webkit-font-smoothing: antialiased;
}
.nav-link{
white-space: nowrap;
}
main > .container {
padding: 1px 15px 0;
}
/*! lightgray - here adjust general navigation background color ! */
.nav-custom{ background-color: #fcfcfc;
border-top:1px lightgray solid;
border-bottom:1px lightgray solid; }
.bg-custom{ background-color: white; }
/*! .footer-admin-links span.login_link::before{ content : " \2617 " !important;} */
.footer-admin-links {
span.login_link {
&::before {
content: " \2617 " !important;
}
}
}
span.sitemap_link a, span.login_link a{text-decoration:none;}
@media all and (max-width: 991px) {
ul.navbar-nav{ padding:15px;
border:1px lightgray solid;
border-radius:4px;}
div.gpMenu.gpArea_FullMenu.GPAREA > .navbar-nav{
border: 1px lightgray solid;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
}
}
.main-footer{bottom:0;
position: absolute;
width: 100%;
margin-bottom:-30px;
}
/*! --- https://codepen.io/anil-vinnakoti5/pen/rNZomxX --- */
@media all and (min-width: 992px) {
.dropdown-menu li {
position: relative;
}
.dropdown-menu .submenu {
display: none;
position: absolute;
left: 100%;
top: -7px;
}
.dropdown-menu .submenu-left {
right: 100%;
left: auto;
}
.dropdown-menu > li:hover {
background-color: #f1f1f1;
}
.dropdown-menu > li:hover > .submenu {
display: block;
}
}
@media (max-width: 991px) {
.dropdown-menu .dropdown-menu {
margin-left: 0.7rem;
margin-right: 0.7rem;
margin-bottom: 0.5rem;
}
}
/*! ------------ user css ------------------------------------------------------ */
@media (min-width : 992px) {
.offcanvas {
visibility : visible;
position : relative;
background : none;
border : none;
justify-content : end;
color : blue;
}
}
@media (max-width : 992px) {
.offcanvas {
width : 18rem !important;
}
.offcanvas-start-lg {
top : 0;
left : 0;
border-right : 1px solid rgba(0, 0, 0, .2);
transform : translateX(-100%);
}
}
#main-nav {transition: transform 1s ease-out;}
/*! ----------- searchform ------------------------- */
#search, form.fmail {min-width:15em;
max-height:2.2em !important;}
form.fmail {border-radius:3px;}
.fmail .input-group{border-radius:1.1em;
background-color: #e3ecfb;}
div#search{ margin-right:3em; }
div#search, div.input-group, span.input-group-btn, form.fmail{
background-color: inherit;
border-radius:1.1em;
}
.bi-search{-webkit-text-stroke: 1px;}
/*! --- search - button --- #dee2e6; */
.btn-custom{background:transparent;}
div.input-group span.input-group-btn{
background-color: inherit;
border-radius:17px !important;
width:2.3em !important;
max-height:2.3em;
padding-bottom:0.3em;
visibility:visible;
z-index:1;
}
div.input-group:not(:hover) {
min-width:6em;
visibility:hidden;
span.input-group-btn{visibility:visible;}
}
.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating), .input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3), .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control, .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
input.form-control:focus{ border-color: gray;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 3px rgba(255, 100, 255, 0.5);
}
form.fmail::hover, div.input-group::hover, form.fmail::focus, div.input-group::focus{
min-width:12em !important;
transition: 1s;
}
form.fmail > .input-group:hover {
background-color: transparent !important;
input.form-control {border-color:lightgray; margin-right:3px;}
}

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,63 @@
function externalLinks() { for(var c = document.getElementsByTagName("a"), a = 0;a < c.length;a++) { var b = c[a];
b.getAttribute("href") && b.hostname !== location.hostname && (b.rel = "nofollow noopener") } } ; externalLinks();
// menu -classes
//$( "div.gpMenu ul.dropdown-menu li a").addClass("dropdown-item");
//$( "div.gpMenu ul.navbar-nav li.nav-item a").addClass("nav-link");
$(document).ready(function() {
$("ul.navbar-nav > li > ul.dropdown-menu > li > ul.dropdown-menu").addClass("submenu");
});
document.addEventListener("DOMContentLoaded", function() {
var dropdownMenus = document.querySelectorAll("ul.navbar-nav > li > ul.dropdown-menu > li > ul.dropdown-menu");
for (var i = 0; i < dropdownMenus.length; i++) {
dropdownMenus[i].classList.add("submenu");
}
});
// Replace div.gpMenu ul.dropdown-menu li a with dropdown-item class
var dropdownItems = document.querySelectorAll("div.gpMenu ul.dropdown-menu li a");
for (var i = 0; i < dropdownItems.length; i++) {
dropdownItems[i].classList.add("dropdown-item");
}
// Replace div.gpMenu ul.navbar-nav li.nav-item a with nav-link class
var navLinks = document.querySelectorAll("div.gpMenu ul.navbar-nav li.nav-item a");
for (var i = 0; i < navLinks.length; i++) {
navLinks[i].classList.add("nav-link");
}
// JavaScript/jQuery code to handle dropdowns
document.addEventListener("DOMContentLoaded", function() {
var dropdownToggle = document.querySelector(".navbar .dropdown-toggle");
if (dropdownToggle) {
dropdownToggle.addEventListener("click", function(e) {
e.preventDefault();
var dropdownMenu = dropdownToggle.nextElementSibling;
if (dropdownMenu.style.display === "block") {
dropdownMenu.style.display = "none";
} else {
dropdownMenu.style.display = "block";
}
});
}
});
// (c) 2020-2022 Written by Simon Köhler in Panama
// github.com/koehlersimon
// simon-koehler.com
document.addEventListener('click',function(e){
// Hamburger menu
if(e.target.classList.contains('hamburger-toggle')){
e.target.children[0].classList.toggle('active');
}
})

View file

@ -0,0 +1,77 @@
$( "div.gpMenu ul.dropdown-menu li a").addClass("dropdown-item");
$( "div.gpMenu ul.navbar-nav ul.dropdown-menu ul.dropdown-menu" ).addClass("submenu");
$( "div.gpMenu ul.navbar-nav ul.dropdown-menu ul.dropdown-menu ul.dropdown-menu").addClass("submenu");
$( "div.gpMenu ul.navbar-nav li.nav-item a" ).addClass("nav-link px-3 px-lg-2");
$( "div.gpMenu ul:not(.dropdown-menu) li.nav-item.dropdown a:not(.dropdown-item)" ).attr("id","dropdown").attr("data-bs-toggle","dropdown");
$( "div.gpMenu ul.dropdown-menu").attr("aria-labelledby", "navbarDropdown");
$( "div.gpMenu ul.dropdown-menu li").removeClass("nav-item");
$( "div.gpMenu ul.dropdown-menu li a").removeClass("nav-link");
/*
$(document).ready(function() {
if ($(window).width() >= 992) {
$('div.offcanvas-body.sidebar ul:last').addClass('dropdown-menu-right').attr('data-bs-popper' , 'none');
}
});
*/
/* --from -- https://github.com/engrasel/bs5-offcanvas-menu/ MIT License--- */
document.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll('.dropdown-menu').forEach(function(element) {
element.addEventListener('click', function(e) {
e.stopPropagation();
});
})
});
/* --- Copyright (c) 2023 Anil Kumar (https://codepen.io/anil-vinnakoti5/pen/rNZomxX) MIT License --- */
window.addEventListener("resize", function() {
"use strict";
window.location.reload();
});
document.addEventListener("DOMContentLoaded", function() {
// make it as accordion for smaller screens
if (window.innerWidth < 992) {
// close all inner dropdowns when parent is closed
document.querySelectorAll('.navbar .dropdown').forEach(function(everydropdown) {
everydropdown.addEventListener('hidden.bs.dropdown', function() {
// after dropdown is hidden, then find all submenus
this.querySelectorAll('.submenu').forEach(function(everysubmenu) {
// hide every submenu as well
everysubmenu.style.display = 'none';
});
})
});
document.querySelectorAll('.dropdown-menu a').forEach(function(element) {
element.addEventListener('click', function(e) {
let nextEl = this.nextElementSibling;
if (nextEl && nextEl.classList.contains('submenu')) {
// prevent opening link if link needs to open dropdown
e.preventDefault();
if (nextEl.style.display == 'block') {
nextEl.style.display = 'none';
} else {
nextEl.style.display = 'block';
}
}
});
})
}
// end if innerWidth
});
// DOMContentLoaded end

View file

@ -0,0 +1,25 @@
<?php
$GP_GETALLGADGETS = true;
/*
$link = common::Link('','%s');
gpOutput::Area('header','<h1>'.$link.'</h1>');
gpOutput::Area('link_label','<h3>%s</h3>');
*/
/* for user specific entries */
global $page;
$themeDir = dirname($page->theme_path);
/**
* Include current layout settings (examples)
*/
//$page->head .= '<link rel="stylesheet" type="text/css" href="'.$themeDir.'/assets/css/style.css'.'" />';
//include($page->theme_dir . '/' . $page->theme_color . '/settings.php');
//$page->head_js[] = $themeDir.'/assets/js/bootnavbar.js';
$page->head_js[] = $themeDir.'/assets/js/script.js';

View file

@ -0,0 +1,162 @@
<?php
/**
* Theme Bootswatch 5 Scss 5.2.3
* Typesetter CMS theme template
* based on https://bootswatch.com
*
*/
global $page, $config;
$path = $page->theme_dir . '/drop_down_menu.php';
//include_once($path);
common::LoadComponents( 'bootstrap5.3-js','bootstrap-icons' );
$lang = isset($page->lang) ? $page->lang : $config['language'];
/**
* If you are using Multi-Language Manager 1.2.3+
* and want to use localized $langmessage values in the template,
* uncomment the following line
*/
// common::GetLangFile('main.inc', $lang);
?><!DOCTYPE html>
<html lang="<?php echo $lang; ?>" class="bootstrap-5">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<?php
global $page, $config;
gpOutput::GetHead();
common::LoadComponents( 'bootstrap-icons' );
$lang = isset($page->lang) ? $page->lang : $config['language'];
?>
</head>
<body>
<!--[if lte IE 9]>
<div class="alert alert-warning">
<h3>Bootstrap 4</h3>
<p>We&rsquo;re sorry but Internet Explorer 9 support was dropped as of Bootstrap version 4.</p>
</div>
<![endif]-->
<header class="section-header row text-center">
<div class="container col hd1">
<?php echo common::Link('', $config['title'], '', 'class="navbar-brand"'); ?>
</div>
<div class="container col hd2">
<?php gpOutput::Get('Extra', 'headx_b53_1'); ?>
</div>
</header> <!-- section-header.// -->
<nav class="navbar navbar-expand-lg text-body nav-custom shadow-sm sticky-top main-navigation">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasGp" aria-expanded="false"
aria-label="Toggle navigation" aria-controls = 'offcanvasEx'>
<span class="navbar-toggler-icon"></span>
</button>
<div class = 'offcanvas offcanvas-start-lg bg-custom' tabindex = '-1' id = 'offcanvasGp' aria-labelledby = 'offcanvasLabel'>
<div class = 'offcanvas-header d-flex d-lg-none'>
<h5 class = 'offcanvas-title text-white' id = 'offcanvasLabel'>Navbar</h5>
<a href='#' class = 'text-reset p-0' data-bs-dismiss = 'offcanvas' aria-label = 'close'>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
<path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
</svg>
</a> <!-- &#xF659; &#128473; &#10005; &#10006; -->
</div>
<div class="offcanvas-body sidebar pb-3 pb-lg-0" id="main_nav">
<?php
$GP_ARRANGE = false;
$GP_MENU_ELEMENTS = '';
// main nav classes
$GP_MENU_CLASSES = array(
'menu_top' => 'navbar-nav ms-lg-auto mb-2 mb-lg-0 col-sm-9',
'a' => 'xy',
'selected' => 'active',
'selected_li' => '',
'childselected' => 'active',
'childselected_li' => 'active', // use '' if you do not want 1st-level nav items to indicate that a child item is active
'li_' => 'nav-item b1 nav-item-',
'li_title' => '',
'haschildren' => 'nav-link dropdown-toggle b2', //a
'haschildren_li' => 'dropdown b3',
'child_ul' => 'dropdown-menu shadow-sm b4',
);
gpOutput::Get('FullMenu'); //top two levels
?>
</div>
</div> <!-- navbar-collapse.// -->
<div id="search" class="col-md-3 justify-content-end float-right">
<?php //search form
global $langmessage;
$_GET += array('q'=>'');
?>
<form action="<?php echo common::GetUrl( 'special_gpsearch') ?>" method="get" class="fmail">
<div class="input-group">
<input name="q" type="text" class="form-control" value="<?php echo htmlspecialchars($_GET['q']) ?>"
placeholder="<?php echo $langmessage['Search'] ?>">
<span class="input-group-btn"><button type="submit" class="btn btn-custom" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg></button>
</span>
</div>
</form>
</div> <!-- search -->
</div> <!-- container-fluid.// -->
</nav>
<!-- </div> container // -->
<main class="pt-1">
<section class="container">
<?php $page->GetContent(); ?>
</section>
</main><!-- /.main-content -->
<footer class="main-footer position-absolute bottom-0 mt-auto">
<div class="container">
<div class="row">
<div class="col-sm-6 col-lg-4 footer-column footer-column-1">
<?php gpOutput::Get('Extra', 'bt5.3_offcan_FootCol_1a'); ?>
</div>
<div class="col-sm-6 col-lg-4 footer-column footer-column-2">
<?php gpOutput::Get('Extra', 'bt5.3_offcan_FootCol_2a'); ?>
</div>
<div class="col-sm-6 col-lg-4 footer-column footer-admin-links">
<p> &copy; <?php echo date("Y"); ?> <?php echo $_SERVER["SERVER_NAME"]; ?> </p>
&nbsp; &#x20;
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
<style>svg{fill:#585858}</style><path d="M208 80c0-26.5 21.5-48 48-48h64c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48h-8v40H464c30.9 0 56 25.1 56 56v32h8c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H464c-26.5 0-48-21.5-48-48V368c0-26.5 21.5-48 48-48h8V288c0-4.4-3.6-8-8-8H312v40h8c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H256c-26.5 0-48-21.5-48-48V368c0-26.5 21.5-48 48-48h8V280H112c-4.4 0-8 3.6-8 8v32h8c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V368c0-26.5 21.5-48 48-48h8V288c0-30.9 25.1-56 56-56H264V192h-8c-26.5 0-48-21.5-48-48V80z"/></svg>
<?php gpOutput::GetAdminLink(); ?>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</footer><!-- /.main-footer -->
</body>
</html>