The Starter Kit is designed to help developers get up and running quickly with the Cork Admin Template. It provides a minimal and clean structure with all core components and layout configurations preloaded—so you can focus on building your application without starting from scratch.
Below is a breakdown of Cork Admin's core layout sections, including the header, sidebar, and main content areas. Each section is modular, well-commented, and easy to customize.
HTML
<html>
<head> → Meta, styles, and plugin links
<body>
├── Loader → Optional preloader animation
├── Header → Top navigation bar (user menu, notifications, etc.)
├── Sidebar → Collapsible vertical menu (with icons and nested items)
├── Main Container → Dynamic content area for pages, widgets, charts, etc.
├── Footer → Fixed or dynamic footer content
└── Scripts → JavaScript includes for page functionality
</body>
</html>
The header acts as the main navbar, housing several key interactive elements. It is responsive by default and adapts gracefully to mobile and desktop resolutions.
Features included:
HTML Structure:
HTML
<div class="header‐container container‐xxl">
<header class="header navbar navbar‐expand‐sm expand‐header">
...
</header>
</div>
This section wraps the primary layout components—overlay, sidebar, and the main content area.
Includes:
HTML Structure:
HTML
<div class="middle‐content container‐xxl p‐0">
...
</div>
This is where the core page content is rendered, including breadcrumb navigation and widgets or components specific to each page.
Key Elements:
.middle-content wrapper using container-xxl for consistent spacingHTML Structure:
HTML
<!‐‐ BEGIN CONTENT AREA ‐‐>
<div id="content" class="main‐content">
<div class="layout‐px‐spacing">
...
</div>
</div>
<!‐‐ END CONTENT AREA ‐‐>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf‐8">
<meta http‐equiv="X‐UA‐Compatible" content="IE=edge">
<meta name="viewport" content="width=device‐width, initial‐scale=1, maximum‐scale=1, shrink‐to‐fit=no">
<title>CORK Admin ‐ Multipurpose Bootstrap Dashboard Template </title>
<link rel="icon" type="image/x‐icon" href="../src/assets/img/favicon.ico"/>
<link href="../layouts/vertical‐light‐menu/css/light/loader.css" rel="stylesheet" type="text/css" />
<link href="../layouts/vertical‐light‐menu/css/dark/loader.css" rel="stylesheet" type="text/css" />
<script src="../layouts/vertical‐light‐menu/loader.js"></script>
<!‐‐ BEGIN GLOBAL MANDATORY STYLES ‐‐>
<!‐‐ Google Fonts ‐‐>
<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=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<!‐‐ /Google Fonts ‐‐>
<link href="../src/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../src/plugins/src/waves/waves.min.css">
<link rel="stylesheet" type="text/css" href="../src/plugins/src/prism/prism.css">
<link href="../src/assets/css/utilities/utilities.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../src/plugins/src/waves/waves.min.css">
<link rel="stylesheet" type="text/css" href="../src/plugins/src/prism/prism.css">
<link href="../layouts/vertical‐light‐menu/css/light/plugins.css" rel="stylesheet" type="text/css" />
<link href="../layouts/vertical‐light‐menu/css/dark/plugins.css" rel="stylesheet" type="text/css" />
<!‐‐ END GLOBAL MANDATORY STYLES ‐‐>
<!‐‐ BEGIN PAGE LEVEL PLUGINS/CUSTOM STYLES ‐‐>
<!‐‐ END PAGE LEVEL PLUGINS/CUSTOM STYLES ‐‐>
</head>
<body class=" layout‐boxed">
<!‐‐ BEGIN LOADER ‐‐>
<div id="load_screen"> <div class="loader"> <div class="loader‐content">
<div class="spinner‐grow align‐self‐center"></div>
</div></div></div>
<!‐‐ END LOADER ‐‐>
<!‐‐ BEGIN NAVBAR ‐‐>
<div class="header‐container">
<header class="header">
<a href="javascript:void(0);" class="btn‐toggle sidebarCollapse">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon‐tabler icon‐tabler‐menu‐2" width="24" height="24" viewBox="0 0 24 24" stroke‐width="2" stroke="currentColor" fill="none" stroke‐linecap="round" stroke‐linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<line x1="4" y1="6" x2="20" y2="6"></line>
<line x1="4" y1="12" x2="20" y2="12"></line>
<line x1="4" y1="18" x2="20" y2="18"></line>
</svg>
</a>
<ul class="header‐item theme‐brand text‐center">
<li class="theme‐logo">
<a href="https://designreset.com/cork‐admin/">
<img src="../src/assets/img/logo.svg" class="navbar‐logo" alt="logo">
</a>
</li>
<li class="theme‐text">
<a href="https://designreset.com/cork‐admin/" class="nav‐link"> CORK </a>
</li>
</ul>
<ul class="header‐item ms‐md‐0 ms‐auto search‐area">
<li class="nav‐item align‐self‐center search‐content search‐animated" data‐bs‐toggle="modal" data‐bs‐target="#searchDialog">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon‐tabler icon‐tabler‐search toggle‐search" width="24" height="24" viewBox="0 0 24 24" stroke‐width="2" stroke="currentColor" fill="none" stroke‐linecap="round" stroke‐linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<circle cx="10" cy="10" r="7"></circle>
<line x1="21" y1="21" x2="15" y2="15"></line>
</svg>
<form class="search‐full search‐inline‐form" role="search">
<div class="search‐bar">
<input type="text" class="form‐control search‐form‐control ms‐lg‐auto" placeholder="Search..." data‐bs‐toggle="modal" data‐bs‐target="#searchDialog">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="feather feather‐x search‐close"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</div>
</form>
<span class="badge badge‐secondary">Ctrl + K</span>
</li>
</ul>
<ul class="header‐item ms‐md‐auto action‐area">
<li class="h‐item dropdown language‐dropdown">
<a href="javascript:void(0);" class="h‐link dropdown‐toggle" id="language‐dropdown" data‐bs‐toggle="dropdown" aria‐haspopup="true" aria‐expanded="false">
<img src="../src/assets/img/1x1/us.svg" class="flag‐width" alt="flag"><span>English</span>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon‐tabler icon‐tabler‐chevron‐down" width="24" height="24" viewBox="0 0 24 24" stroke‐width="2" stroke="currentColor" fill="none" stroke‐linecap="round" stroke‐linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</a>
<div class="dropdown‐menu position‐absolute" aria‐labelledby="language‐dropdown">
<a class="dropdown‐item d‐flex" data‐img‐value="us" data‐value="English" href="javascript:void(0);"><img src="../src/assets/img/1x1/us.svg" class="flag‐width" alt="flag"> <span class="align‐self‐center"> English</span></a>
<a class="dropdown‐item d‐flex" data‐img‐value="fr" data‐value="French" href="javascript:void(0);"><img src="../src/assets/img/1x1/fr.svg" class="flag‐width" alt="flag"> <span class="align‐self‐center"> French</span></a>
<a class="dropdown‐item d‐flex" data‐img‐value="es" data‐value="Spanish" href="javascript:void(0);"><img src="../src/assets/img/1x1/es.svg" class="flag‐width" alt="flag"> <span class="align‐self‐center"> Spanish</span></a>
<a class="dropdown‐item d‐flex" data‐img‐value="cn" data‐value="Chinese" href="javascript:void(0);"><img src="../src/assets/img/1x1/cn.svg" class="flag‐width" alt="flag"> <span class="align‐self‐center"> Chinese</span></a>
<a class="dropdown‐item d‐flex" data‐img‐value="sa" data‐value="Arabic" href="javascript:void(0);"><img src="../src/assets/img/1x1/sa.svg" class="flag‐width" alt="flag"> <span class="align‐self‐center"> Arabic</span></a>
</div>
</li>
<li class="h‐item theme‐toggle‐item">
<a href="javascript:void(0);" class="h‐link theme‐toggle">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon‐tabler icon‐tabler‐moon dark‐mode" width="24" height="24" viewBox="0 0 24 24" stroke‐width="2" stroke="currentColor" fill="none" stroke‐linecap="round" stroke‐linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 ‐8.313 ‐12.454z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon‐tabler icon‐tabler‐sun‐high light‐mode" width="24" height="24" viewBox="0 0 24 24" stroke‐width="2" stroke="currentColor" fill="none" stroke‐linecap="round" stroke‐linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M14.828 14.828a4 4 0 1 0 ‐5.656 ‐5.656a4 4 0 0 0 5.656 5.656z"></path>
<path d="M6.343 17.657l‐1.414 1.414"></path>
<path d="M6.343 6.343l‐1.414 ‐1.414"></path>
<path d="M17.657 6.343l1.414 ‐1.414"></path>
<path d="M17.657 17.657l1.414 1.414"></path>
<path d="M4 12h‐2"></path>
<path d="M12 4v‐2"></path>
<path d="M20 12h2"></path>
<path d="M12 20v2"></path>
</svg>
</a>
</li>
<li class="h‐item dropdown message‐dropdown">
<a href="javascript:void(0);" class="h‐link dropdown‐toggle" id="messageDropdown" data‐bs‐toggle="dropdown" aria‐haspopup="true" aria‐expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon‐tabler icon‐tabler‐brand‐hipchat" width="24" height="24" viewBox="0 0 24 24" stroke‐width="2" stroke="currentColor" fill="none" stroke‐linecap="round" stroke‐linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M17.802 17.292s.077 ‐.055 .2 ‐.149c1.843 ‐1.425 2.998 ‐3.49 2.998 ‐5.789c0 ‐4.286 ‐4.03 ‐7.764 ‐8.998 ‐7.764c‐4.97 0 ‐9.002 3.478 ‐9.002 7.764c0 4.288 4.03 7.646 9 7.646c.424 0 1.12 ‐.028 2.088 ‐.084c1.262 .82 3.104 1.493 4.716 1.493c.499 0 .734 ‐.41 .414 ‐.828c‐.486 ‐.596 ‐1.156 ‐1.551 ‐1.416 ‐2.29z"></path>
</svg>
<span class="badge badge‐success"></span>
</a>
<div class="dropdown‐menu position‐absolute preventScroll" aria‐labelledby="messageDropdown">
<div class="dropdown‐title message">
<h6 class="d‐flex justify‐content‐between"><span class="align‐self‐center">Messages</span> <span class="badge badge‐light‐success">9 New</span></h6>
</div>
<div class="message‐scroll">
<a class="dropdown‐item">
<div class="media">
<div class="user‐img usr‐status‐online">
<img src="../src/assets/img/profile/profile‐11.png" class="img‐fluid mr‐2" alt="avatar">
</div>
<div class="media‐body">
<div class="">
<p class="usr‐name">Shaun Park</p>
<p class="msg‐date">10 mins ago</p>
</div>
</div>
</div>
</a>
<a class="dropdown‐item">
<div class="media">
<div class="user‐img">
<img src="../src/assets/img/profile/profile‐5.png" class="img‐fluid mr‐2" alt="avatar">
</div>
<div class="media‐body">
<div class="">
<p class="usr‐name">Andy King</p>
<p class="msg‐date">52 mins ago</p>
</div>
</div>
</div>
</a>
<a class="dropdown‐item">
<div class="media">
<div class="user‐img usr‐status‐offline">
<img src="../src/assets/img/profile/profile‐30.png" class="img‐fluid mr‐2" alt="avatar">
</div>
<div class="media‐body">
<div class="">
<p class="usr‐name">Daisy Anderson</p>
<p class="msg‐date">24 hrs ago</p>
</div>
</div>
</div>
</a>
<a class="dropdown‐item">
<div class="media">
<div class="user‐img usr‐status‐offline">
<img src="../src/assets/img/profile/profile‐14.png" class="img‐fluid mr‐2" alt="avatar">
</div>
<div class="media‐body">
<div class="">
<p class="usr‐name">Kara Young</p>
<p class="msg‐date">a week ago</p>
</div>
</div>
</div>
</a>
<a class="dropdown‐item">
<div class="media">
<div class="user‐img">
<img src="../src/assets/img/profile/profile‐13.png" class="img‐fluid mr‐2" alt="avatar">
</div>
<div class="media‐body">
<div class="">
<p class="usr‐name">Lisa</p>
<p class="msg‐date">4 weeks ago</p>
</div>
</div>
</div>
</a>
<a class="dropdown‐item">
<div class="media">
<div class="user‐img usr‐status‐offline">
<img src="../src/assets/img/profile/profile‐2.png" class="img‐fluid mr‐2" alt="avatar">
</div>
<div class="media‐body">
<div class="">
<p class="usr‐name">Amy Jackson</p>
<p class="msg‐date">a month ago</p>
</div>
</div>
</div>
</a>
<a class="dropdown‐item">
<div class="media">
<div class="user‐img usr‐status‐hold">
<img src="../src/assets/img/profile/profile‐3.png" class="img‐fluid mr‐2" alt="avatar">
</div>
<div class="media‐body">
<div class="">
<p class="usr‐name">Mary McDonald</p>
</div>
</div>
</div>
</a>
<a class="dropdown‐item">
<div class="media">
<div class="user‐img usr‐status‐online">
<img src="../src/assets/img/profile/profile‐27.png" class="img‐fluid mr‐2" alt="avatar">
</div>
<div class="media‐body">
<div class="">
<p class="usr‐name">Oscar Garner</p>
</div>
</div>
</div>
</a>
<a class="dropdown‐item">
<div class="media">
<div class="user‐img usr‐status‐hold">
<img src="../src/assets/img/profile/profile‐28.png" class="img‐fluid mr‐2" alt="avatar">
</div>
<div class="media‐body">
<div class="">
<p class="usr‐name">Alma Clarke</p>
</div>
</div>
</div>
</a>
<a class="dropdown‐item">
<div class="media">
<div class="user‐img">
<img src="../src/assets/img/profile/profile‐32.png" class="img‐fluid mr‐2" alt="avatar">
</div>
<div class="media‐body">
<div class="">
<p class="usr‐name">Xavier</p>
</div>
</div>
</div>
</a>
<a class="dropdown‐item">
<div class="media">
<div class="user‐img usr‐status‐hold">
<img src="../src/assets/img/profile/profile‐7.png" class="img‐fluid mr‐2" alt="avatar">
</div>
<div class="media‐body">
<div class="">
<p class="usr‐name">Lily</p>
</div>
</div>
</div>
</a>
</div>
</li>
<li class="h‐item dropdown notification‐dropdown">
<a href="javascript:void(0);" class="h‐link dropdown‐toggle" id="notificationDropdown" data‐bs‐toggle="dropdown" aria‐haspopup="true" aria‐expanded="false" data‐bs‐auto‐close="outside">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon‐tabler icon‐tabler‐bell" width="24" height="24" viewBox="0 0 24 24" stroke‐width="2" stroke="currentColor" fill="none" stroke‐linecap="round" stroke‐linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h‐16a4 4 0 0 0 2 ‐3v‐3a7 7 0 0 1 4 ‐6"></path>
<path d="M9 17v1a3 3 0 0 0 6 0v‐1"></path>
</svg>
<span class="badge badge‐warning"></span>
</a>
<div class="dropdown‐menu position‐absolute preventScroll" aria‐labelledby="notificationDropdown">
<div class="dropdown‐title message">
<div class="d‐flex justify‐content‐between">
<ul class="nav nav‐tabs notification‐tabs" id="myTab" role="tablist">
<li class="nav‐item" role="presentation">
<button class="nav‐link active" id="all‐tab" data‐bs‐toggle="tab" data‐bs‐target="#all‐tab‐pane" type="button" role="tab" aria‐controls="all‐tab‐pane" aria‐selected="true">All <span class="ms‐1 d‐inline‐block badge bg‐dark:200 text‐dark:700 dark:bg‐info:500 dark:text‐info:100" style="padding: 1px 6px;">3</span></button>
</li>
<li class="nav‐item" role="presentation">
<button class="nav‐link" id="alerts‐tab" data‐bs‐toggle="tab" data‐bs‐target="#alerts‐tab‐pane" type="button" role="tab" aria‐controls="alerts‐tab‐pane" aria‐selected="false" tabindex="‐1">Alerts</button>
</li>
<li class="nav‐item" role="presentation">
<button class="nav‐link" id="events‐tab" data‐bs‐toggle="tab" data‐bs‐target="#events‐tab‐pane" type="button" role="tab" aria‐controls="events‐tab‐pane" aria‐selected="false" tabindex="‐1">Updates</button>
</li>
</ul>
<div class="n‐icon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon‐tabler icon‐tabler‐settings" width="24" height="24" viewBox="0 0 24 24" stroke‐width="2" stroke="currentColor" fill="none" stroke‐linecap="round" stroke‐linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M10.325 4.317c.426 ‐1.756 2.924 ‐1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 ‐.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 ‐1.066 2.573c.94 1.543 ‐.826 3.31 ‐2.37 2.37a1.724 1.724 0 0 0 ‐2.572 1.065c‐.426 1.756 ‐2.924 1.756 ‐3.35 0a1.724 1.724 0 0 0 ‐2.573 ‐1.066c‐1.543 .94 ‐3.31 ‐.826 ‐2.37 ‐2.37a1.724 1.724 0 0 0 ‐1.065 ‐2.572c‐1.756 ‐.426 ‐1.756 ‐2.924 0 ‐3.35a1.724 1.724 0 0 0 1.066 ‐2.573c‐.94 ‐1.543 .826 ‐3.31 2.37 ‐2.37c1 .608 2.296 .07 2.572 ‐1.065z"></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>
</div>
</div>
</div>
<div class="notification‐scroll ps ps‐‐active‐y">
<div class="tab‐content" id="myTabContent">
<div class="tab‐pane fade show active" id="all‐tab‐pane" role="tabpanel" aria‐labelledby="all‐tab" tabindex="0">
<a href="app‐calendar.html" class="dropdown‐item wn‐primary">
<div class="media">
<div class="w‐icon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon‐tabler icon‐tabler‐calendar‐event" width="24" height="24" viewBox="0 0 24 24" stroke‐width="2" stroke="currentColor" fill="none" stroke‐linecap="round" stroke‐linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<rect x="4" y="5" width="16" height="16" rx="2"></rect>
<line x1="16" y1="3" x2="16" y2="7"></line>
<line x1="8" y1="3" x2="8" y2="7"></line>
<line x1="4" y1="11" x2="20" y2="11"></line>
<rect x="8" y="15" width="2" height="2"></rect>
</svg>
</div>
<div class="media‐body">
<div class="w‐content">
<p class="w‐text"><span class="highlight‐text">New Event</span> has been added on <span class="highlight‐date">15 Dec 2020</span> </p>
</div>
</div>
</div>
</a>
<a href="app‐calendar.html" class="dropdown‐item wn‐danger">
<div class="media">
<div class="w‐icon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon‐tabler icon‐tabler‐calendar‐event" width="24" height="24" viewBox="0 0 24 24" stroke‐width="2" stroke="currentColor" fill="none" stroke‐linecap="round" stroke‐linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<rect x="4" y="5" width="16" height="16" rx="2"></rect>
<line x1="16" y1="3" x2="16" y2="7"></line>
<line x1="8" y1="3" x2="8" y2="7"></line>
<line x1="4" y1="11" x2="20" y2="11"></line>
<rect x="8" y="15" width="2" height="2"></rect>
</svg>
</div>
<div class="media‐body">
<div class="w‐content">
<p class="w‐text">Collect <span class="highlight‐text">documents</span> from <span class="highlight‐name">Kelly</span> at the restaurant tommorrow.</p>
</div>
</div>
</div>
</a>
<a href="app‐calendar.html" class="dropdown‐item wn‐secondary">
<div class="media">
<div class="w‐icon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon‐tabler icon‐tabler‐users" width="24" height="24" viewBox="0 0 24 24" stroke‐width="2" stroke="currentColor" fill="none" stroke‐linecap="round" stroke‐linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M3 21v‐2a4 4 0 0 1 4 ‐4h4a4 4 0 0 1 4 4v2"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
<path d="M21 21v‐2a4 4 0 0 0 ‐3 ‐3.85"></path>
</svg>
</div>
<div class="media‐body">
<div class="w‐content">
<p class="w‐text"><span class="highlight‐text">Meeting Event</span> on 12 Nov has been updated to 8 PM</p>
</div>
</div>
</div>
</a>
<a href="app‐calendar.html" class="dropdown‐item wn‐success">
<div class="media">
<div class="w‐icon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon‐tabler icon‐tabler‐calendar‐event" width="24" height="24" viewBox="0 0 24 24" stroke‐width="2" stroke="currentColor" fill="none" stroke‐linecap="round" stroke‐linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<rect x="4" y="5" width="16" height="16" rx="2"></rect>
<line x1="16" y1="3" x2="16" y2="7"></line>
<line x1="8" y1="3" x2="8" y2="7"></line>
<line x1="4" y1="11" x2="20" y2="11"></line>
<rect x="8" y="15" width="2" height="2"></rect>
</svg>
</div>
<div class="media‐body">
<div class="w‐content">
<p class="w‐text"><span class="highlight‐text">New Event</span> Seminar organised by Design Reset will be held on 25 January</p>
</div>
</div>
</div>
</a>
<a href="app‐calendar.html" class="dropdown‐item wn‐warning">
<div class="media">
<div class="w‐icon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon‐tabler icon‐tabler‐alert‐triangle" width="24" height="24" viewBox="0 0 24 24" stroke‐width="2" stroke="currentColor" fill="none" stroke‐linecap="round" stroke‐linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 9v2m0 4v.01"></path>
<path d="M5 19h14a2 2 0 0 0 1.84 ‐2.75l‐7.1 ‐12.25a2 2 0 0 0 ‐3.5 0l‐7.1 12.25a2 2 0 0 0 1.75 2.75"></path>
</svg>
</div>
<div class="media‐body">
<div class="w‐content">
<p class="w‐text"><span class="highlight‐text">Today's</span> Conference is Cancelled</p>
</div>
</div>
</div>
</a>
<a href="app‐calendar.html" class="dropdown‐item wn‐dark">
<div class="media">
<div class="w‐icon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon‐tabler icon‐tabler‐calendar‐time" width="24" height="24" viewBox="0 0 24 24" stroke‐width="2" stroke="currentColor" fill="none" stroke‐linecap="round" stroke‐linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M11.795 21h‐6.795a2 2 0 0 1 ‐2 ‐2v‐12a2 2 0 0 1 2 ‐2h12a2 2 0 0 1 2 2v4"></path>
<circle cx="18" cy="18" r="4"></circle>
<path d="M15 3v4"></path>
<path d="M7 3v4"></path>
<path d="M3 11h16"></path>
<path d="M18 16.496v1.504l1 1"></path>
</svg>
</div>
<div class="media‐body">
<div class="w‐content">
<p class="w‐text">Meeting with <span class="highlight‐text">Project Lead</span> on 01 Jan has been updated to 15 Jan</p>
</div>
</div>
</div>
</a>
</div>
<div class="tab‐pane fade" id="alerts‐tab‐pane" role="tabpanel" aria‐labelledby="alerts‐tab" tabindex="0">
<a href="app‐calendar.html" class="dropdown‐item wn‐primary">
<div class="media">
<div class="w‐icon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon‐tabler icon‐tabler‐calendar‐event" width="24" height="24" viewBox="0 0 24 24" stroke‐width="2" stroke="currentColor" fill="none" stroke‐linecap="round" stroke‐linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<rect x="4" y="5" width="16" height="16" rx="2"></rect>
<line x1="16" y1="3" x2="16" y2="7"></line>
<line x1="8" y1="3" x2="8" y2="7"></line>
<line x1="4" y1="11" x2="20" y2="11"></line>
<rect x="8" y="15" width="2" height="2"></rect>
</svg>
</div>
<div class="media‐body">
<div class="w‐content">
<p class="w‐text"><span class="highlight‐text">New Event</span> has been added on <span class="highlight‐date">15 Dec 2020</span> </p>
</div>
</div>
</div>
</a>
<a href="app‐calendar.html" class="dropdown‐item wn‐danger">
<div class="media">
<div class="w‐icon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon‐tabler icon‐tabler‐calendar‐event" width="24" height="24" viewBox="0 0 24 24" stroke‐width="2" stroke="currentColor" fill="none" stroke‐linecap="round" stroke‐linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<rect x="4" y="5" width="16" height="16" rx="2"></rect>
<line x1="16" y1="3" x2="16" y2="7"></line>
<line x1="8" y1="3" x2="8" y2="7"></line>
<line x1="4" y1="11" x2="20" y2="11"></line>
<rect x="8" y="15" width="2" height="2"></rect>
</svg>
</div>
<div class="media‐body">
<div class="w‐content">
<p class="w‐text">Collect <span class="highlight‐text">documents</span> from <span class="highlight‐name">Kelly</span> at the restaurant tommorrow.</p>
</div>
</div>
</div>
</a>
<a href="app‐calendar.html" class="dropdown‐item wn‐secondary">
<div class="media">
<div class="w‐icon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon‐tabler icon‐tabler‐users" width="24" height="24" viewBox="0 0 24 24" stroke‐width="2" stroke="currentColor" fill="none" stroke‐linecap="round" stroke‐linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M3 21v‐2a4 4 0 0 1 4 ‐4h4a4 4 0 0 1 4 4v2"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
<path d="M21 21v‐2a4 4 0 0 0 ‐3 ‐3.85"></path>
</svg>
</div>
<div class="media‐body">
<div class="w‐content">
<p class="w‐text"><span class="highlight‐text">Meeting Event</span> on 12 Nov has been updated to 8 PM</p>
</div>
</div>
</div>
</a>
</div>
<div class="tab‐pane fade" id="events‐tab‐pane" role="tabpanel" aria‐labelledby="events‐tab" tabindex="0">
<div class="tab‐image no‐notification">
<img class="notification‐light" src="../src/assets/img/notification‐empty.svg" alt="notification‐empty">
<img class="notification‐dark" src="../src/assets/img/notification‐empty‐dark.svg" alt="notification‐empty">
<div class="notification">
<p>You have no updates</p>
</div>
</div>
</div>
</div>
</div>
<div class="notification‐action‐bottom">
<button class="btn btn‐primary btn‐xs w‐100">See All Notification</button>
</div>
</div>
</li>
<li class="h‐item dropdown user‐profile‐dropdown">
<a href="javascript:void(0);" class="h‐link dropdown‐toggle user" id="userProfileDropdown">
<div class="avatar‐container">
<div class="avatar avatar‐sm avatar‐indicators avatar‐online">
<img alt="avatar" src="../src/assets/img/profile/profile‐35.png" class="rounded‐circle">
</div>
</div>
</a>
</li>
</ul>
</header>
</div>
<!‐‐ END NAVBAR ‐‐>
<!‐‐ BEGIN MAIN CONTAINER ‐‐>
<div class="main‐container " id="container">
<div class="overlay"></div>
<div class="search‐overlay"></div>
<div class="tc‐overlay"></div>
<div class="psidebar‐overlay"></div>
<!‐‐ BEGIN SIDEBAR ‐‐>
<div class="sidebar‐wrapper sidebar‐theme">
<nav id="sidebar">
<div class="navbar‐nav theme‐brand flex‐row text‐center">
<div class="nav‐logo">
<div class="nav‐item theme‐logo">
<a href="./index.html">
<img src="../src/assets/img/logo.svg" class="navbar‐logo" alt="logo">
</a>
</div>
<div class="nav‐item theme‐text">
<a href="./index.html" class="nav‐link"> CORK </a>
</div>
</div>
<div class="nav‐item sidebar‐toggle">
<div class="btn‐toggle sidebarCollapse">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="feather feather‐chevrons‐left"><polyline points="11 17 6 12 11 7"></polyline><polyline points="18 17 13 12 18 7"></polyline></svg>
</div>
</div>
</div>
<div class="shadow‐bottom"></div>
<ul class="list‐unstyled menu‐categories" id="accordionExample">
<li class="menu active">
<a href="#menuOne" data‐bs‐toggle="collapse" aria‐expanded="true" class="dropdown‐toggle">
<div class="">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon‐tabler icon‐tabler‐home" width="24" height="24" viewBox="0 0 24 24" stroke‐width="2" stroke="currentColor" fill="none" stroke‐linecap="round" stroke‐linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<polyline points="5 12 3 12 12 3 21 12 19 12"></polyline>
<path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 ‐2v‐7"></path>
<path d="M9 21v‐6a2 2 0 0 1 2 ‐2h2a2 2 0 0 1 2 2v6"></path>
</svg>
<span>Menu One</span>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="feather feather‐chevron‐right"><polyline points="9 18 15 12 9 6"></polyline></svg>
</div>
</a>
<ul class="collapse submenu list‐unstyled show" id="menuOne" data‐bs‐parent="#accordionExample">
<li class="active">
<a href="#"> Sub Menu 1 </a>
</li>
<li>
<a href="#"> Sub Menu 2 </a>
</li>
</ul>
</li>
<li class="menu menu‐heading">
<div class="heading"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="feather feather‐minus"><line x1="5" y1="12" x2="19" y2="12"></line></svg><span>APPLICATIONS</span></div>
</li>
<li class="menu">
<a href="#" aria‐expanded="false" class="dropdown‐toggle">
<div class="">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon‐tabler icon‐tabler‐message‐dots" width="24" height="24" viewBox="0 0 24 24" stroke‐width="2" stroke="currentColor" fill="none" stroke‐linecap="round" stroke‐linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M4 21v‐13a3 3 0 0 1 3 ‐3h10a3 3 0 0 1 3 3v6a3 3 0 0 1 ‐3 3h‐9l‐4 4"></path>
<line x1="12" y1="11" x2="12" y2="11.01"></line>
<line x1="8" y1="11" x2="8" y2="11.01"></line>
<line x1="16" y1="11" x2="16" y2="11.01"></line>
</svg>
<span>Menu Two</span>
</div>
</a>
</li>
</ul>
</nav>
</div>
<!‐‐ END SIDEBAR ‐‐>
<!‐‐ BEGIN CONTENT AREA ‐‐>
<div id="content" class="main‐content">
<div class="layout‐px‐spacing">
<div class="middle‐content container‐xxl p‐0">
<!‐‐ BEGIN BREADCRUMBS ‐‐>
<div class="secondary‐nav">
<div class="breadcrumbs‐container" data‐page‐heading="Sales">
<header class="header navbar navbar‐expand‐sm">
<a href="javascript:void(0);" class="btn‐toggle sidebarCollapse" data‐placement="bottom">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="feather feather‐menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
</a>
<div class="d‐flex breadcrumb‐content">
<div class="page‐header">
<div class="page‐title">
</div>
<nav class="breadcrumb‐style‐one" aria‐label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb‐item"><a href="#">Item</a></li>
<li class="breadcrumb‐item active" aria‐current="page">Item Active</li>
</ol>
</nav>
</div>
</div>
<ul class="navbar‐nav flex‐row ms‐auto breadcrumb‐action‐dropdown">
<li class="nav‐item more‐dropdown">
<div class="dropdown custom‐dropdown‐icon">
<a class="dropdown‐toggle btn" href="#" role="button" id="customDropdown" data‐bs‐toggle="dropdown" aria‐haspopup="true" aria‐expanded="false">
<span>Print</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="feather feather‐chevron‐down custom‐dropdown‐arrow"><polyline points="6 9 12 15 18 9"></polyline></svg>
</a>
<div class="dropdown‐menu dropdown‐menu‐right" aria‐labelledby="customDropdown">
<a class="dropdown‐item" data‐value="Print" data‐icon="<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="feather feather‐printer"><polyline points="6 9 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1‐2‐2v‐5a2 2 0 0 1 2‐2h16a2 2 0 0 1 2 2v5a2 2 0 0 1‐2 2h‐2"></path><rect x="6" y="14" width="12" height="8"></rect></svg>" href="javascript:void(0);">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="icon icon‐tabler icons‐tabler‐outline icon‐tabler‐printer"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M17 17h2a2 2 0 0 0 2 ‐2v‐4a2 2 0 0 0 ‐2 ‐2h‐14a2 2 0 0 0 ‐2 2v4a2 2 0 0 0 2 2h2" /><path d="M17 9v‐4a2 2 0 0 0 ‐2 ‐2h‐6a2 2 0 0 0 ‐2 2v4" /><path d="M7 13m0 2a2 2 0 0 1 2 ‐2h6a2 2 0 0 1 2 2v4a2 2 0 0 1 ‐2 2h‐6a2 2 0 0 1 ‐2 ‐2z" /></svg> Print
</a>
<a class="dropdown‐item" data‐value="Download" data‐icon="<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="feather feather‐download"><path d="M21 15v4a2 2 0 0 1‐2 2H5a2 2 0 0 1‐2‐2v‐4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>" href="javascript:void(0);">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="icon icon‐tabler icons‐tabler‐outline icon‐tabler‐download"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 ‐2v‐2" /><path d="M7 11l5 5l5 ‐5" /><path d="M12 4l0 12" /></svg> Download
</a>
<a class="dropdown‐item" data‐value="Share" data‐icon="<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="feather feather‐share‐2"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line></svg>" href="javascript:void(0);">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="icon icon‐tabler icons‐tabler‐outline icon‐tabler‐share"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 12m‐3 0a3 3 0 1 0 6 0a3 3 0 1 0 ‐6 0" /><path d="M18 6m‐3 0a3 3 0 1 0 6 0a3 3 0 1 0 ‐6 0" /><path d="M18 18m‐3 0a3 3 0 1 0 6 0a3 3 0 1 0 ‐6 0" /><path d="M8.7 10.7l6.6 ‐3.4" /><path d="M8.7 13.3l6.6 3.4" /></svg> Share
</a>
</div>
</div>
</li>
</ul>
</header>
</div>
</div>
<!‐‐ END BREADCRUMBS ‐‐>
<div class="row layout‐top‐spacing">
</div>
</div>
</div>
<!‐‐ BEGIN FOOTER ‐‐>
<div class="footer‐wrapper">
<div class="footer‐section f‐section‐1">
<p class="">Copyright © <span class="dynamic‐year">2024</span> <a target="_blank" href="https://designreset.com/cork‐admin/">DesignReset</a>, All rights reserved.</p>
</div>
<div class="footer‐section f‐section‐2">
<p class="">Coded with <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="feather feather‐heart"><path d="M20.84 4.61a5.5 5.5 0 0 0‐7.78 0L12 5.67l‐1.06‐1.06a5.5 5.5 0 0 0‐7.78 7.78l1.06 1.06L12 21.23l7.78‐7.78 1.06‐1.06a5.5 5.5 0 0 0 0‐7.78z"></path></svg></p>
</div>
</div>
<!‐‐ END FOOTER ‐‐>
</div>
<!‐‐ END CONTENT AREA ‐‐>
</div>
<!‐‐ END MAIN CONTAINER ‐‐>
<!‐‐ BEGIN PROFILE SIDEBAR ‐‐>
<div class="profile‐sidebar">
<div class="profile‐scroll">
<div class="profile‐close mb‐3">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="icon icon‐tabler icons‐tabler‐outline icon‐tabler‐x"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l‐12 12" /><path d="M6 6l12 12" /></svg>
</span>
</div>
<div class="profile‐top">
<div class="profile‐image profile‐container mb‐4 mx‐auto">
<div class="profile‐border"></div>
<img src="../src/assets/img/profile/profile‐15.png" alt="Profile Image" class="p‐image">
</div>
<h4 class="profile‐name mb‐1">Shaun Park</h4>
<p class="profile‐mail mb‐0 text‐dark:800 dark:text‐dark:200">shaun@mail.com</p>
<div class="profile‐choose‐avatar mt‐4">
<div class="d‐flex align‐items‐center justify‐content‐center">
<div class="avatar me‐1 bs‐tooltip" data‐bs‐toggle="tooltip" data‐bs‐placement="top" data‐bs‐title="Tooltip on top">
<img alt="avatar" src="../src/assets/img/profile/profile‐34.png" class="rounded‐circle">
</div>
<div class="avatar me‐1">
<img alt="avatar" src="../src/assets/img/profile/profile‐9.png" class="rounded‐circle">
</div>
<div class="avatar me‐1">
<img alt="avatar" src="../src/assets/img/profile/profile‐22.png" class="rounded‐circle">
</div>
<div class="avatar avatar‐sm">
<span class="avatar‐icon rounded‐circle bg‐dark:100 dark:bg‐dark:300 text‐dark:800"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="icon icon‐tabler icons‐tabler‐outline icon‐tabler‐plus"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M5 12l14 0" /></svg></span>
</div>
</div>
</div>
</div>
<div class="profile‐content pt‐4 pb‐4 mt‐4 mb‐4">
<ul class="list‐unstyled mb‐0">
<li class="hover:bg‐dark:50 dark:hover:bg‐dark:600">
<a href="../home.html" class="text‐dark:800 dark:text‐dark:200 fw:500 d‐flex align‐items‐center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="me‐2 icon icon‐tabler icons‐tabler‐outline icon‐tabler‐smart‐home"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19 8.71l‐5.333 ‐4.148a2.666 2.666 0 0 0 ‐3.274 0l‐5.334 4.148a2.665 2.665 0 0 0 ‐1.029 2.105v7.2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 ‐2v‐7.2c0 ‐.823 ‐.38 ‐1.6 ‐1.03 ‐2.105" /><path d="M16 15c‐2.21 1.333 ‐5.792 1.333 ‐8 0" /></svg>
Home
</a>
</li>
<li class="hover:bg‐dark:50 dark:hover:bg‐dark:600">
<a href="javascript:void(0);" class="text‐dark:800 dark:text‐dark:200 fw:500 d‐flex align‐items‐center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="me‐2 icon icon‐tabler icons‐tabler‐outline icon‐tabler‐user"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 ‐8 0" /><path d="M6 21v‐2a4 4 0 0 1 4 ‐4h4a4 4 0 0 1 4 4v2" /></svg>
Profile
</a>
</li>
<li class="hover:bg‐dark:50 dark:hover:bg‐dark:600">
<a href="javascript:void(0);" class="text‐dark:800 dark:text‐dark:200 fw:500 d‐flex align‐items‐center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="me‐2 icon icon‐tabler icons‐tabler‐outline icon‐tabler‐cube‐plus"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M21 12.5v‐4.509a1.98 1.98 0 0 0 ‐1 ‐1.717l‐7 ‐4.008a2.016 2.016 0 0 0 ‐2 0l‐7 4.007c‐.619 .355 ‐1 1.01 ‐1 1.718v8.018c0 .709 .381 1.363 1 1.717l7 4.008a2.016 2.016 0 0 0 2 0" /><path d="M12 22v‐10" /><path d="M12 12l8.73 ‐5.04" /><path d="M3.27 6.96l8.73 5.04" /><path d="M16 19h6" /><path d="M19 16v6" /></svg>
Projects <span class="ms‐2 badge badge‐light‐secondary">3</span>
</a>
</li>
<li class="hover:bg‐dark:50 dark:hover:bg‐dark:600">
<a href="javascript:void(0);" class="text‐dark:800 dark:text‐dark:200 fw:500 d‐flex align‐items‐center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="me‐2 icon icon‐tabler icons‐tabler‐outline icon‐tabler‐invoice"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M19 12v7a1.78 1.78 0 0 1 ‐3.1 1.4a1.65 1.65 0 0 0 ‐2.6 0a1.65 1.65 0 0 1 ‐2.6 0a1.65 1.65 0 0 0 ‐2.6 0a1.78 1.78 0 0 1 ‐3.1 ‐1.4v‐14a2 2 0 0 1 2 ‐2h7l5 5v4.25" /></svg>
Subscription
</a>
</li>
<li class="hover:bg‐dark:50 dark:hover:bg‐dark:600">
<a href="javascript:void(0);" class="text‐dark:800 dark:text‐dark:200 fw:500 d‐flex align‐items‐center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="me‐2 icon icon‐tabler icons‐tabler‐outline icon‐tabler‐shield‐lock"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 ‐8.5 15a12 12 0 0 1 ‐8.5 ‐15a12 12 0 0 0 8.5 ‐3" /><path d="M12 11m‐1 0a1 1 0 1 0 2 0a1 1 0 1 0 ‐2 0" /><path d="M12 12l0 2.5" /></svg>
Security
</a>
</li>
<li class="hover:bg‐dark:50 dark:hover:bg‐dark:600">
<a href="javascript:void(0);" class="text‐dark:800 dark:text‐dark:200 fw:500 d‐flex align‐items‐center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="me‐2 icon icon‐tabler icons‐tabler‐outline icon‐tabler‐settings"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.325 4.317c.426 ‐1.756 2.924 ‐1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 ‐.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 ‐1.066 2.573c.94 1.543 ‐.826 3.31 ‐2.37 2.37a1.724 1.724 0 0 0 ‐2.572 1.065c‐.426 1.756 ‐2.924 1.756 ‐3.35 0a1.724 1.724 0 0 0 ‐2.573 ‐1.066c‐1.543 .94 ‐3.31 ‐.826 ‐2.37 ‐2.37a1.724 1.724 0 0 0 ‐1.065 ‐2.572c‐1.756 ‐.426 ‐1.756 ‐2.924 0 ‐3.35a1.724 1.724 0 0 0 1.066 ‐2.573c‐.94 ‐1.543 .826 ‐3.31 2.37 ‐2.37c1 .608 2.296 .07 2.572 ‐1.065z" /><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 ‐6 0" /></svg>
Account Settings
</a>
</li>
</ul>
</div>
<div class="profile‐bottom">
<div class="profile‐banner" style="background‐image: url(../src/assets/img/apps/users/abstract‐8.jpg);">
<div class="pb‐overlay"></div>
<div class="pbanner‐content">
<h2>Need help?</h2>
<!‐‐ <p class="mb‐3">Check out our <a class="text‐dark:100" target="_blank" href="../../documentation/index.html">documentation</a></p> ‐‐>
<p class="mb‐3">Check out our documentation</p>
<a target="_blank" href="../../documentation/index.html" class="btn bg‐warning:400 text‐dark:900 btn‐xs">Get Help</a>
</div>
</div>
</div>
</div>
<div class="profile‐fixed">
<button class="btn bg‐dark text‐white dark:bg‐danger dark:text‐white w‐100">Logout</button>
</div>
</div>
<!‐‐ END PROFILE SIDEBAR ‐‐>
<!‐‐ BEGIN SEARCH MODAL ‐‐>
<!‐‐ Modal ‐‐>
<div class="modal fade search‐content‐modal" id="searchDialog" tabindex="‐1" aria‐labelledby="searchDialogLabel" aria‐hidden="true">
<div class="modal‐dialog">
<div class="modal‐content">
<div class="modal‐body">
<div class="search‐modal d‐flex border‐bottom‐width:1 border‐bottom‐dark:200 border‐bottom‐style:dashed dark:border‐bottom‐width:1 dark:border‐bottom‐dark:500 dark:border‐bottom‐style:dashed">
<div class="search‐modal‐icon me‐2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="icon icon‐tabler icons‐tabler‐outline icon‐tabler‐search"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 10m‐7 0a7 7 0 1 0 14 0a7 7 0 1 0 ‐14 0" /><path d="M21 21l‐6 ‐6" /></svg>
</div>
<input type="text" id="searchInput" class="form‐control border‐none" placeholder="Search...">
<span >[esc]</span>
</div>
<div class="modal‐search‐container mx‐auto">
<div class="search‐content">
<div class="row search‐row‐one">
<div class="col‐md‐6 mb‐4">
<div class="search‐list‐content">
<h6 class="text‐dark:300 mb‐3">Popular Searches</h6>
<ul class="search‐list list‐unstyled">
<li class="d‐flex search‐list‐item mb‐3 ">
<a href="./index.html" class=" d‐inline‐block text‐dark:600 hover:text‐primary:600 dark:text‐dark:200 dark:hover:text‐primary:300">
<span class="me‐2 search‐list‐icon d‐inline‐block">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon‐tabler icon‐tabler‐home" width="24" height="24" viewBox="0 0 24 24" stroke‐width="2" stroke="currentColor" fill="none" stroke‐linecap="round" stroke‐linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<polyline points="5 12 3 12 12 3 21 12 19 12"></polyline>
<path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 ‐2v‐7"></path>
<path d="M9 21v‐6a2 2 0 0 1 2 ‐2h2a2 2 0 0 1 2 2v6"></path>
</svg>
</span>
<span class="fw:500 d‐inline‐block">Analytics</span>
</a>
</li>
<li class="d‐flex search‐list‐item mb‐3 ">
<a href="./index2.html" class="d‐inline‐block text‐dark:600 hover:text‐primary:600 dark:text‐dark:200 dark:hover:text‐primary:300">
<span class="me‐2 search‐list‐icon d‐inline‐block">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="icon icon‐tabler icons‐tabler‐outline icon‐tabler‐chart‐bar‐popular"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 13a1 1 0 0 1 1 ‐1h4a1 1 0 0 1 1 1v6a1 1 0 0 1 ‐1 1h‐4a1 1 0 0 1 ‐1 ‐1z" /><path d="M9 9a1 1 0 0 1 1 ‐1h4a1 1 0 0 1 1 1v10a1 1 0 0 1 ‐1 1h‐4a1 1 0 0 1 ‐1 ‐1z" /><path d="M15 5a1 1 0 0 1 1 ‐1h4a1 1 0 0 1 1 1v14a1 1 0 0 1 ‐1 1h‐4a1 1 0 0 1 ‐1 ‐1z" /><path d="M4 20h14" /></svg>
</span>
<span class="fw:500 d‐inline‐block">Sales</span>
</a>
</li>
<li class="d‐flex search‐list‐item mb‐3 ">
<a href="./app‐mailbox.html" class="d‐inline‐block text‐dark:600 hover:text‐primary:600 dark:text‐dark:200 dark:hover:text‐primary:300">
<span class="me‐2 search‐list‐icon d‐inline‐block">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon‐tabler icon‐tabler‐brand‐gmail" width="24" height="24" viewBox="0 0 24 24" stroke‐width="2" stroke="currentColor" fill="none" stroke‐linecap="round" stroke‐linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M16 20h3a1 1 0 0 0 1 ‐1v‐14a1 1 0 0 0 ‐1 ‐1h‐3v16z"></path>
<path d="M5 20h3v‐16h‐3a1 1 0 0 0 ‐1 1v14a1 1 0 0 0 1 1z"></path>
<path d="M16 4l‐4 4l‐4 ‐4"></path>
<path d="M4 6.5l8 7.5l8 ‐7.5"></path>
</svg>
</span>
<span class="fw:500 d‐inline‐block">Mailbox</span>
</a>
</li>
<li class="d‐flex search‐list‐item mb‐3 ">
<a href="./user‐list.html" class="d‐inline‐block text‐dark:600 hover:text‐primary:600 dark:text‐dark:200 dark:hover:text‐primary:300">
<span class="me‐2 search‐list‐icon d‐inline‐block">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="icon icon‐tabler icons‐tabler‐outline icon‐tabler‐list‐details"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M13 5h8" /><path d="M13 9h5" /><path d="M13 15h8" /><path d="M13 19h5" /><path d="M3 4m0 1a1 1 0 0 1 1 ‐1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 ‐1 1h‐4a1 1 0 0 1 ‐1 ‐1z" /><path d="M3 14m0 1a1 1 0 0 1 1 ‐1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 ‐1 1h‐4a1 1 0 0 1 ‐1 ‐1z" /></svg>
</span>
<span class="fw:500 d‐inline‐block">User List</span>
</a>
</li>
</ul>
</div>
</div>
<div class="col‐md‐6 mb‐4">
<div class="search‐list‐content">
<h6 class="text‐dark:300 mb‐3">Applications</h6>
<ul class="search‐list list‐unstyled">
<li class="d‐flex search‐list‐item mb‐3 ">
<a href="./app‐chat.html" class="d‐inline‐block text‐dark:600 hover:text‐primary:600 dark:text‐dark:200 dark:hover:text‐primary:300">
<span class="me‐2 search‐list‐icon d‐inline‐block">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon‐tabler icon‐tabler‐message‐dots" width="24" height="24" viewBox="0 0 24 24" stroke‐width="2" stroke="currentColor" fill="none" stroke‐linecap="round" stroke‐linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M4 21v‐13a3 3 0 0 1 3 ‐3h10a3 3 0 0 1 3 3v6a3 3 0 0 1 ‐3 3h‐9l‐4 4"></path>
<line x1="12" y1="11" x2="12" y2="11.01"></line>
<line x1="8" y1="11" x2="8" y2="11.01"></line>
<line x1="16" y1="11" x2="16" y2="11.01"></line>
</svg>
</span>
<span class="fw:500 d‐inline‐block">Chat</span>
</a>
</li>
<li class="d‐flex search‐list‐item mb‐3 ">
<a href="./app‐kanban.html" class="d‐inline‐block text‐dark:600 hover:text‐primary:600 dark:text‐dark:200 dark:hover:text‐primary:300">
<span class="me‐2 search‐list‐icon d‐inline‐block">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon‐tabler icon‐tabler‐layout‐kanban" width="24" height="24" viewBox="0 0 24 24" stroke‐width="2" stroke="currentColor" fill="none" stroke‐linecap="round" stroke‐linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<line x1="4" y1="4" x2="10" y2="4"></line>
<line x1="14" y1="4" x2="20" y2="4"></line>
<rect x="4" y="8" width="6" height="12" rx="2"></rect>
<rect x="14" y="8" width="6" height="6" rx="2"></rect>
</svg>
</span>
<span class="fw:500 d‐inline‐block">Kanban</span>
</a>
</li>
<li class="d‐flex search‐list‐item mb‐3 ">
<a href="./app‐notes.html" class="d‐inline‐block text‐dark:600 hover:text‐primary:600 dark:text‐dark:200 dark:hover:text‐primary:300">
<span class="me‐2 search‐list‐icon d‐inline‐block">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon‐tabler icon‐tabler‐notes" width="24" height="24" viewBox="0 0 24 24" stroke‐width="2" stroke="currentColor" fill="none" stroke‐linecap="round" stroke‐linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<rect x="5" y="3" width="14" height="18" rx="2"></rect>
<line x1="9" y1="7" x2="15" y2="7"></line>
<line x1="9" y1="11" x2="15" y2="11"></line>
<line x1="9" y1="15" x2="13" y2="15"></line>
</svg>
</span>
<span class="fw:500 d‐inline‐block">Notes</span>
</a>
</li>
<li class="d‐flex search‐list‐item mb‐3 ">
<a href="./app‐calendar.html" class="d‐inline‐block text‐dark:600 hover:text‐primary:600 dark:text‐dark:200 dark:hover:text‐primary:300">
<span class="me‐2 search‐list‐icon d‐inline‐block">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon‐tabler icon‐tabler‐calendar" width="24" height="24" viewBox="0 0 24 24" stroke‐width="2" stroke="currentColor" fill="none" stroke‐linecap="round" stroke‐linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<rect x="4" y="5" width="16" height="16" rx="2"></rect>
<line x1="16" y1="3" x2="16" y2="7"></line>
<line x1="8" y1="3" x2="8" y2="7"></line>
<line x1="4" y1="11" x2="20" y2="11"></line>
<line x1="11" y1="15" x2="12" y2="15"></line>
<line x1="12" y1="15" x2="12" y2="18"></line>
</svg>
</span>
<span class="fw:500 d‐inline‐block">Calendar</span>
</a>
</li>
</ul>
</div>
</div>
<div class="col‐md‐6 mb‐4">
<div class="search‐list‐content">
<h6 class="text‐dark:300 mb‐3">User Interface</h6>
<ul class="search‐list list‐unstyled">
<li class="d‐flex search‐list‐item mb‐3 ">
<a href="./element‐typography.html" class="d‐inline‐block text‐dark:600 hover:text‐primary:600 dark:text‐dark:200 dark:hover:text‐primary:300">
<span class="me‐2 search‐list‐icon d‐inline‐block">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="icon icon‐tabler icons‐tabler‐outline icon‐tabler‐typography"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 20l3 0" /><path d="M14 20l7 0" /><path d="M6.9 15l6.9 0" /><path d="M10.2 6.3l5.8 13.7" /><path d="M5 20l6 ‐16l2 0l7 16" /></svg>
</span>
<span class="fw:500 d‐inline‐block">Typhography</span>
</a>
</li>
<li class="d‐flex search‐list‐item mb‐3 ">
<a href="./table‐basic.html" class="d‐inline‐block text‐dark:600 hover:text‐primary:600 dark:text‐dark:200 dark:hover:text‐primary:300">
<span class="me‐2 search‐list‐icon d‐inline‐block">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="icon icon‐tabler icons‐tabler‐outline icon‐tabler‐table"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 5a2 2 0 0 1 2 ‐2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 ‐2 2h‐14a2 2 0 0 1 ‐2 ‐2v‐14z" /><path d="M3 10h18" /><path d="M10 3v18" /></svg>
</span>
<span class="fw:500 d‐inline‐block">Tables</span>
</a>
</li>
<li class="d‐flex search‐list‐item mb‐3 ">
<a href="./charts‐apex.html" class="d‐inline‐block text‐dark:600 hover:text‐primary:600 dark:text‐dark:200 dark:hover:text‐primary:300">
<span class="me‐2 search‐list‐icon d‐inline‐block">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="icon icon‐tabler icons‐tabler‐outline icon‐tabler‐chart‐pie‐2"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3v9h9" /><path d="M12 12m‐9 0a9 9 0 1 0 18 0a9 9 0 1 0 ‐18 0" /></svg>
</span>
<span class="fw:500 d‐inline‐block">Charts</span>
</a>
</li>
<li class="d‐flex search‐list‐item mb‐3 ">
<a href="./form‐wizard.html" class="d‐inline‐block text‐dark:600 hover:text‐primary:600 dark:text‐dark:200 dark:hover:text‐primary:300">
<span class="me‐2 search‐list‐icon d‐inline‐block">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="icon icon‐tabler icons‐tabler‐outline icon‐tabler‐michelin‐star‐green"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12.432 17.949c.863 1.544 2.589 1.976 4.13 1.112c1.54 ‐.865 1.972 ‐2.594 1.048 ‐4.138c‐.185 ‐.309 ‐.309 ‐.556 ‐.494 ‐.74c.247 .06 .555 .06 .925 .06c1.726 0 2.959 ‐1.234 2.959 ‐2.963c0 ‐1.73 ‐1.233 ‐2.965 ‐3.02 ‐2.965c‐.37 0 ‐.617 0 ‐.925 .062c.185 ‐.185 .308 ‐.432 .493 ‐.74c.863 ‐1.545 .431 ‐3.274 ‐1.048 ‐4.138c‐1.541 ‐.865 ‐3.205 ‐.433 ‐4.13 1.111c‐.185 .309 ‐.308 .556 ‐.432 .803c‐.123 ‐.247 ‐.246 ‐.494 ‐.431 ‐.803c‐.802 ‐1.605 ‐2.528 ‐2.038 ‐4.007 ‐1.173c‐1.541 .865 ‐1.973 2.594 ‐1.048 4.137c.185 .31 .308 .556 .493 .741c‐.246 ‐.061 ‐.555 ‐.061 ‐.924 ‐.061c‐1.788 0 ‐3.021 1.235 ‐3.021 2.964c0 1.729 1.233 2.964 3.02 2.964" /><path d="M4.073 21c4.286 ‐2.756 5.9 ‐5.254 7.927 ‐9" /></svg>
</span>
<span class="fw:500 d‐inline‐block">Wizards</span>
</a>
</li>
</ul>
</div>
</div>
<div class="col‐md‐6 mb‐4">
<div class="search‐list‐content">
<h6 class="text‐dark:300 mb‐3">Pages</h6>
<ul class="search‐list list‐unstyled">
<li class="d‐flex search‐list‐item mb‐3 ">
<a href="./user‐profile.html" class="d‐inline‐block text‐dark:600 hover:text‐primary:600 dark:text‐dark:200 dark:hover:text‐primary:300">
<span class="me‐2 search‐list‐icon d‐inline‐block">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon‐tabler icon‐tabler‐user" width="24" height="24" viewBox="0 0 24 24" stroke‐width="2" stroke="currentColor" fill="none" stroke‐linecap="round" stroke‐linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<circle cx="12" cy="7" r="4"></circle>
<path d="M6 21v‐2a4 4 0 0 1 4 ‐4h4a4 4 0 0 1 4 4v2"></path>
</svg>
</span>
<span class="fw:500 d‐inline‐block">User Profile</span>
</a>
</li>
<li class="d‐flex search‐list‐item mb‐3 ">
<a href="./user‐list.html" class="d‐inline‐block text‐dark:600 hover:text‐primary:600 dark:text‐dark:200 dark:hover:text‐primary:300">
<span class="me‐2 search‐list‐icon d‐inline‐block">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="icon icon‐tabler icons‐tabler‐outline icon‐tabler‐list‐details"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M13 5h8"></path><path d="M13 9h5"></path><path d="M13 15h8"></path><path d="M13 19h5"></path><path d="M3 4m0 1a1 1 0 0 1 1 ‐1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 ‐1 1h‐4a1 1 0 0 1 ‐1 ‐1z"></path><path d="M3 14m0 1a1 1 0 0 1 1 ‐1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 ‐1 1h‐4a1 1 0 0 1 ‐1 ‐1z"></path></svg>
</span>
<span class="fw:500 d‐inline‐block">User List</span>
</a>
</li>
<li class="d‐flex search‐list‐item mb‐3 ">
<a href="./app‐ecommerce‐product.html" class="d‐inline‐block text‐dark:600 hover:text‐primary:600 dark:text‐dark:200 dark:hover:text‐primary:300">
<span class="me‐2 search‐list‐icon d‐inline‐block">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="icon icon‐tabler icons‐tabler‐outline icon‐tabler‐basket‐bolt"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M17 10l‐2 ‐6" /><path d="M7 10l2 ‐6" /><path d="M13 20h‐5.756a3 3 0 0 1 ‐2.965 ‐2.544l‐1.255 ‐7.152a2 2 0 0 1 1.977 ‐2.304h13.999a2 2 0 0 1 1.977 2.304l‐.358 2.04" /><path d="M10 14a2 2 0 1 0 4 0a2 2 0 0 0 ‐4 0" /><path d="M19 16l‐2 3h4l‐2 3" /></svg>
</span>
<span class="fw:500 d‐inline‐block">Product</span>
</a>
</li>
<li class="d‐flex search‐list‐item mb‐3 ">
<a href="./user‐account.html" class="d‐inline‐block text‐dark:600 hover:text‐primary:600 dark:text‐dark:200 dark:hover:text‐primary:300">
<span class="me‐2 search‐list‐icon d‐inline‐block">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="icon icon‐tabler icons‐tabler‐outline icon‐tabler‐settings‐2"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.875 6.27a2.225 2.225 0 0 1 1.125 1.948v7.284c0 .809 ‐.443 1.555 ‐1.158 1.948l‐6.75 4.27a2.269 2.269 0 0 1 ‐2.184 0l‐6.75 ‐4.27a2.225 2.225 0 0 1 ‐1.158 ‐1.948v‐7.285c0 ‐.809 .443 ‐1.554 1.158 ‐1.947l6.75 ‐3.98a2.33 2.33 0 0 1 2.25 0l6.75 3.98h‐.033z" /><path d="M12 12m‐3 0a3 3 0 1 0 6 0a3 3 0 1 0 ‐6 0" /></svg>
</span>
<span class="fw:500 d‐inline‐block">Account Settings</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row search‐row‐two">
<div class="col‐md‐12">
<div class="searchable‐list‐content">
<ul class="searchable‐list list‐unstyled">
<li class="d‐flex search‐list‐item pb‐2 pt‐2 ">
<a href="./index.html" class="d‐inline‐block text‐dark:600 hover:text‐primary:600 bg‐primary:50 hover:bg‐primary:100 dark:text‐dark:100 dark:hover:text‐primary:50 dark:bg‐dark:700 dark:hover:bg‐primary:600">
<span class="me‐2 search‐list‐icon d‐inline‐block">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon‐tabler icon‐tabler‐home" width="24" height="24" viewBox="0 0 24 24" stroke‐width="2" stroke="currentColor" fill="none" stroke‐linecap="round" stroke‐linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<polyline points="5 12 3 12 12 3 21 12 19 12"></polyline>
<path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 ‐2v‐7"></path>
<path d="M9 21v‐6a2 2 0 0 1 2 ‐2h2a2 2 0 0 1 2 2v6"></path>
</svg>
</span>
<span class="fw:500 d‐inline‐block">Analytics</span>
</a>
</li>
<li class="d‐flex search‐list‐item pb‐2 pt‐2 ">
<a href="./index2.html" class="d‐inline‐block text‐dark:600 hover:text‐primary:600 bg‐primary:50 hover:bg‐primary:100 dark:text‐dark:100 dark:hover:text‐primary:50 dark:bg‐dark:700 dark:hover:bg‐primary:600">
<span class="me‐2 search‐list‐icon d‐inline‐block">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="icon icon‐tabler icons‐tabler‐outline icon‐tabler‐chart‐bar‐popular"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 13a1 1 0 0 1 1 ‐1h4a1 1 0 0 1 1 1v6a1 1 0 0 1 ‐1 1h‐4a1 1 0 0 1 ‐1 ‐1z" /><path d="M9 9a1 1 0 0 1 1 ‐1h4a1 1 0 0 1 1 1v10a1 1 0 0 1 ‐1 1h‐4a1 1 0 0 1 ‐1 ‐1z" /><path d="M15 5a1 1 0 0 1 1 ‐1h4a1 1 0 0 1 1 1v14a1 1 0 0 1 ‐1 1h‐4a1 1 0 0 1 ‐1 ‐1z" /><path d="M4 20h14" /></svg>
</span>
<span class="fw:500 d‐inline‐block">Sales</span>
</a>
</li>
<li class="d‐flex search‐list‐item pb‐2 pt‐2 ">
<a href="./app‐mailbox.html" class="d‐inline‐block text‐dark:600 hover:text‐primary:600 bg‐primary:50 hover:bg‐primary:100 dark:text‐dark:100 dark:hover:text‐primary:50 dark:bg‐dark:700 dark:hover:bg‐primary:600">
<span class="me‐2 search‐list‐icon d‐inline‐block">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon‐tabler icon‐tabler‐brand‐gmail" width="24" height="24" viewBox="0 0 24 24" stroke‐width="2" stroke="currentColor" fill="none" stroke‐linecap="round" stroke‐linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M16 20h3a1 1 0 0 0 1 ‐1v‐14a1 1 0 0 0 ‐1 ‐1h‐3v16z"></path>
<path d="M5 20h3v‐16h‐3a1 1 0 0 0 ‐1 1v14a1 1 0 0 0 1 1z"></path>
<path d="M16 4l‐4 4l‐4 ‐4"></path>
<path d="M4 6.5l8 7.5l8 ‐7.5"></path>
</svg>
</span>
<span class="fw:500 d‐inline‐block">Mailbox</span>
</a>
</li>
<li class="d‐flex search‐list‐item pb‐2 pt‐2 ">
<a href="./user‐list.html" class="d‐inline‐block text‐dark:600 hover:text‐primary:600 bg‐primary:50 hover:bg‐primary:100 dark:text‐dark:100 dark:hover:text‐primary:50 dark:bg‐dark:700 dark:hover:bg‐primary:600">
<span class="me‐2 search‐list‐icon d‐inline‐block">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="icon icon‐tabler icons‐tabler‐outline icon‐tabler‐list‐details"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M13 5h8" /><path d="M13 9h5" /><path d="M13 15h8" /><path d="M13 19h5" /><path d="M3 4m0 1a1 1 0 0 1 1 ‐1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 ‐1 1h‐4a1 1 0 0 1 ‐1 ‐1z" /><path d="M3 14m0 1a1 1 0 0 1 1 ‐1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 ‐1 1h‐4a1 1 0 0 1 ‐1 ‐1z" /></svg>
</span>
<span class="fw:500 d‐inline‐block">User List</span>
</a>
</li>
<li class="d‐flex search‐list‐item pb‐2 pt‐2 ">
<a href="./app‐chat.html" class="d‐inline‐block text‐dark:600 hover:text‐primary:600 bg‐primary:50 hover:bg‐primary:100 dark:text‐dark:100 dark:hover:text‐primary:50 dark:bg‐dark:700 dark:hover:bg‐primary:600">
<span class="me‐2 search‐list‐icon d‐inline‐block">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon‐tabler icon‐tabler‐message‐dots" width="24" height="24" viewBox="0 0 24 24" stroke‐width="2" stroke="currentColor" fill="none" stroke‐linecap="round" stroke‐linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M4 21v‐13a3 3 0 0 1 3 ‐3h10a3 3 0 0 1 3 3v6a3 3 0 0 1 ‐3 3h‐9l‐4 4"></path>
<line x1="12" y1="11" x2="12" y2="11.01"></line>
<line x1="8" y1="11" x2="8" y2="11.01"></line>
<line x1="16" y1="11" x2="16" y2="11.01"></line>
</svg>
</span>
<span class="fw:500 d‐inline‐block">Chat</span>
</a>
</li>
<li class="d‐flex search‐list‐item pb‐2 pt‐2 ">
<a href="./app‐kanban.html" class="d‐inline‐block text‐dark:600 hover:text‐primary:600 bg‐primary:50 hover:bg‐primary:100 dark:text‐dark:100 dark:hover:text‐primary:50 dark:bg‐dark:700 dark:hover:bg‐primary:600">
<span class="me‐2 search‐list‐icon d‐inline‐block">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon‐tabler icon‐tabler‐layout‐kanban" width="24" height="24" viewBox="0 0 24 24" stroke‐width="2" stroke="currentColor" fill="none" stroke‐linecap="round" stroke‐linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<line x1="4" y1="4" x2="10" y2="4"></line>
<line x1="14" y1="4" x2="20" y2="4"></line>
<rect x="4" y="8" width="6" height="12" rx="2"></rect>
<rect x="14" y="8" width="6" height="6" rx="2"></rect>
</svg>
</span>
<span class="fw:500 d‐inline‐block">Kanban</span>
</a>
</li>
<li class="d‐flex search‐list‐item pb‐2 pt‐2 ">
<a href="./app‐notes.html" class="d‐inline‐block text‐dark:600 hover:text‐primary:600 bg‐primary:50 hover:bg‐primary:100 dark:text‐dark:100 dark:hover:text‐primary:50 dark:bg‐dark:700 dark:hover:bg‐primary:600">
<span class="me‐2 search‐list‐icon d‐inline‐block">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon‐tabler icon‐tabler‐notes" width="24" height="24" viewBox="0 0 24 24" stroke‐width="2" stroke="currentColor" fill="none" stroke‐linecap="round" stroke‐linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<rect x="5" y="3" width="14" height="18" rx="2"></rect>
<line x1="9" y1="7" x2="15" y2="7"></line>
<line x1="9" y1="11" x2="15" y2="11"></line>
<line x1="9" y1="15" x2="13" y2="15"></line>
</svg>
</span>
<span class="fw:500 d‐inline‐block">Notes</span>
</a>
</li>
<li class="d‐flex search‐list‐item pb‐2 pt‐2 ">
<a href="./app‐calendar.html" class="d‐inline‐block text‐dark:600 hover:text‐primary:600 bg‐primary:50 hover:bg‐primary:100 dark:text‐dark:100 dark:hover:text‐primary:50 dark:bg‐dark:700 dark:hover:bg‐primary:600">
<span class="me‐2 search‐list‐icon d‐inline‐block">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon‐tabler icon‐tabler‐calendar" width="24" height="24" viewBox="0 0 24 24" stroke‐width="2" stroke="currentColor" fill="none" stroke‐linecap="round" stroke‐linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<rect x="4" y="5" width="16" height="16" rx="2"></rect>
<line x1="16" y1="3" x2="16" y2="7"></line>
<line x1="8" y1="3" x2="8" y2="7"></line>
<line x1="4" y1="11" x2="20" y2="11"></line>
<line x1="11" y1="15" x2="12" y2="15"></line>
<line x1="12" y1="15" x2="12" y2="18"></line>
</svg>
</span>
<span class="fw:500 d‐inline‐block">Calendar</span>
</a>
</li>
<li class="d‐flex search‐list‐item pb‐2 pt‐2 ">
<a href="./element‐typography.html" class="d‐inline‐block text‐dark:600 hover:text‐primary:600 bg‐primary:50 hover:bg‐primary:100 dark:text‐dark:100 dark:hover:text‐primary:50 dark:bg‐dark:700 dark:hover:bg‐primary:600">
<span class="me‐2 search‐list‐icon d‐inline‐block">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="icon icon‐tabler icons‐tabler‐outline icon‐tabler‐typography"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 20l3 0" /><path d="M14 20l7 0" /><path d="M6.9 15l6.9 0" /><path d="M10.2 6.3l5.8 13.7" /><path d="M5 20l6 ‐16l2 0l7 16" /></svg>
</span>
<span class="fw:500 d‐inline‐block">Typhography</span>
</a>
</li>
<li class="d‐flex search‐list‐item pb‐2 pt‐2 ">
<a href="./table‐basic.html" class="d‐inline‐block text‐dark:600 hover:text‐primary:600 bg‐primary:50 hover:bg‐primary:100 dark:text‐dark:100 dark:hover:text‐primary:50 dark:bg‐dark:700 dark:hover:bg‐primary:600">
<span class="me‐2 search‐list‐icon d‐inline‐block">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="icon icon‐tabler icons‐tabler‐outline icon‐tabler‐table"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 5a2 2 0 0 1 2 ‐2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 ‐2 2h‐14a2 2 0 0 1 ‐2 ‐2v‐14z" /><path d="M3 10h18" /><path d="M10 3v18" /></svg>
</span>
<span class="fw:500 d‐inline‐block">Tables</span>
</a>
</li>
<li class="d‐flex search‐list‐item pb‐2 pt‐2 ">
<a href="./charts‐apex.html" class="d‐inline‐block text‐dark:600 hover:text‐primary:600 bg‐primary:50 hover:bg‐primary:100 dark:text‐dark:100 dark:hover:text‐primary:50 dark:bg‐dark:700 dark:hover:bg‐primary:600">
<span class="me‐2 search‐list‐icon d‐inline‐block">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="icon icon‐tabler icons‐tabler‐outline icon‐tabler‐chart‐pie‐2"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3v9h9" /><path d="M12 12m‐9 0a9 9 0 1 0 18 0a9 9 0 1 0 ‐18 0" /></svg>
</span>
<span class="fw:500 d‐inline‐block">Charts</span>
</a>
</li>
<li class="d‐flex search‐list‐item pb‐2 pt‐2 ">
<a href="./form‐wizard.html" class="d‐inline‐block text‐dark:600 hover:text‐primary:600 bg‐primary:50 hover:bg‐primary:100 dark:text‐dark:100 dark:hover:text‐primary:50 dark:bg‐dark:700 dark:hover:bg‐primary:600">
<span class="me‐2 search‐list‐icon d‐inline‐block">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="icon icon‐tabler icons‐tabler‐outline icon‐tabler‐michelin‐star‐green"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12.432 17.949c.863 1.544 2.589 1.976 4.13 1.112c1.54 ‐.865 1.972 ‐2.594 1.048 ‐4.138c‐.185 ‐.309 ‐.309 ‐.556 ‐.494 ‐.74c.247 .06 .555 .06 .925 .06c1.726 0 2.959 ‐1.234 2.959 ‐2.963c0 ‐1.73 ‐1.233 ‐2.965 ‐3.02 ‐2.965c‐.37 0 ‐.617 0 ‐.925 .062c.185 ‐.185 .308 ‐.432 .493 ‐.74c.863 ‐1.545 .431 ‐3.274 ‐1.048 ‐4.138c‐1.541 ‐.865 ‐3.205 ‐.433 ‐4.13 1.111c‐.185 .309 ‐.308 .556 ‐.432 .803c‐.123 ‐.247 ‐.246 ‐.494 ‐.431 ‐.803c‐.802 ‐1.605 ‐2.528 ‐2.038 ‐4.007 ‐1.173c‐1.541 .865 ‐1.973 2.594 ‐1.048 4.137c.185 .31 .308 .556 .493 .741c‐.246 ‐.061 ‐.555 ‐.061 ‐.924 ‐.061c‐1.788 0 ‐3.021 1.235 ‐3.021 2.964c0 1.729 1.233 2.964 3.02 2.964" /><path d="M4.073 21c4.286 ‐2.756 5.9 ‐5.254 7.927 ‐9" /></svg>
</span>
<span class="fw:500 d‐inline‐block">Wizards</span>
</a>
</li>
<li class="d‐flex search‐list‐item pb‐2 pt‐2 ">
<a href="./user‐profile.html" class="d‐inline‐block text‐dark:600 hover:text‐primary:600 bg‐primary:50 hover:bg‐primary:100 dark:text‐dark:100 dark:hover:text‐primary:50 dark:bg‐dark:700 dark:hover:bg‐primary:600">
<span class="me‐2 search‐list‐icon d‐inline‐block">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon‐tabler icon‐tabler‐user" width="24" height="24" viewBox="0 0 24 24" stroke‐width="2" stroke="currentColor" fill="none" stroke‐linecap="round" stroke‐linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<circle cx="12" cy="7" r="4"></circle>
<path d="M6 21v‐2a4 4 0 0 1 4 ‐4h4a4 4 0 0 1 4 4v2"></path>
</svg>
</span>
<span class="fw:500 d‐inline‐block">User Profile</span>
</a>
</li>
<li class="d‐flex search‐list‐item pb‐2 pt‐2 ">
<a href="./user‐list.html" class="d‐inline‐block text‐dark:600 hover:text‐primary:600 bg‐primary:50 hover:bg‐primary:100 dark:text‐dark:100 dark:hover:text‐primary:50 dark:bg‐dark:700 dark:hover:bg‐primary:600">
<span class="me‐2 search‐list‐icon d‐inline‐block">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="icon icon‐tabler icons‐tabler‐outline icon‐tabler‐list‐details"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M13 5h8"></path><path d="M13 9h5"></path><path d="M13 15h8"></path><path d="M13 19h5"></path><path d="M3 4m0 1a1 1 0 0 1 1 ‐1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 ‐1 1h‐4a1 1 0 0 1 ‐1 ‐1z"></path><path d="M3 14m0 1a1 1 0 0 1 1 ‐1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 ‐1 1h‐4a1 1 0 0 1 ‐1 ‐1z"></path></svg>
</span>
<span class="fw:500 d‐inline‐block">User List</span>
</a>
</li>
<li class="d‐flex search‐list‐item pb‐2 pt‐2 ">
<a href="app‐ecommerce‐product.html" class="d‐inline‐block text‐dark:600 hover:text‐primary:600 bg‐primary:50 hover:bg‐primary:100 dark:text‐dark:100 dark:hover:text‐primary:50 dark:bg‐dark:700 dark:hover:bg‐primary:600">
<span class="me‐2 search‐list‐icon d‐inline‐block">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="icon icon‐tabler icons‐tabler‐outline icon‐tabler‐basket‐bolt"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M17 10l‐2 ‐6" /><path d="M7 10l2 ‐6" /><path d="M13 20h‐5.756a3 3 0 0 1 ‐2.965 ‐2.544l‐1.255 ‐7.152a2 2 0 0 1 1.977 ‐2.304h13.999a2 2 0 0 1 1.977 2.304l‐.358 2.04" /><path d="M10 14a2 2 0 1 0 4 0a2 2 0 0 0 ‐4 0" /><path d="M19 16l‐2 3h4l‐2 3" /></svg>
</span>
<span class="fw:500 d‐inline‐block">Product</span>
</a>
</li>
<li class="d‐flex search‐list‐item pb‐2 pt‐2 ">
<a href="./user‐account.html" class="d‐inline‐block text‐dark:600 hover:text‐primary:600 bg‐primary:50 hover:bg‐primary:100 dark:text‐dark:100 dark:hover:text‐primary:50 dark:bg‐dark:700 dark:hover:bg‐primary:600">
<span class="me‐2 search‐list‐icon d‐inline‐block">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke‐width="2" stroke‐linecap="round" stroke‐linejoin="round" class="icon icon‐tabler icons‐tabler‐outline icon‐tabler‐settings‐2"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.875 6.27a2.225 2.225 0 0 1 1.125 1.948v7.284c0 .809 ‐.443 1.555 ‐1.158 1.948l‐6.75 4.27a2.269 2.269 0 0 1 ‐2.184 0l‐6.75 ‐4.27a2.225 2.225 0 0 1 ‐1.158 ‐1.948v‐7.285c0 ‐.809 .443 ‐1.554 1.158 ‐1.947l6.75 ‐3.98a2.33 2.33 0 0 1 2.25 0l6.75 3.98h‐.033z" /><path d="M12 12m‐3 0a3 3 0 1 0 6 0a3 3 0 1 0 ‐6 0" /></svg>
</span>
<span class="fw:500 d‐inline‐block">Account Settings</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!‐‐ END SEARCH MODAL ‐‐>
<!‐‐ BEGIN GLOBAL MANDATORY SCRIPTS ‐‐>
<script src="../src/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../src/plugins/src/perfect‐scrollbar/perfect‐scrollbar.min.js"></script>
<script src="../src/plugins/src/mousetrap/mousetrap.min.js"></script>
<script src="../src/plugins/src/waves/waves.min.js"></script>
<script src="../layouts/vertical‐light‐menu/app.js"></script>
<script src="../src/assets/js/theme‐customizer.js"></script>
<!‐‐ END GLOBAL MANDATORY SCRIPTS ‐‐>
<!‐‐ BEGIN PAGE LEVEL PLUGINS/CUSTOM SCRIPTS ‐‐>
<!‐‐ BEGIN PAGE LEVEL PLUGINS/CUSTOM SCRIPTS ‐‐>
</body>
</html>