beenull/News-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Updated responsiveness of sidebar and navbar

Browse source
This commit is contained in:
Nik Topler 2020-09-21 19:20:17 +02:00
parent 7ed059318f
commit d5a429b768
8 changed files with 259 additions and 247 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

192
CSS/index.css
View file

@ -395,145 +395,96 @@ body{
#profile-extra-options .grid .profile-img-link .img:hover{
filter: brightness(0.96);
}
/*? Main Content */
/* Main Content */
main {
grid-row: 2/3;
background-color: var(--bg);
overflow-y: scroll;
overflow-x: visible;
}
.side-bar{
.side-bar {
left: 0;
top: 65px;
height: 100%;
height: calc(100% - 64px);
width: 17.5rem;
overflow: hidden;
position: fixed;
transition: ease-in-out all .3s;
}
.side-bar-container {
display: flex;
flex-direction: column;
width: inherit;
height: inherit;
}
.side-bar-content {
font-size: 0.875rem;
height: 100%;
width: 17.5rem;
padding: 15px 0;
left: 0px;
display: grid;
margin-top: 1rem;
margin-bottom: 1.5rem;
transition: all ease-in-out 0.3s;
grid-template-rows: 3rem 3rem 3rem 3rem 0.9rem 3rem 0.9rem 3rem 3rem 3rem 3rem 3rem 3rem 0.9rem 3rem 3rem 3rem 3rem 1fr;
}
.side-bar-content a, .side-bar-content .language{
padding-left: 30px;
}
.side-bar-content a{
.side-bar-content .sidebar-category {
display: flex;
align-items: center;
color: var(--font-dark);
}
.side-bar-content a.active{
color: var(--blue-light);
}
.side-menu-categories{
height: 46px;
width: 16.2rem;
cursor: pointer;
flex-grow: 1;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}
.side-bar-content hr{
border-top: 1px solid var(--hover-medium);
}
.side-bar-content a{
cursor: pointer;
}
.language{
margin: auto 0;
}
.language > *{
display: block;
color: #3c4043;
text-decoration: none;
}
.language:hover > *{
color: var(--blue-light);
}
.side-bar i{
color: var(--font);
padding-right: 0.5rem;
width: 1.3rem;
}
.side-bar span{
font-weight: 400;
}
.side-bar strong{
font-weight: 600;
}
.side-bar a:hover i,.side-bar a:hover{
color: var(--blue-light);
}
.side-bar footer{
color: var(--font-medium);
}
.side-bar footer span{
width: 1px;
}
#main .side-bar footer a{
font-size: 0.85rem;
}
.side-bar footer a:hover{
color: var(--font-dark);
}
.side-menu-active, a .side-menu-active {
background-color: var(--side-bar-active) !important;
color: var(--blue-light) !important;
}
.side-bar-content footer{
grid-template-rows: calc(100% - 107px) 6%;
padding-bottom: 15px;
}
.side-bar-content footer div{
grid-row: 2/3;
padding-left: 2rem;
.side-bar-content .sidebar-line {
height: 22px;
width: 16.2rem;
display: flex;
align-items: flex-start;
justify-content: flex-start;
align-items: center;
justify-content: center;
}
.side-bar-content footer div > *{
padding: 5px;
text-decoration: none;
font-size: 0.9rem;
text-decoration: none;
.side-bar-content .sidebar-line hr {
border-bottom: 1px solid var(--hover-dark);
width: 90%;
}
.side-bar footer {
display: flex;
align-items: center;
font-size: 0.75rem;
margin-top: auto;
}
.side-bar-content div.icon {
margin: 0 1rem 0 1.5rem;
height: 20px;
width: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.side-bar-content a {
color: var(--font-dark);
transition: ease-in-out .12s;
font-size: 0.9rem;
}
.side-bar-content footer div a:hover {
text-decoration: underline;
.side-bar-content div.other .text { margin: 0 0.7rem 0 1.5rem; }
.sidebar-category.country {
display: grid;
font-size: 0.9rem;
color: var(--font-dark);
}
.sidebar-help i{
padding-left: 0.5rem;
.side-bar {
overflow: scroll;
}
.about-sidebar-content{
left: -100%;
transition: all ease-in-out .3s;
border-right: 1px solid var(--border-medium);
border-top: 1px solid var(--border-medium);
background-color: var(--bg);
.sidebar-country-container > * { padding: 0 0 0 1.5rem; }
.side-bar footer div a { color: var(--font-medium); }
.side-bar footer .text { padding: 1rem 0.5rem; }
.side-bar .about { margin-left: 1.5rem; }
.sidebar-category:hover div a,
.sidebar-category:hover div i,
.sidebar-category:hover span,
.sidebar-category:hover strong {
color: var(--blue-light);
}
.about-sidebar-content.active{
left: 0%;
}
.header-about > *{
font-size: 1.1rem;
font-weight: 400;
}
.header-about a{
width: fit-content;
}
.header-about i{
padding-right: 5px;
}
.about-container{
grid-column: 1/4;
.sidebar-category.active { background-color: var(--side-bar-active) !important; }
.sidebar-category.active div a,
.sidebar-category.active div i {
color: var(--blue-light) !important;
}
/** Main Section */
.main-content-section {
@ -543,6 +494,7 @@ body{
height: 100%;
padding: 20px;
margin: auto;
transition: all ease-in-out .3s;
}
.main-content-container {
height: 100%;
@ -1345,18 +1297,16 @@ body{
}
}
@media screen and (max-width: 1100px) {
.main-content-section {
.main-content-section {
margin-left: 0px;
}
.side-bar-content {
.side-bar {
background-color: var(--bg);
border: 1px solid var(--border-medium);
overflow: auto;
z-index: 2;
overflow: auto;
}
.side-bar-content {
left: -280px;
}
.side-bar { margin-left: -280px; }
}
@media screen and (max-width: 964px) {
.navigation-bar { grid-template-columns: 120px 1fr 85px; }

132
JS/main.js
View file

@ -1,6 +1,8 @@
let pathLocation = '../'
let weatherArrayToday
let weatherArrayTommorow
let weatherArray2Days
const weather = {
async getweather() {
city = changeDiacritics(userLocationInformationValue[3])
@ -93,9 +95,12 @@ const searchBox = {
let mouseSuggestHover = false
let moreSuggestWordsArray = []
const suggest = {
fetch : async (input) => {
// const res = await fetch(`https://api.datamuse.com/words?ml=${input}`)
const res = await fetch(`https://api.datamuse.com/sug?s=${input}`)
fetch : async (input, type) => {
let res
place = 0
if(type === 'words' || !type) res = await fetch(`https://api.datamuse.com/words?ml=${input}`)
else if(type === 'suggest') res = await fetch(`https://api.datamuse.com/sug?s=${input}`)
else if(type === 'sp') res = await fetch(`https://api.datamuse.com/words?sp=${input}`)
return words = await res.json()
},
suggest : async() => {
@ -103,19 +108,19 @@ const suggest = {
let suggestWordsArray = []
let input = mainSearchInput.value.split(' ')
let n = 0
while(suggestWordsArray.length < 21) {
const maxLength = 40
while(suggestWordsArray.length < 30) {
fetchArray = await suggest.fetch(input[n])
for(let i = 0; i < fetchArray.length; i++)
if(suggestWordsArray.indexOf(fetchArray[i].word) === -1 && fetchArray[i].word !== mainSearchInput.value) suggestWordsArray.push(fetchArray[i].word)
if(suggestWordsArray.indexOf(fetchArray[i].word) === -1 && fetchArray[i].word !== mainSearchInput.value && suggestWordsArray.length < 30) suggestWordsArray.push(fetchArray[i].word)
input[n] = removeCharactersInString(input[n], 0, -1)
if(input.length === 0) break
}
suggest.generate(suggestWordsArray)
removeDisableSideElements()
},
generate : (array) => {
let section = document.querySelector('article.suggested-words.aside section')
@ -130,11 +135,12 @@ const suggest = {
}
},
manageSuggestWords : async () => {
let suggestWordsArray = await suggest.fetch(mainSearchInput.value)
const maxLength = 10
let suggestWordsArray = await suggest.getSuggestWords()
if(suggestWordsArray.length === 0) return hideSuggestWords()
if(suggestWordsArray.length > 6) suggestWordsArray = removeCharactersInString(suggestWordsArray, 4, suggestWordsArray.length)
if(suggestWordsArray.length > maxLength)
suggestWordsArray = suggestWordsArray.slice(0, maxLength)
suggest.suggestBox(suggestWordsArray)
for(let i = 0; i < suggestMainInput.getElementsByTagName('div').length; i++) {
@ -144,7 +150,14 @@ const suggest = {
suggestMainInput.getElementsByTagName('div')[i].classList.add('active')
}
suggestMainInput.getElementsByTagName('div')[i].onmouseleave = () => { suggestMainInput.getElementsByTagName('div')[i].classList.remove('active','key') }
}
}
},
getSuggestWords : async() => {
let array
if(mainSearchInput.value.length < 3) array = await suggest.fetch(mainSearchInput.value, 'sp')
else array = await suggest.fetch(mainSearchInput.value, 'words')
if(array.length === 0) array = await suggest.fetch(mainSearchInput.value, 'suggest')
return array
},
suggestBox : (words) => {
let wordBoxes = words.map(word => `<div class="grid pointer" onclick="suggest.selectSuggestedSearchOption(this.firstElementChild)">
@ -199,20 +212,9 @@ const responsiveVersion = {
// }
}
const regularExpressions = {
url : {
query : /[\?|\&]+[q]+[=].*?[&]/g,
country : /[\?|\&]+[c]+[o]+[u]+[=].{2}/g,
backgroundColor : /[\&]+[b]+[g]+[=].*/g
},
string : {
symbols : /[@_!#$%^&*()<>?/|}{~:]/g
}
}
const php = {
info : async(word) => {
const response = await fetch('privateInfo.php', {
const response = await fetch(`${pathLocation}privateInfo.php`, {
method: "POST",
body: createFormData(word)
})
@ -228,13 +230,33 @@ const php = {
}
const error = {
window : () => {
// Checkes if correct country acronym is in URL
if(window.location.search.match(regularExpressions.url.country)) {
let countryAcronym = window.location.search.match(regularExpressions.url.country)[0].slice(5, 7)
let country = getAcronymCountry(countryAcronym)
if(country) sclStrong.innerHTML = country
else return openLinks(filePath.headlines)
}
},
headlines : () => {
},
search : () => {
if(!window.location.search.match(regularExpressions.url.country)
|| !window.location.search.match(regularExpressions.url.backgroundColor)
|| !window.location.search.match(regularExpressions.url.search)) openLinks(filePath.headlines)
// if(mainSearchInput.value.length === 0) return true
// if(window.location.pathname.includes('search') && window.location.search.match(regularExpressions.url.query)[0].slice(3, -1).length === 0) return true
// if(window.location.search.match(regularExpressions.url.query)[0].slice(3, -1).length === 0) return true
}
}
const regularExpressions = {
url : {
query : /[\?|\&]+[q]+[=].*?[&]/g,
country : /[\?|\&]+[c]+[o]+[u]+[=].{2}/g,
backgroundColor : /[\&]+[b]+[g]+[=].*/g
},
string : {
symbols : /[@_!#$%^&*()<>?/|}{~:]/g
}
}
@ -261,10 +283,12 @@ window.onload = async () => {
// Close all open windows
hideExtraSearchOptions()
hideSuggestWords()
// document.querySelectorAll('article').forEach(article => { article.onclick = () => { alert() }})
document.querySelectorAll('input').forEach(input => { input.autocomplete = 'off' })
await user.location()
error.window()
removeActiveSidebarCategory()
if (window.location.pathname.includes('headlines')) headlines()
else if (window.location.pathname.includes('for-you')) forYou()
@ -281,13 +305,12 @@ window.onload = async () => {
else if (window.location.pathname.includes('about')) about()
else if (window.location.pathname.includes('help')) help()
else if (window.location.pathname.includes('search')) mainSearch()
await user.location()
// changeBackgroundColor()
// let query = location.search.match(regularExpressions.url.query)[0]
// query = removeCharactersInString(query, 3, query.length - 1)
/* Search news */
}
window.onclick = (e) => {
@ -304,6 +327,11 @@ function historyPushState(webiste, string, country, background) { history.pushSt
function changeBackgroundColor() { document.body.className = window.location.search.match(regularExpressions.url.backgroundColor)[0].slice(4,10) }
/**
* This function gets a language and returns it's acronym
* @param {string} target
* @returns {string} language acronym
*/
function getLanguageAcronym(target) {
for(let i = 0; i < language.length; i++)
if(language[i] === target)
@ -381,7 +409,9 @@ function fahrenheitToKelvin(number) { return (number - 32) * 5/9 + 273 }
async function headlines() {
// await weather.getWeather()
// weather.updateWeather()
sidebarCategorySelect(document.querySelector('.fa-newspaper').parentElement)
pathLocation = ''
sidebarCategorySelect(document.querySelector('.fa-newspaper').parentElement.parentElement)
historyPushState(window.location.origin + window.location.pathname, '', `?cou=${getCountryAcronym(selectedCountry.innerHTML)}`,`&bg=${backgroundColor}`)
}
@ -390,8 +420,9 @@ async function headlines() {
function mainSearch(extra, type) {
let url = ''
let newSearch = false
pathLocation = ''
// error.search()
if(error.search() === true) return
if(!type) type = 'main-url'
if(!window.location.pathname.includes('search')) newSearch = true
@ -458,25 +489,25 @@ async function headlines() {
/* FOR YOU */
function forYou() {
sidebarCategorySelect(document.querySelector('.fa-user-alt').parentElement)
sidebarCategorySelect(document.querySelector('.fa-user-alt').parentElement.parentElement)
}
/* FOLLOWING */
function following() {
sidebarCategorySelect(document.querySelector('.fa-star').parentElement)
sidebarCategorySelect(document.querySelector('.fa-star').parentElement.parentElement)
}
/* LIBRARY */
function library() {
sidebarCategorySelect(document.querySelector('.fa-bookmark').parentElement)
sidebarCategorySelect(document.querySelector('.fa-bookmark').parentElement.parentElement)
}
/* CATEGORIES */
function category(word) {
sidebarCategorySelect(document.querySelector(`.${word}`).parentElement)
sidebarCategorySelect(document.querySelector(`.${word}`).parentElement.parentElement)
}
/* SETTINGS */
@ -494,7 +525,9 @@ mainSearchInput.onfocus = () => {
else if(mainSearchInput.value.length !== 0) showSuggestWords()
suggest.manageSuggestWords()
}
mainSearchInput.onblur = () => {
// hideSuggestWords()
}
mainSearchInput.oninput = () => {
if(mainSearchInput.value.length === 0) return hideSuggestWords()
else if(suggestMainInput.classList.contains('disable')) showSuggestWords()
@ -506,7 +539,7 @@ mainSearchInput.onkeyup = (e) => {
let suggestDivActiveKey = suggestMainInput.querySelectorAll('div.active.key')
if(e.keyCode === 13) {
if(suggestDivActiveKey.length === 1) historyPushState(location.origin + location.pathname, `?q=${removeDiacritics(suggestDivActiveKey[0].firstElementChild.innerHTML).trim()}&`, `cou=${getCountryAcronym(selectedCountry.innerHTML)}&`,`bg=${backgroundColor}`)
else historyPushState(location.origin + location.pathname, `?q=${removeDiacritics(mainSearchInput.value).trim()}&`, `cou=${getCountryAcronym(selectedCountry.innerHTML)}&`,`bg=${backgroundColor}`)
else historyPushState(location.origin + location.pathname, `?q=${mainSearchInput.value.trim()}&`, `cou=${getCountryAcronym(selectedCountry.innerHTML)}&`,`bg=${backgroundColor}`)
mainSearch()
}
if(suggestMainInput.classList.contains('disable') || suggestMainInput.querySelectorAll('div').length === 0) return
@ -539,14 +572,9 @@ function updateCountrySelect(country) {
}
function createUrlPath(type, search) {
if(search === undefined && location.pathname.includes(type)) return
let path
let query = ''
if(search === undefined && location.pathname.includes(type)) return
if(type === 'headlines') path = filePath.headlines
else if(type === 'search') {
path = filePath.search
query = `q=${search}&`
}
else if(type === 'following') path = filePath.following
else if(type === 'for-you') path = filePath.forYou
else if(type === 'library') path = filePath.library
@ -557,8 +585,8 @@ function createUrlPath(type, search) {
else if(type === 'entertainment') path = filePath.entertainment
else if(type === 'sports') path = filePath.sports
else if(type === 'health') path = filePath.health
return path = `${path}?${query}cou=${getCountryAcronym(selectedCountry.innerHTML)}&bg=${backgroundColor}`
path = `${path}?cou=${getCountryAcronym(selectedCountry.innerHTML)}&bg=${backgroundColor}`
openLinks(path)
}
let activeCountry
@ -694,15 +722,15 @@ function clickInOutCheck(parent, target) {
if(checkIfClickIsOnElement(hasChildren, target) === true || checkIfClickIsOnElement(noChildren, target) === true) clickOnOpenedElement = true
else clickOnOpenedElement = false
if(clickOnOpenedElement === false && parent === extraSearchOptions && target !== extOptIcon) hideExtraSearchOptions()
else if(clickOnOpenedElement === false && parent === suggestMainInput) hideSuggestWords()
else if(clickOnOpenedElement === false && parent === extOptProfile) manageExtraProfileOptions()
else if(clickOnOpenedElement === false && parent === selectCountryDiv && countryDivExceptions.some((val) => val === target) === false) hideSelectCountry()
else if(clickOnOpenedElement === false && parent === logInOptions && target !== loginButton) manageLoginOptions()
children = []
hasChildren = []
noChildren = []
if(clickOnOpenedElement === true) return
if(parent === extraSearchOptions && target !== extOptIcon) hideExtraSearchOptions()
else if(parent === suggestMainInput && document.activeElement !== mainSearchInput) hideSuggestWords()
else if(parent === extOptProfile) manageExtraProfileOptions()
else if(parent === selectCountryDiv && countryDivExceptions.some((val) => val === target) === false) hideSelectCountry()
else if(parent === logInOptions && target !== loginButton) manageLoginOptions()
}
function doesElementHaveChildren(parent) {
if(parent.children.length > 0){

33
JS/show.js
View file

@ -1,27 +1,20 @@
let sideMenuCounter = 0
function manageSideMenu() {
if(checkWindowWidth900() === true && sideMenuCounter === 0){
sideBarContent.style.left = '-100%'
if(window.innerWidth < 1101 && sideMenuCounter === 0){
sideBar.style.marginLeft = '-100%'
sideMenuCounter = 1
} else if(checkWindowWidth900() === true && sideMenuCounter === 1){
sideBarContent.style.left = '0%'
} else if(window.innerWidth < 1101 && sideMenuCounter === 1){
sideBar.style.marginLeft = '0'
sideMenuCounter = 0
} else if(checkWindowWidth900() === false && sideMenuCounter === 0){
sideBarContent.style.left = '-100%'
} else if(window.innerWidth > 1100 && sideMenuCounter === 0){
sideBar.style.marginLeft = '-100%'
sideMenuCounter = 1
} else if(checkWindowWidth900() === false && sideMenuCounter === 1) {
sideBarContent.classList.remove('disable')
sideBarContent.style.left = '0%'
} else if(window.innerWidth > 1100 && sideMenuCounter === 1) {
sideBar.style.marginLeft = '0'
sideMenuCounter = 0
}
}
function checkWindowWidth900() {
if(window.innerWidth > 930) return true
else return false
}
function manageExtraSearchOptions() {
if(extraSearchOptions.classList.contains('disable')) {
hideSuggestWords()
@ -134,13 +127,13 @@ function resetExtraSearchOptions() {
}
function sidebarCategorySelect(selectedElement) {
if(selectedElement.classList.contains('side-menu-active')) return
selectedElement.classList.add('side-menu-active')
selectedElement.firstElementChild.classList.add('side-menu-active')
if(selectedElement.classList.contains('active')) return
selectedElement.classList.add('active')
selectedElement.firstElementChild.classList.add('active')
/* Search news articles */
}
function removeActiveSidebarCategory() {
let oldSelectedElements = document.querySelectorAll('.side-menu-active')
let oldSelectedElements = document.querySelectorAll('sidebar-category.active')
for(let i = 0; i < oldSelectedElements.length; i++)
oldSelectedElements[i].classList.remove('side-menu-active')
oldSelectedElements[i].classList.remove('active')
}

10
JS/variables.js
View file

@ -52,22 +52,24 @@
/** Main Content */
/** Side Menu */
let sideBarContent = document.getElementById('side-bar-content')
let sideBar = document.getElementById('side-bar')
const selectCountryDiv = document.getElementById('select-country')
const listOfCountries = document.getElementById('list-of-countries')
const selectedCountry = document.getElementById('country-name-side-menu')
const suggestCountryCountainer = document.getElementById('suggest-country')
const searchCountriesInput = document.getElementById('search-country-input')
let mainContentSection = document.getElementById('main-content-section')
const mainContentSection = document.getElementById('main-content-section')
let mainAsideContent = document.getElementById('main-side-content-container')
let aboutContentSection = document.getElementById('about-content-section')
const sideBarAboutContent = document.getElementById('about-sidebar-content')
const mainContentContainer = document.getElementById('main-content-container')
let mainContentHeader = document.getElementById('main-content-header')
const showCountriesLink = document.getElementById('show-countries-button')
const sclSpan = showCountriesLink.firstElementChild
const sclStrong = showCountriesLink.lastElementChild
const sclSpan = showCountriesLink.firstElementChild.firstElementChild
const sclStrong = showCountriesLink.firstElementChild.lastElementChild
const main = document.getElementById('main')
const overlay = document.getElementById('overlay')
let navigationBarProfileImageDiv = document.getElementById('navigation-bar-profile-img-div')
let extOptProfile = document.getElementById('profile-extra-options')

5
add-ons/head.php
View file

@ -3,7 +3,8 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<meta name="google-signin-client_id"
content="571327981909-r5sunoo4l6uqducmqm7vjon1af0tmso1.apps.googleusercontent.com">
@ -13,7 +14,7 @@
<script src="../JS/variables.js" defer></script>
<script src="../JS/show.js" defer></script>
<script src="..JS/diacritics.js" defer></script>
<script src="../JS/diacritics.js" defer></script>
<script src="../JS/main.js" defer></script>
<script src="../JS/sign.js" defer></script>

130
add-ons/side-bar.php
View file

@ -1,48 +1,84 @@
<aside class="side-bar absolute">
<div class="side-bar-content grid fixed" id="side-bar-content">
<a href="#" class="side-menu-categories" onclick="createUrlPath('headlines')"><i
class="fal fa-newspaper fa-lg"></i>Top Stories</a>
<a href="#" class="side-menu-categories" onclick="createUrlPath('for-you')"><i
class="fas fa-user-alt fa-lg"></i>For you</a>
<a href="#" class="side-menu-categories" onclick="createUrlPath('following')"><i
class="fal fa-star fa-lg"></i>Following</a>
<a href="#" class="side-menu-categories" onclick="createUrlPath('library')"><i
class="fas fa-bookmark fa-lg"></i>Saved news</a>
<hr>
<a href="#" class="side-menu-categories" onclick="createUrlPath('covid-19')"><i
class="fad fa-shield-cross fa-lg"></i>COVID-19</a>
<hr>
<a href="#" class="side-menu-categories" onclick="createUrlPath('world')"><i
class="fad fa-globe-europe fa-lg"></i>World</a>
<a href="#" class="side-menu-categories" onclick="createUrlPath('business')"><i
class="fad fa-building fa-lg"></i>Business</a>
<a href="#" class="side-menu-categories" onclick="createUrlPath('technology')"><i
class="fad fa-microchip fa-lg"></i>Technology</a>
<a href="#" class="side-menu-categories" onclick="createUrlPath('entertainment')"><i
class="fas fa-camera-movie" ></i>Entertainment</a>
<a href="#" class="side-menu-categories" onclick="createUrlPath('sports')"><i
class="fas fa-tennis-ball fa-lg"></i>Sports</a>
<a href="#" class="side-menu-categories" onclick="createUrlPath('health')"><i
class="fas fa-heartbeat fa-lg"></i>Health</a>
<hr>
<div class="language extra-side-menu pointer" id="show-countries-button"
onclick="showSelectCountry()">
<span>Language & Region</span>
<strong id="country-name-side-menu">United States</strong>
<aside class="side-bar absolute grid" id="side-bar">
<div class="flex">
<div class="side-bar-container" id="side-bar-container">
<div>
<div class="side-bar-content" id="side-bar-content">
<div class="sidebar-category" onclick="createUrlPath('headlines')">
<div class="icon"><i class="fal fa-newspaper fa-lg"></i></div>
<div><a href="#">Top Stories</a></div>
</div>
<div class="sidebar-category" onclick="createUrlPath('for-you')">
<div class="icon"><i class="fas fa-user-alt fa-lg"></i></div>
<div><a href="#">For you</a></div>
</div>
<div class="sidebar-category" onclick="createUrlPath('following')">
<div class="icon"><i class="fal fa-star fa-lg"></i></div>
<div><a href="#" class="side-menu-categories">Following</a></div>
</div>
<div class="sidebar-category" onclick="createUrlPath('library')">
<div class="icon"><i class="fas fa-bookmark fa-lg"></i></div>
<div><a href="#" class="side-menu-categories">Saved news</a></div>
</div>
<div class="sidebar-line"><hr></div>
<div class="sidebar-category" onclick="createUrlPath('covid-19')">
<div class="icon"><i class="fad fa-shield-cross fa-lg"></i></div>
<div><a href="#" class="side-menu-categories">COVID-19</a></div>
</div>
<div class="sidebar-line"><hr></div>
<div class="categories">
<div class="sidebar-category" onclick="createUrlPath('world')">
<div class="icon"><i class="fad fa-globe-europe fa-lg"></i></div>
<div><a href="#" class="side-menu-categories">World</a></div>
</div>
<div class="sidebar-category" onclick="createUrlPath('business')">
<div class="icon"><i class="fad fa-building fa-lg"></i></div>
<div><a href="#" class="side-menu-categories">Business</a></div>
</div>
<div class="sidebar-category" onclick="createUrlPath('technology')">
<div class="icon"><i class="fad fa-microchip fa-lg"></i></div>
<div><a href="#" class="side-menu-categories">Technology</a></div>
</div>
<div class="sidebar-category" onclick="createUrlPath('entertainment')">
<div class="icon"><i class="fas fa-camera-movie"></i></div>
<div><a href="#" class="side-menu-categories">Entertainment</a></div>
</div>
<div class="sidebar-category" onclick="createUrlPath('sports')">
<div class="icon"><i class="fas fa-tennis-ball fa-lg"></i></div>
<div><a href="#" class="side-menu-categories">Sports</a></div>
</div>
<div class="sidebar-category" onclick="createUrlPath('health')">
<div class="icon"><i class="fas fa-heartbeat fa-lg"></i></div>
<div><a href="#" class="side-menu-categories">Health</a></div>
</div>
</div>
<div class="sidebar-line"><hr></div>
<div class="other">
<div class="sidebar-category country" id="show-countries-button" onclick="showSelectCountry()">
<div class="sidebar-country-container grid">
<span>Language & Region</span>
<strong id="country-name-side-menu"><?php echo 'United States' ?></strong>
</div>
</div>
<div class="sidebar-category">
<div class="text"><a href="#" class="side-menu-categories" onclick="createUrlPath('sources')">Sources</a></div>
</div>
<div class="sidebar-category">
<div class="text"><a href="#" onclick="createUrlPath('settings')">Settings</a>
</div>
</div>
<div class="sidebar-category">
<div class="text"><a href="#" class="sidebar-help"
onclick="createUrlPath('help')">Help</a></div>
<div><i class="far fa-external-link-alt fa-sm"></i></div>
</div>
</div>
</div>
</div>
<footer>
<div class="about text"><a href="#" onclick="createUrlPath('about')">About</a></div>
<div><span class="flex align-center justify-center" style="color: var(--font-medium);">•</span></div>
<div class="text"><a href="https://newsapi.org/" target="_blank" id="news-api-link">News Api</a> </div>
</footer>
</div>
<a href="#" class="side-menu-categories" onclick="createUrlPath('sources')">Sources</a>
<a href="#" onclick="createUrlPath('settings')">Settings</a>
<a href="#" class="sidebar-help" onclick="createUrlPath('help')">Help<i class="far fa-external-link-alt fa-sm"></i></a>
<footer class="grid">
<div>
<a href="#" onclick="createUrlPath('about')">About</a>
<span class="flex align-center justify-center">•</span>
<a href="https://newsapi.org/" target="_blank" id="news-api-link">News API</a>
</div>
</footer>
</div>
<div class="side-bar-content about-sidebar-content grid fixed" id="about-sidebar-content">
<!-- <a href="#" class="active" onclick="sidebarCategorySelect(this)">About</a>
<a href="#" class="" onclick="sidebarCategorySelect(this)">Terms of service</a> -->
</div>
</aside>
</div>
</aside>

1
headlines.php
View file

@ -4,6 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> -->
<meta name="google-signin-client_id"
content="571327981909-r5sunoo4l6uqducmqm7vjon1af0tmso1.apps.googleusercontent.com">

3
search.php
View file

@ -3,7 +3,8 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="google-signin-client_id"
content="571327981909-r5sunoo4l6uqducmqm7vjon1af0tmso1.apps.googleusercontent.com">