Addresses #29, #28, #26, #20, #19

components/footer.tsx

@@ -8,7 +8,7 @@ const PageFooter = () => {
      );
 }
 
-const NavMenuFooter = () => {
+export const NavMenuFooter = () => {
   return ( 
     <MobileFooter>
         Built using Next.js

components/navbar.tsx

@@ -1,9 +1,10 @@
 import { usePathname } from 'next/navigation'
-import { NavBar, NavBarMobile, NavIndicator, NavIndicators, NavLink, NavSideMenu, NavSideMenuButton, NavSideMenuPanel, NavSideMenuButtonPlaceholder, NavWrap, NavWrapMobile, NavWrapMobileGhost, NavSideMenuGhost } from './styles/navbar';
+import { NavBarMobile, NavIndicator, NavIndicators , NavSideMenu, NavSideMenuButton, NavSideMenuPanel, NavLinkMobile, NavWrapMobile, NavWrapMobileGhost, NavSideMenuGhost } from './styles/navbar/mobile';
+import { NavBar, NavLink, NavWrap } from './styles/navbar/desktop';
 import { StyleSelector, StyleSelectorPlaceholder } from './themeselector';
 import Links from '../public/data/navbar.json';
 import { useState } from 'react';
-import NavMenuFooter from './footer';
+import { NavMenuFooter } from './footer';
 
 const PageNavbar = ({ mobile }: { mobile: number }) => {
   const path = usePathname();
@@ -12,48 +13,47 @@ const PageNavbar = ({ mobile }: { mobile: number }) => {
   function handleSidebar(event: any) {
     if (!event.currentTarget.contains(event.relatedTarget)) {
       setSideBarActive(false);
-      console.log(event.relatedTarget); // DEBUG
     }
-    else { console.log("nah") } // DEBUG
   }
 
   let navbar: JSX.Element;
   if (mobile) {
     navbar = (
       <>
-        <NavSideMenu onBlur={(event) => handleSidebar(event)} active={+sideBarActive}>
+        <NavSideMenu tabIndex={-1} onBlur={(event) => handleSidebar(event)} active={+sideBarActive}>
+          <NavSideMenuButton onClick={() => setSideBarActive(sideBarActive => !sideBarActive)} active={+sideBarActive}>Menu</NavSideMenuButton>
+          <NavSideMenuPanel active={+sideBarActive}>
             <NavBarMobile>
               {Links.links.map((item) => (
-              <NavLink active={path === item.href ? +true : +false} key={item.name} href={item.href}>
+                <NavLinkMobile active={path === item.href ? +true : +false} key={item.name} href={item.href}>
                   {item.name}
-              </NavLink>
+                </NavLinkMobile>
               ))}
-            <NavLink key="Mastodon_Verify" rel="me" href="https://mastodon.neshweb.net/@neshura">
+              <NavLinkMobile key="Mastodon_Verify" rel="me" href="https://mastodon.neshweb.net/@neshura">
                 Mastodon
-            </NavLink>
+              </NavLinkMobile>
             </NavBarMobile>
-          <NavSideMenuGhost/>
+            <NavSideMenuGhost />
-          <StyleSelector />
+            <StyleSelector mobile={mobile}/>
-          <NavSideMenuGhost/>
+            <NavSideMenuGhost num={2}/>
             <NavMenuFooter />
+          </NavSideMenuPanel>
         </NavSideMenu>
         <NavWrapMobile>
-          <NavSideMenuButton onClick={() => setSideBarActive(!sideBarActive)} active={+sideBarActive}>Menu</NavSideMenuButton>
           <NavIndicators>
             {Links.links.map((item) => (
               <NavIndicator active={path === item.href ? +true : +false} key={item.name} href={item.href} />
             ))}
           </NavIndicators>
-          <NavSideMenuButtonPlaceholder />
         </NavWrapMobile>
-        <NavWrapMobileGhost/>
+        <NavWrapMobileGhost />
       </>
     );
   }
   else {
     navbar = (
       <NavWrap>
-        <StyleSelector></StyleSelector>
+        <StyleSelector mobile={mobile}/>
         <NavBar>
           {Links.links.map((item) => (
             <NavLink active={path === item.href ? +true : +false} key={item.name} href={item.href}>
@@ -64,7 +64,7 @@ const PageNavbar = ({ mobile }: { mobile: number }) => {
             Mastodon
           </NavLink>
         </NavBar>
-        <StyleSelectorPlaceholder></StyleSelectorPlaceholder>
+        <StyleSelectorPlaceholder />
       </NavWrap>
     );
   }

components/styles/content.tsx

@@ -24,7 +24,7 @@ export const PageTitle = styled.h1`
 export const PageDescription = styled.p`
   background-color: ${({ theme }) => theme.colors.background ? theme.colors.background : ""};
   padding: 0.25rem 0.5rem;
-  margin: 4rem 0;
+  margin: 4rem 2rem;
   line-height: 1.5;
   font-size: 1.5rem;
   text-align: center;

components/styles/generic.tsx

@@ -45,6 +45,7 @@ export const Footer = styled.footer`
 `
 
 export const MobileFooter = styled(Footer)`
-  position: absolute;
+  white-space: nowrap;
-  bottom: 100%;
+  flex: 0.5;
+  width: 100%;
 `

components/styles/navbar.tsx

@@ -1,148 +0,0 @@
-import styled from 'styled-components'
-import Link from 'next/link';
-
-interface ActivePropType {
-  active?: number;
-}
-
-export const NavWrap = styled.div`
-  display: flex;
-  flex-wrap: nowrap;
-  justify-content: center;
-  align-items: center;
-  border-bottom: 1px solid ${({ theme }) => theme.colors.primary};
-`
-
-
-export const NavWrapMobile = styled(NavWrap)`
-  width: 100%;
-  flex-direction: row;
-  position: fixed;
-  z-index: 100;
-`
-
-export const NavWrapMobileGhost = styled.div`
-  position: relative;
-  width: 100%;
-  height: 57px;
-`
-
-export const NavSideMenu = styled.div <ActivePropType>`
-  position: fixed;
-  top: 0%; left: 0%; right: 0%; bottom: 0%;
-  max-width: ${ props => props.active ? "60%" : "0%"};
-  display: flex;
-  justify-content: space-between;
-  flex-direction: column;
-  align-items: center;
-  height: 100%;
-  z-index: 100;
-
-  background-color: ${({ theme }) => theme.colors.background};
-  visibility: ${ props => props.active ? "visible" : "hidden"};
-  width: ${ props => props.active ? "360px" : "0%"};
-  transition-delay: ${ props => props.active ? "0s, 0s" : "0s, 0.3s"};
-`
-
-export const NavSideMenuPanel = styled.div <ActivePropType>`
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-`
-
-export const NavSideMenuButton = styled.button <ActivePropType>`
-  z-index: 100;
-  margin: 16px;
-  color: ${ props => props.active ? ({ theme }) => theme.colors.background : ({ theme }) => theme.colors.primary };
-  background-color: ${ props => props.active ? ({ theme }) => theme.colors.secondary : ({ theme }) => theme.colors.background };
-`
-
-export const NavSideMenuButtonPlaceholder = styled.div`
-  width: 48px;
-  margin: 16px;
-`
-
-export const NavSideMenuGhost = styled.div`
-  
-`
-
-export const NavBar = styled.nav`
-  margin-right: 1%;
-  display: flex;
-  flex: 1;
-  padding: 1rem 0;
-  flex-wrap: nowrap;
-  justify-content: center;
-  align-items: center;
-`
-
-export const NavBarMobile = styled(NavBar)`
-  flex-direction: column;
-`
-
-export const NavLink = styled(Link) <ActivePropType>`
-  color: ${props => props.active ?
-    ({ theme }) => theme.invertButtons ?
-      theme.colors.text ? theme.colors.text : theme.colors.secondary : theme.colors.secondary :
-    ({ theme }) => theme.colors.primary};
-  
-  background-color: ${props => props.active ?
-    ({ theme }) => theme.invertButtons ?
-      theme.colors.secondary : theme.colors.background :
-    ({ theme }) => theme.colors.background};
-
-  padding: 2px 6px;
-  border: 2px solid;
-
-  margin: 0.2rem;
-  border-radius: 5px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transition: all 0.1s ease;
-
-  &:hover {
-    color: ${({ theme }) => theme.invertButtons ?
-    theme.colors.text ? theme.colors.text : theme.colors.primary :
-    theme.colors.secondary};
-
-    background-color: ${({ theme }) => theme.invertButtons ?
-    theme.colors.secondary :
-    theme.colors.background};
-  }
-`
-
-export const NavIndicators = styled.nav`
-  width: 100%;
-  display: flex;
-  flex: 1;
-  padding: 1rem 0;
-  flex-wrap: nowrap;
-  justify-content: center;
-  align-items: center;
-`
-
-export const NavIndicator = styled(Link) <ActivePropType>`
-  margin: 0.2rem;
-  border-radius: 50%;
-  aspect-ratio: 1;
-  width: 10px;
-  border: 1px solid ${({ theme }) => theme.colors.primary};
-
-  background-color: ${props => props.active ?
-    ({ theme }) => theme.invertButtons ?
-      theme.colors.secondary : theme.colors.background :
-    ({ theme }) => theme.colors.background};
-
-  &:hover {
-    color: ${({ theme }) => theme.invertButtons ?
-    theme.colors.text ? theme.colors.text : theme.colors.primary :
-    theme.colors.secondary};
-
-    background-color: ${({ theme }) => theme.invertButtons ?
-    theme.colors.secondary :
-    theme.colors.background};
-  }
-`

components/styles/navbar/desktop.tsx

@@ -0,0 +1,54 @@
+import styled from 'styled-components'
+import Link from 'next/link';
+
+interface ActivePropType {
+  active?: number;
+}
+
+export const NavWrap = styled.div`
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.primary};
+`
+
+export const NavBar = styled.nav`
+  margin-right: 1%;
+  display: flex;
+  flex: 1;
+  padding: 1rem 0;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+`
+
+export const NavLink = styled(Link) <ActivePropType>`
+  color: ${props => props.active ?
+    ({ theme }) => theme.invertButtons ?
+      theme.colors.text ? theme.colors.text : theme.colors.secondary : theme.colors.secondary :
+    ({ theme }) => theme.colors.primary};
+  
+  background-color: ${props => props.active ?
+    ({ theme }) => theme.invertButtons ?
+      theme.colors.secondary : theme.colors.background :
+    ({ theme }) => theme.colors.background};
+
+  padding: 2px 6px;
+  border: 2px solid;
+
+  margin: 0.2rem;
+  border-radius: 5px;
+  display: flex;
+  transition: all 0.1s ease;
+
+  &:hover {
+    color: ${({ theme }) => theme.invertButtons ?
+    theme.colors.text ? theme.colors.text : theme.colors.primary :
+    theme.colors.secondary};
+
+    background-color: ${({ theme }) => theme.invertButtons ?
+    theme.colors.secondary :
+    theme.colors.background};
+  }
+`

components/styles/navbar/mobile.tsx

@@ -0,0 +1,247 @@
+import styled from 'styled-components'
+import Link from 'next/link';
+import { NavBar, NavLink, NavWrap } from './desktop';
+
+interface ActivePropType {
+  active?: number;
+}
+
+interface MultipliesPropType {
+  num?: number;
+}
+
+export const NavWrapMobile = styled(NavWrap)`
+  width: 100%;
+  flex-direction: row;
+  position: fixed;
+  z-index: 50;
+`
+
+export const NavWrapMobileGhost = styled.div`
+  position: relative;
+  width: 100%;
+  height: 50px;
+`
+
+export const NavSideMenu = styled.div <ActivePropType>`
+  position: fixed;
+  top: 0%; left: 0%; right: 0%; bottom: 0%;
+  max-width: ${props => props.active ? "240px" : "0px"};
+  max-height: ${props => props.active ? "100%" : "50px"};
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  height: 100%;
+  z-index: 100;
+  border-right: ${ props => ({ theme }) => {
+    let ret: string;
+    if(props.active) {
+      ret = "1px solid " + theme.colors.primary;
+    }
+    else {
+      ret = "0px solid";
+    }
+    return ret;
+  }};
+
+  background-color: ${ props => ({ theme }) => {
+    let ret: string;
+    if (props.active) {
+      ret = theme.colors.background;
+    }
+    else {
+      ret = "";
+    }
+    return ret;
+  }};
+
+  overflow-x: hidden;
+  transition-property: max-width, max-height, border-right, background-color;
+  transition-timing-function: ease-in-out;
+  transition-duration: 0.15s, 0s, 0s, 0s;
+  transition-delay: ${props => props.active ? "0s, 0s, 0s, 0s" : "0s, 0.15s, 0.15s, 0.15s"};
+`
+
+export const NavSideMenuPanel = styled.div <ActivePropType>`
+  height: 100%;
+  width: 240px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: left;
+`
+
+export const NavSideMenuButton = styled.button <ActivePropType>`
+  position: ${ props => props.active ? "absolute" : "fixed"};
+  z-index: 200;
+  left: ${ props => props.active ? "165px" : "0px"};
+  
+  transition-property: left, color, background-color, border-color;
+  transition-timing-function: ease-in-out;
+  transition-duration: 0.135s, 0.15s;
+  transition-delay: ${props => props.active ? "0.03s, 0s" : "0s, 0s"};
+
+  align-self: flex-end;
+  cursor: pointer;
+  margin: 12px;
+  color: ${props => ({ theme }) => {
+    let ret: string;
+    if (props.active) {
+      if (theme.invertButtons) {
+        ret = theme.colors.text ? theme.colors.text : theme.colors.secondary;
+      }
+      else {
+        ret = theme.colors.secondary;
+      }
+    }
+    else {
+      ret = theme.colors.primary;
+    }
+    return ret;
+  }};
+  background-color: ${props => ({ theme }) => {
+    let ret: string;
+    if (props.active) {
+      if (theme.invertButtons) {
+        ret = theme.colors.secondary;
+      }
+      else {
+        ret = theme.colors.background;
+      }
+    }
+    else {
+      ret = theme.colors.background;
+    }
+    return ret;
+  }};
+
+  border: 2px solid;
+  border-radius: 5px;
+  border-color: ${props => ({ theme }) => {
+    let ret: string;
+    if (props.active) {
+      if (theme.invertButtons) {
+        ret = theme.colors.text ? theme.colors.text : theme.colors.secondary;
+      }
+      else {
+        ret = theme.colors.secondary;
+      }
+    }
+    else {
+      ret = theme.colors.primary;
+    }
+    return ret;
+  }};
+
+  &:hover {
+    color: ${({ theme }) => {
+    let ret: string;
+    if (theme.invertButtons) {
+      ret = theme.colors.text ? theme.colors.text : theme.colors.primary;
+    }
+    else {
+      ret = theme.colors.secondary;
+    }
+    return ret;
+  }};
+
+    background-color: ${({ theme }) => {
+    let ret: string;
+    if (theme.invertButtons) {
+      ret = theme.colors.secondary;
+    }
+    else {
+      ret = theme.colors.background;
+    }
+    return ret;
+  }};
+
+  border-color: ${({ theme }) => {
+    let ret: string;
+      if (theme.invertButtons) {
+        ret = theme.colors.text ? theme.colors.text : theme.colors.secondary;
+      }
+      else {
+        ret = theme.colors.secondary;
+      }
+    return ret;
+  }};
+  }
+`
+
+export const NavSideMenuGhost = styled.div <MultipliesPropType>`
+  flex: ${ props => props.num ? props.num * 2 : 2 };
+`
+
+export const NavBarMobile = styled(NavBar)`
+  margin-top: 56px;
+  flex-direction: column;
+  align-items: flex-start;
+`
+
+export const NavLinkMobile = styled(NavLink)`
+  display: block;
+  margin-left: 1rem;
+  margin-top: 1rem;
+  padding: 0.5rem;
+  border: none;
+  border-top: 2px solid;
+  width: 80%;
+  text-align: center;
+
+  color: ${props => ({ theme }) => props.active ? theme.colors.secondary : theme.colors.primary};
+  background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background};
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.secondary };
+    background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background};
+  }
+`
+
+export const NavIndicators = styled.nav`
+  background-color: ${({ theme }) => theme.colors.background};
+  background-image: ${({ theme }) => theme.backgroundImage ? "url(" + theme.backgroundImage + ")" : ""};
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-size: cover;
+  width: 100%;
+  display: flex;
+  flex: 1;
+  padding: 1rem 0;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+`
+
+export const NavIndicator = styled(Link) <ActivePropType>`
+  margin: 0.2rem;
+  border-radius: 50%;
+  aspect-ratio: 1;
+  width: 10px;
+  border: 1px solid; 
+  border-color: ${ props => ({ theme }) => props.active ? 
+    theme.invertButtons ? theme.colors.secondary : theme.colors.primary :
+    theme.colors.primary
+  };
+
+  background-color: ${props => ({ theme }) => props.active ?
+    theme.invertButtons ? theme.colors.secondary : theme.colors.primary :
+    theme.colors.background
+  };
+
+  &:hover {
+    border-color: ${ props => ({ theme }) =>
+      theme.invertButtons ? theme.colors.secondary : theme.colors.primary
+    };
+
+    color: ${({ theme }) => theme.invertButtons ?
+      theme.invertButtons ? theme.colors.secondary : theme.colors.primary :
+      theme.colors.primary
+    };
+
+    background-color: ${({ theme }) => theme.invertButtons ?
+      theme.colors.secondary :
+      theme.colors.primary
+    };
+  }
+`

components/styles/themedropdown/mobile.tsx

@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+import { ThemeDropDown, ThemeDropDownButton, ThemeDropDownOption, ThemeDropDownOptions } from './desktop';
+
+export const ThemeDropDownMobile = styled(ThemeDropDown)`
+  width: 80%;
+  margin-left: 1rem;
+`; 
+
+export const ThemeDropDownButtonMobile = styled(ThemeDropDownButton)`
+  width: 100%;
+  padding: 0.5rem;
+  border: none;
+  border-top: 2px solid;
+  border-left: ${ props => props.show ? "2px solid" : "0px solid"};
+  border-right: ${ props => props.show ? "2px solid" : "0px solid"};
+
+  color: ${props => ({ theme }) => props.focus ? theme.colors.secondary : theme.colors.primary};
+  background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background};
+
+  &:focus,:hover  {
+    color: ${({ theme }) => theme.colors.secondary};
+
+    background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background};
+  }
+
+  transition-property: color, border-bottom-left-radius, border-bottom-right-radius, background-color, border-left, border-right;
+  transition-timing-function: ease;
+  transition-duration: 0.15s;
+  transition-delay: 0s, ${ props => props.show ? "0s" : "0.6s, 0.6s, 0s, 0.6s, 0.6s" };
+`;
+
+export const ThemeDropDownOptionsMobile = styled(ThemeDropDownOptions)`
+  background-image: unset;
+  background-color: ${({ theme }) => theme.colors.background};
+  border: 2px solid ${props => ({ theme }) => props.focus ? theme.colors.secondary : theme.colors.primary};
+  border-top: 0;
+  max-height: ${ props => props.show ? "100%" : "0%"};
+  position: relative;
+  width: 100%;
+`;
+
+export const ThemeDropDownOptionMobile = styled(ThemeDropDownOption)`
+  text-align: left;
+  margin: 0.5rem;
+  padding: 0rem 0.5rem;
+  width: 80%;
+  border-left: 2px solid;
+  border-radius: 5px;
+`;

components/themeselector.tsx

@@ -2,10 +2,11 @@ import { useUpdateTheme } from "../pages/_app";
 import { useContext, useState } from 'react';
 import { ThemeContext, DefaultTheme } from "styled-components";
 import { darkTheme, lightTheme } from './themes';
-import { ThemeDropDown, ThemeDropDownButton, ThemeDropDownOption, ThemeDropDownOptions } from "./styles/themedropdown";
+import { ThemeDropDown, ThemeDropDownButton, ThemeDropDownOption, ThemeDropDownOptions } from "./styles/themedropdown/desktop";
+import { ThemeDropDownMobile, ThemeDropDownButtonMobile, ThemeDropDownOptionMobile, ThemeDropDownOptionsMobile } from "./styles/themedropdown/mobile";
 import Themes from '../public/data/themes.json';
 
-export const StyleSelector = () => {
+export const StyleSelector = ({ mobile }: { mobile: number }) => {
   const themes: DefaultTheme[] = Themes.themes;
   const updateTheme = useUpdateTheme();
   const currentTheme = useContext(ThemeContext);
@@ -34,7 +35,7 @@ export const StyleSelector = () => {
     } 
   }
 
-  const [visible, setVisible] = useState(false);
+  const [visible, setVisible] = useState(true); //DEBUG set to false
   const [buttonFocus, setButtonFocus] = useState(visible);
 
   function  handleBlur(event:any) {
@@ -44,7 +45,25 @@ export const StyleSelector = () => {
     }
   }
 
-  return (
+  let themeselector: JSX.Element;
+  if(mobile) {
+    themeselector = (
+      <ThemeDropDownMobile onBlur={(event) => handleBlur(event)}>
+        <ThemeDropDownButtonMobile focus={+buttonFocus} show={+visible} onFocus={() => setButtonFocus(true)} onClick={() => setVisible(visible => !visible)}>
+          {selectedTheme.themeName}
+        </ThemeDropDownButtonMobile>
+        <ThemeDropDownOptionsMobile focus={+buttonFocus} id="themesDropdown" show={+visible}>
+          {themes.map((theme) => (
+            <ThemeDropDownOptionMobile active={theme.themeId === selectedTheme.themeId ? 1 : 0} key={theme.themeId} onClick={() => updateThemeWithStorage(theme)}>
+              {theme.themeName}
+            </ThemeDropDownOptionMobile>
+          ))}
+        </ThemeDropDownOptionsMobile>
+      </ThemeDropDownMobile>
+    );
+  } 
+  else {
+    themeselector = (
       <ThemeDropDown onBlur={(event) => handleBlur(event)}>
         <ThemeDropDownButton focus={+buttonFocus} show={+visible} onFocus={() => setButtonFocus(true)} onClick={() => setVisible(visible => !visible)}>{selectedTheme.themeName}
         </ThemeDropDownButton>
@@ -57,6 +76,8 @@ export const StyleSelector = () => {
         </ThemeDropDownOptions>
       </ThemeDropDown>
     );
+  }
+  return themeselector;
 }
 
 export const StyleSelectorPlaceholder = () => {