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.mjs

export async function install() {
  installVendors([
    '@fortawesome/fontawesome-pro',
      // ...
  ]);

  // Add below...
src('vendor/lyrasoft/theme-nexus/').pipe(symlink('theme/nexus'))
    .on('end', () => {
        src('theme/nexus/src/js/').pipe(symlink('www/assets/vendor/nexus/'));
    });
}

export async function admin() {
    fusion.watch([
        'vendor/lyrasoft/theme-nexus/src/**/*',
        'resources/assets/scss/admin/**/*.scss'
    ]);
    
    return wait(
        sass(
            'resources/assets/scss/admin/nexus.scss',
            'www/assets/css/admin/nexus.css',
            {
                sass: {
                    includePaths: [
                        'node_modules',
                        'vendor/lyrasoft/theme-nexus'
                    ]
                }
            }
        ),
    );
}

Then run:

yarn build install
yarn build admin

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->js('vendor/nexus/nexus.js');
        $this->asset->css('css/admin/nexus.min.css');

        // ...

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: