Nexus Theme - LYRASOFT

• 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: