Update Dashboard Layout
This commit is contained in:
Firman Herdiansyah
194
resources/laravel-code-generator/templates/default/layout.stub
Normal file
194
resources/laravel-code-generator/templates/default/layout.stub
Normal file
@@ -0,0 +1,194 @@
|
||||
<!doctype html>
|
||||
<html lang="{{ App::getLocale() }}" data-bs-theme="auto">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
<title>{{ config('app.name', '[% application_name %]') }}</title>
|
||||
<script>
|
||||
const darkThemeName = 'dark';
|
||||
const lightThemeName = 'light';
|
||||
const getTenantName = () => document.documentElement.getAttribute('data-tenant') || '';
|
||||
const getStoredTheme = () => localStorage.getItem(getTenantName() + '-admintheme');
|
||||
const setStoredTheme = theme => localStorage.setItem(getTenantName() + '-admintheme', theme);
|
||||
const getPreferredTheme = () => {
|
||||
const storedTheme = getStoredTheme()
|
||||
if (storedTheme) {
|
||||
return storedTheme;
|
||||
}
|
||||
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? darkThemeName : lightThemeName;
|
||||
}
|
||||
const setTheme = theme => {
|
||||
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
document.documentElement.setAttribute('data-bs-theme', darkThemeName);
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-bs-theme', theme);
|
||||
}
|
||||
}
|
||||
const getAdminPreferenceKey = () => getTenantName() + '-adminPreferences';
|
||||
const getAdminPreferences = () => JSON.parse(localStorage.getItem(getAdminPreferenceKey()));
|
||||
const setAdminPreferences = (adminPreferences) => {
|
||||
const key = getAdminPreferenceKey();
|
||||
|
||||
localStorage.setItem(key, JSON.stringify(adminPreferences));
|
||||
Cookies.set(key, JSON.stringify(adminPreferences), { expires: 360 });
|
||||
};
|
||||
|
||||
const themeObserver = new MutationObserver(function (mutations) {
|
||||
|
||||
for (let i = 0; i < mutations.length; i++) {
|
||||
for (let j = 0; j < mutations[i].addedNodes.length; j++) {
|
||||
|
||||
if (mutations[i].addedNodes[j].tagName == 'BODY') {
|
||||
setTheme(getPreferredTheme());
|
||||
|
||||
// we're done:
|
||||
themeObserver.disconnect();
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
themeObserver.observe(document.documentElement, {
|
||||
childList: true,
|
||||
subtree: true
|
||||
});
|
||||
|
||||
const showActiveTheme = (theme, focus = false) => {
|
||||
const themeSwitcher = document.querySelector('#bd-theme');
|
||||
|
||||
if (!themeSwitcher) {
|
||||
return;
|
||||
}
|
||||
|
||||
const themeSwitcherText = document.querySelector('#bd-theme-text');
|
||||
const activeThemeIcon = document.querySelector('.theme-icon-active');
|
||||
const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`);
|
||||
const svgOfActiveBtn = btnToActive.querySelector('.theme-icon');
|
||||
|
||||
btnToActive.classList.add('active');
|
||||
btnToActive.setAttribute('aria-pressed', 'true');
|
||||
|
||||
activeThemeIcon.innerHTML = svgOfActiveBtn.innerHTML;
|
||||
|
||||
const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
|
||||
themeSwitcher.setAttribute('aria-label', themeSwitcherLabel);
|
||||
|
||||
const btnsToInactive = document.querySelectorAll(`[data-bs-theme-value]:not([data-bs-theme-value="${theme}"])`);
|
||||
|
||||
for (let i = 0; i < btnsToInactive.length; i++) {
|
||||
btnsToInactive[i].classList.remove('active');
|
||||
btnsToInactive[i].setAttribute('aria-pressed', 'false');
|
||||
}
|
||||
|
||||
if (focus) {
|
||||
themeSwitcher.focus();
|
||||
}
|
||||
}
|
||||
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||||
const storedTheme = getStoredTheme()
|
||||
if (storedTheme !== lightThemeName && storedTheme !== darkThemeName) {
|
||||
setTheme(getPreferredTheme());
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
showActiveTheme(getPreferredTheme());
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]')
|
||||
.forEach(toggle => {
|
||||
toggle.addEventListener('click', () => {
|
||||
const theme = toggle.getAttribute('data-bs-theme-value');
|
||||
setStoredTheme(theme);
|
||||
setTheme(theme);
|
||||
showActiveTheme(theme, true);
|
||||
})
|
||||
})
|
||||
});
|
||||
</script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
|
||||
{{-- <link href="{{ asset('css/app.css') }}" rel="stylesheet"> --}}
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="navbar-main navbar navbar-expand-lg fixed-stiky bg-body-tertiary">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="{!! url('/') !!}">{{ config('app.name', '[% application_name %]') }}</a>
|
||||
|
||||
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar" aria-expanded="false" aria-controls="navbar" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbar">
|
||||
<div class="navbar-nav d-flex align-items-end justify-content-end w-100">
|
||||
<ul class="menu menu-main-menu navbar-nav">
|
||||
<li class="nav-item px-2">
|
||||
<a class="nav-link active" aria-current="page" href="{!! url('/') !!}">Home</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="navbar-nav user-top-navbar">
|
||||
<li class="nav-item">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-link nav-link dropdown-toggle" id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle theme (light)">
|
||||
<span class="theme-icon-active">
|
||||
<i class="fa-solid fa-sun"></i>
|
||||
</span>
|
||||
<span class="d-none" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end position-absolute" aria-labelledby="bd-theme-text">
|
||||
<li>
|
||||
<button type="button" class="dropdown-item" data-bs-theme-value="auto" aria-pressed="false">
|
||||
<span class="theme-icon">
|
||||
<i class="fa-solid fa-circle-half-stroke"></i>
|
||||
</span>
|
||||
<span class="ps-2">Auto</span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="dropdown-item active" data-bs-theme-value="light" aria-pressed="true">
|
||||
<span class="theme-icon">
|
||||
<i class="fa-solid fa-sun"></i>
|
||||
</span>
|
||||
<span class="ps-2">Light</span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="dropdown-item" data-bs-theme-value="dark" aria-pressed="false">
|
||||
<span class="theme-icon">
|
||||
<i class="fa-solid fa-moon"></i>
|
||||
</span>
|
||||
<span class="ps-2">Dark</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@if (!Auth::check())
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ url('/login') }}"> <i class="fa-solid fa-sign-in-alt fa-fw" aria-hidden="true"></i> Log in</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ url('/register') }}"> Register</a>
|
||||
</li>
|
||||
@endif
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container body-content py-3">
|
||||
@yield('content')
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
|
||||
{{-- <script src="{{ asset('js/app.js') }}"></script> --}}
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user