lyrasoft/theme-nexus

There is no license information available for the latest version (1.0.3) of this package.

1.0.3 2025-02-23 17:46 UTC

Requires (Dev)

• windwalker/core: ^4.0

Unknown License

• Simon Asika

README

Installation

Composer

composer require lyrasoft/theme-nexus

Remember to add SSH key to your computer.

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%);