/* ========================================================= */
/* Concrete Top Navigation Bar via PHP data + q-components */
/* ========================================================= */
/* ========================================================= */
/* Component: brand */
/* ========================================================= */
q-component c5-navbar-brand {
q-property href: "#"
q-property text: ""
a.navbar-brand {
href: "${this.component.href}"
slot { logos }
span.c5-brand-text {
text { ${this.component.text} }
}
}
}
/* ========================================================= */
/* Component: normal nav link */
/* Slots: effects */
/* ========================================================= */
q-component c5-navbar-link {
q-property label: ""
q-property url: "#"
q-property target: "_self"
q-property classes: ""
li.nav-item {
a {
class: "nav-link ${this.component.classes}"
target: "${this.component.target}"
href: "${this.component.url}"
span.c5-nav-label {
text { ${this.component.label} }
}
span.c5-nav-effect {
slot { effects }
}
}
}
}
/* ========================================================= */
/* Component: dropdown nav link */
/* Slots: children, effects */
/* ========================================================= */
q-component c5-navbar-submenu {
q-property label: ""
q-property url: "#"
q-property target: "_self"
q-property classes: ""
li.nav-item.dropdown.w3-theme-d4 {
a {
class: "w3-theme-d4 nav-link dropdown-toggle ${this.component.classes}"
data-concrete-toggle: "dropdown"
target: "${this.component.target}"
href: "javascript:void(0)"
span.c5-nav-label {
text { ${this.component.label} }
}
span.c5-nav-effect {
slot { effects }
}
}
ul.dropdown-menu.w3-theme-d4 {
slot { children }
}
}
}
/* ========================================================= */
/* Component: dropdown child link */
/* ========================================================= */
q-component c5-navbar-dropdown-link {
q-property label: ""
q-property url: "#"
q-property target: "_self"
q-property classes: ""
li {
a {
class: "w3-theme-d3 dropdown-item ${this.component.classes}"
target: "${this.component.target}"
href: "${this.component.url}"
text { ${this.component.label} }
}
}
}
/* ========================================================= */
/* Component: search form */
/* ========================================================= */
q-component c5-navbar-search {
q-property action: ""
q-property searchLabel: "Search"
form {
method: "get"
action: "${this.component.action}"
input.form-control {
type: "search"
name: "query"
placeholder: "${this.component.searchLabel}"
aria-label: "${this.component.searchLabel}"
}
button.btn.btn-light.bg-white.ms-2 {
type: "submit"
i.fas.fa-search.text-secondary { }
}
}
}
/* ========================================================= */
/* Component: language switcher */
/* ========================================================= */
q-component c5-language-switcher {
q-property label: "Switch Language"
div.dropdown-center.ms-3.order-2 {
button.btn.btn-link.dropdown-toggle.d-block.mx-auto {
type: "button"
data-bs-toggle: "dropdown"
aria-expanded: "false"
i.fas.fa-globe { }
span.d-lg-none.ms-2 {
text { ${this.component.label} }
}
}
ul.dropdown-menu.dropdown-menu-lg-end.w-100 {
slot { items }
}
}
}
/* ========================================================= */
/* Component: global nav particles */
/* ========================================================= */
q-component c5-navbar-particles {
/* particle-emitter {
id: "t120-emitter"
emitrate: "74"
lifetime: "700"
lifetimevariation: "90"
xvelocity: "0"
yvelocity: "-1.75"
xacceleration: "0"
yacceleration: "0.0028"
startsize: "25"
endsize: "1"
startopacity: "0.5"
endopacity: "0.02"
startsizevariation: "7"
endsizevariation: "5"
startopacityvariation: "0.16"
endopacityvariation: "0.02"
x: "110"
y: "114"
xvariation: "845"
yvariation: "20"
xvelocityvariation: "0"
yvelocityvariation: "0.04"
xaccelerationvariation: "0"
yaccelerationvariation: "0.005"
maxactiveparticles: "166"
maxactiveparticlesvariation: "18"
running: "true"
interval: "10"
src: "/packages/qhtml6/dist/assets/particle.png"
color: "#08c473"
qhtml-unsynced: "1"
style {
position: absolute
inset: 0px
display: block
pointer-events: none
overflow: hidden
z-index: 1
}
} */
}
/* ========================================================= */
/* Render navbar */
/* ========================================================= */
div.ccm-block-top-navigation-bar.w3-theme-d4 {
nav.w3-theme-d4.navbar.navbar-expand-lg.navbar-dark {
/* html { } */
div.w3-theme-d4.container-fluid {
c5-navbar-brand {
href: "https://datafault.net/"
text: ""
logos {
img {
src: "https://datafault.net/application/files/3117/5788/1082/datafault-logo.png"
class: "logo"
}
}
}
button.navbar-toggler.collapsed {
type: "button"
data-bs-toggle: "collapse"
data-bs-target: "#top-navigation-bar-621"
aria-controls: "top-navigation-bar-621"
aria-expanded: "false"
aria-label: "Toggle Navigation"
span.icon-bar { }
span.icon-bar { }
span.icon-bar { }
}
div.w3-theme-d4.collapse.navbar-collapse.qhtml-navbar-menu {
id: "top-navigation-bar-621"
ul.navbar-nav.w3-theme-d4 {
c5-navbar-submenu {
label: "qhtml-js"
url: "https://datafault.net/"
target: "_self"
classes: "nav-path-selected"
children {
c5-navbar-dropdown-link {
label: "QHTML6 Github Repo"
url: "https://github.com/qhtml/qhtml6"
target: "_blank"
classes: ""
}
c5-navbar-dropdown-link {
label: "qhtml6 documentation"
url: "https://qhtml.github.io/qhtml6/doc/"
target: "_blank"
classes: ""
}
c5-navbar-dropdown-link {
label: "Q-HTML Editor"
url: "https://datafault.net/qhtml-js/qhtml-editor"
target: "_self"
classes: "active"
}
c5-navbar-dropdown-link {
label: "QHTML Drag and Drop Builder"
url: "https://qhtml.github.io/qhtml6/dist/page-builder.html"
target: "_blank"
classes: ""
}
}
}
c5-navbar-submenu {
label: "General Coding"
url: "https://datafault.net/general-coding"
target: "_self"
classes: ""
children {
c5-navbar-dropdown-link {
label: "🔗 Custom Systems Integrations"
url: "https://datafault.net/general-coding/custom-systems-integrations"
target: "_self"
classes: ""
}
c5-navbar-dropdown-link {
label: "âš¡ Performance Optimization"
url: "https://datafault.net/general-coding/performance-optimization"
target: "_self"
classes: ""
}
c5-navbar-dropdown-link {
label: "🔒 Security Enhancements"
url: "https://datafault.net/general-coding/security-enhancements"
target: "_self"
classes: ""
}
c5-navbar-dropdown-link {
label: "🧩 CMS & Web Platform Extensions"
url: "https://datafault.net/general-coding/cms-and-web-platform-extensions"
target: "_self"
classes: ""
}
c5-navbar-dropdown-link {
label: "🎨 UI/UX Customization"
url: "https://datafault.net/general-coding/uiux-customization"
target: "_self"
classes: ""
}
c5-navbar-dropdown-link {
label: "Artificial Intelligence"
url: "https://datafault.net/general-coding/ai-services"
target: "_self"
classes: ""
}
}
}
c5-navbar-link {
label: "Active Projects"
url: "https://datafault.net/active-projects"
target: "_self"
classes: ""
}
c5-navbar-link {
label: "RouteUI Demo"
url: "/tools/RouteUI/index.html"
target: "_blank"
classes: ""
}
c5-navbar-link {
label: "America Freedom Proposal"
url: "https://datafault.net/freedom"
target: "_self"
classes: ""
}
}
c5-navbar-search {
action: "https://datafault.net//search"
searchLabel: "Search"
}
}
}
}
}