diff --git a/src/layout/index.tsx b/src/layout/index.tsx
index d4796dd..257fa74 100644
--- a/src/layout/index.tsx
+++ b/src/layout/index.tsx
@@ -1,6 +1,7 @@
import { Outlet } from 'react-router-dom'
import { Footer } from './footer'
import { Header } from './header'
+import { SocialNav } from './socialNav'
export const Layout = () => {
return (
@@ -8,6 +9,7 @@ export const Layout = () => {
+
>
)
}
diff --git a/src/layout/socialNav.tsx b/src/layout/socialNav.tsx
new file mode 100644
index 0000000..179d0bf
--- /dev/null
+++ b/src/layout/socialNav.tsx
@@ -0,0 +1,115 @@
+import { useState } from 'react'
+import { Link } from 'react-router-dom'
+import { appRoutes, getProfilePageRoute } from 'routes'
+import 'styles/socialNav.css'
+
+export const SocialNav = () => {
+ const [isCollapsed, setIsCollapsed] = useState(true)
+
+ const toggleNav = () => {
+ setIsCollapsed(!isCollapsed)
+ }
+
+ return (
+
+
+ {!isCollapsed && (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+ )
+}
diff --git a/src/pages/search.tsx b/src/pages/search.tsx
new file mode 100644
index 0000000..ea66cd8
--- /dev/null
+++ b/src/pages/search.tsx
@@ -0,0 +1,3 @@
+export const SearchPage = () => {
+ return WIP
+}
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index d52735b..3cf4f53 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,3 +1,4 @@
+import { SearchPage } from 'pages/search'
import { AboutPage } from '../pages/about'
import { BlogsPage } from '../pages/blogs'
import { GamesPage } from '../pages/games'
@@ -20,6 +21,7 @@ export const appRoutes = {
submitMod: '/submit-mod',
editMod: '/edit-mod/:naddr',
write: '/write',
+ search: '/search',
settingsProfile: '/settings-profile',
settingsRelays: '/settings-relays',
settingsPreferences: '/settings-preferences',
@@ -77,6 +79,10 @@ export const routes = [
path: appRoutes.write,
element:
},
+ {
+ path: appRoutes.search,
+ element:
+ },
{
path: appRoutes.settingsProfile,
element:
diff --git a/src/styles/socialNav.css b/src/styles/socialNav.css
new file mode 100644
index 0000000..510e0a9
--- /dev/null
+++ b/src/styles/socialNav.css
@@ -0,0 +1,98 @@
+.socialNav {
+ transition: ease 0.4s;
+ position: fixed;
+ bottom: 0;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 0 10px;
+ right: 50%;
+ transform: translateX(50%);
+}
+
+.socialNavInside {
+ width: 100%;
+ padding: 10px;
+ border-radius: 15px;
+ Background: linear-gradient(to top right, rgba(27,27,27,0.9), rgba(35,35,35,0.9), rgba(27,27,27,0.9));
+ box-shadow: 0 0 8px rgba(0,0,0,0.2);
+ backdrop-filter: blur(5px);
+ display: flex;
+ flex-direction: row;
+ grid-gap: 5px;
+ border: solid 2px rgba(255,255,255,0.05);
+ overflow-x: auto;
+ max-width: 80vw;
+}
+
+.socialNavInside::-webkit-scrollbar {
+ display: none;
+}
+
+.btnMain.socialNavInsideBtn {
+ transition: ease 0.4s;
+ padding: 0 15px;
+ font-size: 24px;
+ height: 45px;
+ width: 55px;
+ border-radius: 10px;
+ Background: linear-gradient(to top right, rgba(50,50,50,0), rgba(55,55,55,0), rgba(50,50,50,0));
+ color: rgba(255,255,255,0.25);
+}
+
+.btnMain.socialNavInsideBtn:hover {
+ transition: ease 0.4s;
+ background: #434343;
+}
+
+.btnMain.socialNavInsideBtn.socialNavInsideBtnActive {
+ Background: #434343;
+ box-shadow: 0 0 8px 0 rgb(0,0,0,0.1);
+ color: rgba(255,255,255,0.75);
+}
+
+.socialNavInsideWrapper {
+ margin: 10px 0 15px 0;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ grid-gap: 5px;
+}
+
+.socialNavCollapse {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ Background: linear-gradient(to top right, rgba(27,27,27,0.75), rgba(35,35,35,0.75), rgba(27,27,27,0.75));
+ box-shadow: 0 0 8px rgba(0,0,0,0.2);
+ padding: 15px 5px;
+ border-radius: 5px;
+ border: solid 1px rgba(255,255,255,0.05);
+ backdrop-filter: blur(5px);
+ cursor: pointer;
+ transform: scale(1);
+ color: rgba(255,255,255,0.75);
+}
+
+.socialNavCollapse:hover {
+ Background: linear-gradient(rgba(255,255,255,0.01), rgba(255,255,255,0.01)), linear-gradient(to right top, rgba(27,27,27,0.75), rgba(35,35,35,0.75), rgba(27,27,27,0.75));
+ color: rgb(255,255,255);
+}
+
+.socialNavCollapseIcon {
+ transition: ease 0.4s;
+}
+
+.btnMain.socialNavInsideBtn::before {
+ background: linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.05)), linear-gradient(to top right, #262626, #292929, #262626), linear-gradient(to top right, #262626, #292929, #262626);
+ opacity: 0;
+}
+
+.btnMain.socialNavInsideBtn:hover::before {
+ opacity: 1;
+}
+