onTouch mobile bubble sidemenu

.gitignore

@@ -10,6 +10,7 @@
 
 # next.js
 /.next/
+/_next/
 /out/
 !public/
 

_next

@@ -0,0 +1 @@
+.next

components/HomeHeroBubble.tsx

@@ -1,9 +1,12 @@
 import classNames from 'classnames';
 import { useContext } from 'react';
+import { useDispatch } from 'react-redux';
 import { ScreenContext } from '../contexts/screen';
+import { expandSideMenu } from '../state/navigation';
 
 export function HomeHeroBubble() {
   const { isMobile, isTablet, isHuge } = useContext(ScreenContext);
+  const dispatch = useDispatch();
 
   return (
     <div
@@ -15,6 +18,7 @@ export function HomeHeroBubble() {
             ? 'translateY(-40vh)'
             : 'translateY(-50vh)',
       }}
+      onClick={() => dispatch(expandSideMenu())}
       className="absolute bottom-0 z-40 px-10 duration-300"
     >
       <div

components/cards/ArticleCardFeature.tsx

@@ -44,7 +44,7 @@ export function ArticleCardFeature(props: IPost) {
 
       <div
         style={{ marginTop: isMobile || isTablet ? '1rem' : '0' }}
-        className="flex flex-col justify-between w-full tablet:w-5/12"
+        className="flex flex-col justify-between w-full text-primary tablet:w-5/12"
       >
         <div className="flex flex-col space-y-3">
           <Link href={href} as={as}>

components/layout/index.tsx

@@ -30,7 +30,7 @@ export default function Layout({ children }: Props) {
   return (
     <div
       style={{ height: '100vh', width: '100%' }}
-      className="relative flex flex-col justify-between bg-alt"
+      className="relative flex flex-col justify-between bg-alt text-primary"
     >
       <Header />
 

components/navigation/DesktopHeader.tsx

@@ -20,7 +20,7 @@ export function DesktopHeader() {
         zIndex: UI.Z_INDEX_HEADER,
       }}
       className={classNames(
-        'w-full overflow-hidden bg-alt flex items-center border-b border-primary',
+        'w-full overflow-hidden bg-alt text-primary flex items-center border-b border-primary',
       )}
     >
       <div className="flex items-center w-full h-full px-6">
@@ -42,6 +42,7 @@ export function DesktopHeader() {
             {NAVIGATION.MENU_ITEMS.filter(item => !item.mobileMenuOnly).map(
               item => {
                 const link = (
+                  // eslint-disable-next-line react/jsx-no-target-blank
                   <a
                     className={classNames(
                       'uppercase whitespace-no-wrap cursor-pointer',
@@ -49,6 +50,7 @@ export function DesktopHeader() {
                         ? 'text-xs hover:underline'
                         : 'duration-300 text-base font-bold py-1 px-2 hover:bg-primary rounded hover:bg-opacity-10',
                     )}
+                    href={item.external ? item.href : undefined}
                     target={item.newTab ? '_blank' : undefined}
                     rel={item.newTab ? 'noreferrer' : undefined}
                   >

components/navigation/SideMenuInner.tsx

@@ -55,7 +55,7 @@ export function SideMenuInner() {
           {!isDesktop && (
             <div
               className={classNames(
-                'flex flex-col pt-8 pb-2 font-medium uppercase font-prompt',
+                'flex flex-col pt-8 font-medium uppercase font-prompt',
                 isDesktop ? 'text-xs' : 'text-base',
               )}
             >
@@ -71,7 +71,7 @@ export function SideMenuInner() {
             </div>
           )}
 
-          <div className="flex pb-6 space-x-3 mobile:-mx-6">
+          <div className="flex pt-3 pb-6 space-x-3 mobile:-mx-6">
             <a
               href="https://t.me/Oxen_Community"
               target="_blank"

components/navigation/SideMenuSideBar.tsx

@@ -54,7 +54,7 @@ export function SideMenuSideBar({ mode }: Props) {
       }}
       className={classNames(
         'flex flex-col justify-between w-12 text-2xl items-center h-full bg-blue-300 px-4 py-6 border-l border-black select-none',
-        mode === SideBarMode.LABEL && 'border-r border-b',
+        mode === SideBarMode.LABEL && 'border-r',
         mode === SideBarMode.MENU && !expanded && 'border-r',
       )}
     >

package.json

@@ -5,9 +5,8 @@
   "scripts": {
     "now": "npm run now",
     "dev": "NODE_ENV=development next dev",
-    "dev:https": "NODE_ENV=development node server.js",
     "build": "next build",
-    "start": "next start",
+    "start": "npm run build && next start",
     "staging": "func() { git add . && git commit -m \"$1\" && git push -u origin staging; }; func",
     "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix",
     "lint:fix": "npm run lint -- --fix"

pages/[page].tsx

@@ -127,7 +127,7 @@ function Roadmap() {
         </div>
       </div>
 
-      <div className="flex flex-col px-6 space-y-10">
+      <div className="flex flex-col px-6 pb-6 space-y-10">
         <img
           style={{ maxHeight: '90%' }}
           src={'img/session-roadmap.png'}

server.js

@@ -1,23 +0,0 @@
-const { createServer } = require('https');
-const { parse } = require('url');
-const next = require('next');
-const fs = require('graceful-fs');
-
-const dev = process.env.NODE_ENV !== 'production';
-const app = next({ dev });
-const handle = app.getRequestHandler();
-
-const httpsOptions = dev && {
-  key: fs.readFileSync('./certificates/localhost.key'),
-  cert: fs.readFileSync('./certificates/localhost.crt'),
-};
-
-app.prepare().then(() => {
-  createServer(httpsOptions, (req, res) => {
-    const parsedUrl = parse(req.url, true);
-    handle(req, res, parsedUrl);
-  }).listen(3000, err => {
-    if (err) throw err;
-    console.log('🐙 Ready on https://localhost:3000');
-  });
-});