From 0c4b686625d100c4657d750639404647d084d4a8 Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Sat, 28 May 2022 12:41:21 +0530
Subject: [PATCH] restructure navbar

---
 src/components/Navbar/SelectionBar.tsx                     | 6 ++++++
 src/components/{Navbar.tsx => Navbar/base.tsx}             | 5 +++--
 src/components/pages/gallery/SelectedFileOptions/index.tsx | 2 +-
 src/pages/_app.tsx                                         | 2 +-
 4 files changed, 11 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Navbar/SelectionBar.tsx
 rename src/components/{Navbar.tsx => Navbar/base.tsx} (80%)

diff --git a/src/components/Navbar/SelectionBar.tsx b/src/components/Navbar/SelectionBar.tsx
new file mode 100644
index 000000000..cd8ebdd94
--- /dev/null
+++ b/src/components/Navbar/SelectionBar.tsx
@@ -0,0 +1,6 @@
+import NavbarBase from 'components/Navbar/base';
+import styled from 'styled-components';
+
+export const SelectionBar = styled(NavbarBase)`
+    position: fixed;
+`;
diff --git a/src/components/Navbar.tsx b/src/components/Navbar/base.tsx
similarity index 80%
rename from src/components/Navbar.tsx
rename to src/components/Navbar/base.tsx
index 605296715..97689b63e 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar/base.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 
-const Navbar = styled.div`
+const NavbarBase = styled.div`
+    width: 100%;
     padding: 0 20px;
     font-size: 20px;
     line-height: 2rem;
@@ -15,4 +16,4 @@ const Navbar = styled.div`
     z-index: 1;
 `;
 
-export default Navbar;
+export default NavbarBase;
diff --git a/src/components/pages/gallery/SelectedFileOptions/index.tsx b/src/components/pages/gallery/SelectedFileOptions/index.tsx
index 473f71a06..90c94a32d 100644
--- a/src/components/pages/gallery/SelectedFileOptions/index.tsx
+++ b/src/components/pages/gallery/SelectedFileOptions/index.tsx
@@ -1,4 +1,4 @@
-import Navbar from 'components/Navbar';
+import Navbar from 'components/Navbar/base';
 import styled from 'styled-components';
 
 export const SelectionBar = styled(Navbar)`
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 76eb53051..213b678ed 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,6 +1,6 @@
 import React, { createContext, useEffect, useRef, useState } from 'react';
 import styled, { ThemeProvider as SThemeProvider } from 'styled-components';
-import Navbar from 'components/Navbar';
+import Navbar from 'components/Navbar/base';
 import constants from 'utils/strings/constants';
 import { useRouter } from 'next/router';
 import VerticallyCentered from 'components/Container';