143 lines
5.4 KiB
HTML
143 lines
5.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
|
||
|
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<title><sf-nav> Demo</title>
|
||
|
|
<!-- Integration material icons as they are used in sf-nav -->
|
||
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||
|
|
<!-- Google fonts integration -->
|
||
|
|
<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=Source+Sans+Pro:wght@200;300;400;600&display=swap"
|
||
|
|
rel="stylesheet">
|
||
|
|
<!-- Integration the web components module -->
|
||
|
|
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
|
||
|
|
<!-- Integration lit and sf-nav web components module -->
|
||
|
|
<script type="module">
|
||
|
|
import { LitElement, html, css } from 'https://cdn.jsdelivr.net/gh/lit/dist@3/all/lit-all.min.js';
|
||
|
|
import { SfNav } from 'https://unpkg.com/sf-nav/sf-nav.js?module';
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
background-color: #efefef;
|
||
|
|
margin: 0px;
|
||
|
|
font-family: 'Source Sans Pro';
|
||
|
|
}
|
||
|
|
|
||
|
|
sf-nav:not(:defined) {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* <!-- other styles --> */
|
||
|
|
|
||
|
|
.cContainer {
|
||
|
|
margin: 10px;
|
||
|
|
padding: 20px;
|
||
|
|
border: dash 1px gray;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body style="margin: 0px;">
|
||
|
|
<sf-nav>
|
||
|
|
<!-- Set the msnu -->
|
||
|
|
<ul slot="mainMenu">
|
||
|
|
<li><a href="#about">About</a></li>
|
||
|
|
<li class="li-solutions">
|
||
|
|
<a href="javascript:void(0);" class="a-solutions">Solutions</a>
|
||
|
|
<ul>
|
||
|
|
<li><a href="#services">Services</a></li>
|
||
|
|
<li><a href="#products">Products</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="javascript:void(0);">Contact Us</a>
|
||
|
|
<ul>
|
||
|
|
<li><a href="https://instagram.com">Instagram</a></li>
|
||
|
|
<li><a href="https://facebook.com">Facebook</a></li>
|
||
|
|
<li><a href="https://youtube.com">YouTube</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<!-- Set the brand name -->
|
||
|
|
<h2 slot="brandName"><a href="#home">Superflows</a></h2>
|
||
|
|
<!-- Set the brand logo -->
|
||
|
|
<a slot="brandImage" href="#home"><img alt="logo"
|
||
|
|
src="https://superflows-images.s3.ap-south-1.amazonaws.com/superflows_black_transparent_200.png" /></a>
|
||
|
|
<!-- Set the notifications -->
|
||
|
|
<ul slot="unreadNotifications">
|
||
|
|
<li><a href="#notification/1">
|
||
|
|
<h3>Sonali Joshi</h3>
|
||
|
|
<p>mentioned you in a comment</p>
|
||
|
|
<div>1 day ago</div>
|
||
|
|
</a></li>
|
||
|
|
<li><a href="#notification/2">
|
||
|
|
<h3>Rahim Ahmed</h3>
|
||
|
|
<p>reacted to your blog post</p>
|
||
|
|
<div>2 days ago</div>
|
||
|
|
</a></li>
|
||
|
|
<li><a href="#notification/3">
|
||
|
|
<h3>John Bolton</h3>
|
||
|
|
<p>replied to a thread that you posted in</p>
|
||
|
|
<div>1 month ago</div>
|
||
|
|
</a></li>
|
||
|
|
</ul>
|
||
|
|
<ul slot="readNotifications">
|
||
|
|
<li><a href="#notification/4">
|
||
|
|
<h3>Sonali Joshi</h3>
|
||
|
|
<p>mentioned you in a comment</p>
|
||
|
|
<div>1 day ago</div>
|
||
|
|
</a></li>
|
||
|
|
<li><a href="#notification/5">
|
||
|
|
<h3>Rahim Ahmed</h3>
|
||
|
|
<p>reacted to your blog post</p>
|
||
|
|
<div>2 days ago</div>
|
||
|
|
</a></li>
|
||
|
|
<li><a href="#notification/6">
|
||
|
|
<h3>John Bolton</h3>
|
||
|
|
<p>replied to a thread that you posted in</p>
|
||
|
|
<div>1 month ago</div>
|
||
|
|
</a></li>
|
||
|
|
</ul>
|
||
|
|
<!-- Page content-->
|
||
|
|
<div slot="content">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- Set the social media links -->
|
||
|
|
<ul slot="socialMedia">
|
||
|
|
<li><a href="https://facebook.com"><img
|
||
|
|
src="https://superflows-images.s3.ap-south-1.amazonaws.com/facebook-black_round.png" /></a></li>
|
||
|
|
<li><a href="https://twitter.com"><img
|
||
|
|
src="https://superflows-images.s3.ap-south-1.amazonaws.com/twitter_black_round.png" /></a></li>
|
||
|
|
<li><a href="https://youtube.com"><img
|
||
|
|
src="https://superflows-images.s3.ap-south-1.amazonaws.com/youtube_black_round.png" /></a></li>
|
||
|
|
</ul>
|
||
|
|
<!-- Copyright notice -->
|
||
|
|
<p slot="copyright">Copyright 2022 Superflows</p>
|
||
|
|
|
||
|
|
|
||
|
|
</sf-nav>
|
||
|
|
<script>
|
||
|
|
var routeMap = [];
|
||
|
|
|
||
|
|
function getCurrentPathName() {
|
||
|
|
return window.location.hash.length === 0 ? '' : window.location.hash.split("/")[0].replace('#', '');
|
||
|
|
}
|
||
|
|
function getCurrentArgs() {
|
||
|
|
return routeMap[getCurrentPathName() + '.html']
|
||
|
|
}
|
||
|
|
document.getElementsByTagName('sf-nav')[0].addEventListener('routeChange', (e) => {
|
||
|
|
routeMap[e.detail.pathName] = e.detail.args;
|
||
|
|
})
|
||
|
|
document.getElementsByTagName('sf-nav')[0].addEventListener('searchClick', (e) => {
|
||
|
|
console.log('search clicked ' + JSON.stringify(e.detail));
|
||
|
|
})
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|