README

• Nexus Theme - LYRASOFT
  • Installation
    • Install via Composer
    • Project
  • fusionfile.mjs
    • Add Assets to Middleware
  • Sidebar Mode
    • Default
    • Full Dark Sidebar
    • White Sidebar
    • Colorful Sidebar

Installation

Install via Composer

composer require lyrasoft/theme-nexus

Remove Old Skote Theme

php ./vendor/lyrasoft/theme-nexus/bin/remove-skote

Project

Use pkg:install

php windwalker pkg:install

 [xx] lyrasoft/theme-nexus ALL [xx] lyrasoft/theme-nexus: scss [xx] lyrasoft/theme-nexus: views

Direct install:

php windwalker pkg:install lyrasoft/theme-nexus --tag scss --tag views -f

The scss files will copy to resources/assets/scss/admin/, you can modify _nexus-variables.scss to configure colors.

And the view files will install to views/admin/global/.

fusionfile.ts

export function install() { return [ installVendors( [ ... ], ), // Add below lines callbackAfterBuild(async () => { await symlink('vendor/lyrasoft/theme-nexus/', 'theme/nexus/'); await symlink('theme/nexus/src/js/', 'www/assets/vendor/nexus/'); }) ]; }

export function css() { // ... return [ cssModulize('resources/assets/scss/front/main.scss', 'css/front/main.css') // ... cssModulize('resources/assets/scss/admin/main.scss', 'css/admin/main.css') // ... // Add below lines //Nexus fusion.css('resources/assets/scss/admin/nexus.scss', 'css/admin/nexus.css'), ]; }

vite.config.ts

export default defineConfig(({ command, mode }) => { return { // ... css: { preprocessorOptions: { scss: { loadPaths: [ resolve('./vendor/lyrasoft/theme-nexus/'), // <-- Add this line ], }, }, }, }; });

admin main.ts

// ... import { useNexusTheme } from '~theme/nexus/src/ts/nexus'; // ... useUnicorn(); // Must after useUnicorn() useNexusTheme(); // ...

Then run:

yarn build -- install yarn build # OR yarn dev

Add Assets to Middleware

namespace App\Module\Admin; class AdminMiddleware extends AbstractLifecycleMiddleware { // ... protected function preprocess(ServerRequestInterface $request): void { // ... // Remove bootstrap CSS, bootstrap styles was merged to nexus.css // $this->asset->css('css/admin/bootstrap.min.css'); // ... $this->asset->js('vendor/nexus/libs/ribble/dist/ribble.js'); $this->asset->css('@vite/scss/admin/nexus.scss'); // ...

Sidebar Mode

Default

The default mode is white brand and dark sidebar:

Full Dark Sidebar

Add data-bs-theme="dark" to sidebar.blade.php navbar div:

<aside class="l-sidebar navbar navbar-vertical navbar-expand" data-bs-theme="dark"> ...

White Sidebar

Modify sidebar.blade.php both navbar and sidemenu as light, and consider add border-end to navbar div.

<aside class="l-sidebar navbar navbar-vertical navbar-expand border-end" data-bs-theme="light"> ... <div class="collapse navbar-collapse l-sidebar-menu" id="sidebar-menu" data-bs-theme="light">

Colorful Sidebar

Modify _nexus-variables.scss sidebar section, for example, use primary as sidebar color:

// Sidebar $sidebar-width: 250px; $sidebar-bg: shade-color($primary, 20%); $sidebar-nav-item-active-bg: $primary; // Sidebar - Dark $sidebar-dark-bg: shade-color($primary, 20%); $sidebar-dark-nav-item-active-bg: shade-color($primary, 30%); $sidebar-dark-menu-item-color: tint-color($primary, 70%);

Manually Remove old Skote Theme

composer remove lyrasoft/theme-skote

And must remove the repositories at composer.json

 "repositories": [ { "type": "git", "url": "git@github.com:lyrasoft/theme-skote.git" } ]

Remove scripts from fusionfile.mjs

// Remove this export async function admin() { // ... } export async function install() { // ... // Remove this src('vendor/lyrasoft/theme-skote/').pipe(symlink('theme/admin')) .on('end', () => { src('theme/admin/dist/assets/libs/').pipe(symlink('www/assets/vendor/admin/')); src('theme/admin/dist/assets/fonts/').pipe(symlink('www/assets/css/fonts/')); }); }

Then remove these 4 files: