<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta http-equiv="content-language" content="en-us" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="language" content="english">
    <meta name="copyright" content="Copyright © <?= date('Y') . ' ' . APP['name']; ?>">
    <meta name="color-scheme" content="light dark" />
    <meta name="supported-color-schemes" content="light dark" />
    <meta name="theme-color" content="<?= APP['theme']; ?>">
    <meta name="msapplication-navbutton-color" content="<?= APP['theme']; ?>" />
    <meta name="apple-mobile-web-app-status-bar-style" content="<?= APP['theme']; ?>" />
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="msapplication-starturl" content="/">
    <link rel="shortcut icon" type="image/x-icon" href="<?= APP['favicon']; ?>" />
    <?= $data['meta']; ?>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="/assets/restaurant/css/header.css" />
    <link rel="stylesheet" href="/assets/restaurant/css/side-bar.css" />
    <link rel="stylesheet" href="/assets/restaurant/css/main.css" />
    <link rel="stylesheet" href="/assets/restaurant/css/home.css" />
    <script src="/assets/restaurant/js/side-bar.js" defer></script>
    <script src="/assets/restaurant/js/header.js" defer></script>
    <script src="/assets/restaurant/js/home.js" defer></script>
</head>

<body>
    <div class="container">
        <div class="wrapper home">
            <!-- sidebar -->
            <div class="side-bar">
                <div class="side-bar-header flex-between">
                    <!-- sidebar header -->
                </div>
                <div class="sidebar-menustory">
                    <!-- sidebar menustory -->
                </div>
                <div class="sidebar-overflow">
                    <div class="side-bar-wrapper flex-column">
                        <!-- sidebar content -->
                        <div class="secondary-nav">
                            <!-- secondary navigation -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- header  -->
            <header class="header flex-between">
                <!-- insert header content here -->
            </header>
            <main class="main-content">

            </main>

            <!-- modal -->
            <div class="modal-backdrop"></div>
            <div class="modal" id="modal" data-modal="default">
                <div class="modal-header full-width flex-between">
                    <!-- modal header -->
                </div>
                <div class="modal-content">
                    <!-- render onboarding -->
                </div>
            </div>
        </div>
    </div>
</body>

</html>