how to make a single page app test
This commit is contained in:
parent
4c29c3222d
commit
8bc28f7aee
9 changed files with 508 additions and 2 deletions
143
single_page-app/dist/index.html
vendored
Normal file
143
single_page-app/dist/index.html
vendored
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
<!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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue