Offcanvas visibility

[iamgiannisx]

Hello to everyone
If the screen size is bellow 1400px offcanvas is enable and standard menu collapsed, so I want to change the screen size to ~1260px to enable offcanvas and collapsed menu.
Anybody has a clue how to do this

Thanks
Giannis.

[razonyang]

Hi, the simplest way is to change the breakpoint sizes, for example, put the following code snippets into assets/main/scss/_variables.scss.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1100px, // previously 1200px, since xxl is changed to 1200px, you may want to lower this as well.
  xxl: 1200px // previously 1400px, which is what the header offcanvas uses by default.
);

[iamgiannisx]

Thanks a lot
It's working

[razonyang]

No problem, I'm gonna mark it as the answer and close the discussion.

[razonyang]

@iamgiannisx FYI, I just added a parameter named topAppBar.expandBreakpoint (since v1.9.0), available options: xl, lg, xxl (default).

You can now change this without tweaking default breakpoint sizes.

[iamgiannisx]

Thanks for the info @razonyang
Could you please let me know what the difference to add a js script via the file custom.js VS to upload a new .js file and add it to params file.

As far I understand the main difference if I add a file is that the script is visible as I wrote it and if I add the script to custom.js then the script is compiled and is not visible as I wrote it.

Thanks.

[razonyang]

As far I understand the main difference if I add a file is that the script is visible as I wrote it and if I add the script to custom.js then the script is compiled

That's correct, but I don't understand what does visible mean.

custom.ts will be compiled into the main JS, and loaded by most of pages.

[iamgiannisx]

With visible I mean this I have this code at custom.js
`gsap.utils.toArray(".gsap-highlight").forEach((highlight) => {
ScrollTrigger.create({
trigger: highlight,
start: "-100px center",
onEnter: () => highlight.classList.add("active")
});
});

gsap.utils.toArray(".gsap-highlight").forEach((highlight) => {
ScrollTrigger.create({
trigger: highlight,
start: "0px top",
onEnter: () => highlight.classList.remove("active")
});
});
`

and this code compiled to this at the browser sources bundle.min.js file

ks.registerPlugin(ot); ks.utils.toArray(".gsap-highlight").forEach(c => { ot.create({ trigger: c, start: "-100px center", onEnter: () => c.classList.add("active") }) } ); ks.utils.toArray(".gsap-highlight").forEach(c => { ot.create({ trigger: c, start: "0px top", onEnter: () => c.classList.remove("active") }) } );
So I assume this javascript compiled with webpack, so my question is can I compile with webpack external assets files that I use?

[razonyang]

So I assume this javascript compiled with webpack

That's not true, the theme uses Hugo Pipes (js.Build powered by esbuild) to compile TypeScript/JavaScript.

can I compile with webpack external assets files that I use?

Hmm, I don't understand the use case. Can you explain it in more detail?

1. If you want to use external libraries, simply import them. Take NPM package as an example, npm i uuid and then import and use the package in custom.ts.

import { v4 as uuidv4 } from "uuid";
alert(uuidv4()); // pop up a box on page.

You can also import libraries located in assets folder, read more on the docs of js.Build.

2. If you want to compile a script with another file rather than the bundle.js, you can achieve this with theme's hooks and the js.Build.