Menu's background size adjusted, Functions name, Logic rellocated out…

…side of JSX
bluewave-labs · Sep 30, 2024 · bcd8b59 · bcd8b59
1 parent ecaab3a
commit bcd8b59
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 38 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/Client/src/Components/Sidebar/DropdownMenu.tsx b/Client/src/Components/Sidebar/DropdownMenu.tsx
@@ -52,7 +52,7 @@ export default function DropdownMenu() {
     setAnchorEl(null);
   };
 
-  function fixName(text: string): string {
+  function removeEmptySpace(text: string): string {
     return text.replace(/\s+/g, "");
   }
 
@@ -62,6 +62,8 @@ export default function DropdownMenu() {
     Logout: LogOut,
   };
 
+  const menu: string[] = ["Profile", "Team", "Log out"];
+
   return (
     <Box>
       <Button
@@ -89,7 +91,7 @@ export default function DropdownMenu() {
       </Button>
 
       <StyledMenu anchorEl={anchorEl} open={open} onClose={handleClose}>
-        {["Profile","Team", "Log out"].map((text) => (
+        {menu.map((text) => (
           <Link href={`${text.toLowerCase()}`} className="no-styling">
             <MenuItem
               onClick={handleClose}
@@ -99,7 +101,7 @@ export default function DropdownMenu() {
               <Image
                 src={
                   text.includes(" ")
-                    ? menuItems[fixName(text)]
+                    ? menuItems[removeEmptySpace(text)]
                     : menuItems[text]
                 }
                 alt={text}

diff --git a/Client/src/Components/Sidebar/Sidebar.tsx b/Client/src/Components/Sidebar/Sidebar.tsx
@@ -24,6 +24,8 @@ export default function Sidebar() {
     Settings: SettingsIcon,
   };
 
+  const menu: string[] = ["Documents", "Contacts", "Settings"];
+
   return (
     <Stack
       justifyContent="space-between"
@@ -33,12 +35,18 @@ export default function Sidebar() {
       <Box>
         <Image src={Title} alt="Title" style={{ margin: "0 8px 16px 8px" }} />
         <List>
-          {["Documents", "Contacts", "Settings"].map((text) => (
+          {menu.map((text) => (
             <ListItem key={text} disablePadding>
-              <Link href={`/${text.toLowerCase()}`} className="no-styling">
+              <Link
+                href={`/${text.toLowerCase()}`}
+                className="no-styling width-area"
+              >
                 <ListItemButton
                   disableRipple
-                  sx={{ px: 1, "&:hover": { backgroundColor: "#f5f9ff" } }}
+                  sx={{
+                    px: 1,
+                    "&:hover": { backgroundColor: "#f5f9ff" },
+                  }}
                 >
                   <ListItemIcon>
                     <Image src={menuItems[text]} alt={text} height={24} />

diff --git a/Client/src/Components/Sidebar/dropdownMenu.css b/Client/src/Components/Sidebar/dropdownMenu.css
@@ -6,3 +6,7 @@
   text-decoration: none;
   color: inherit;
 }
+
+.width-area {
+  width: 100%;
+}
diff --git a/Client/src/app/layout.tsx b/Client/src/app/layout.tsx
@@ -1,42 +1,44 @@
-import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
-import { Container } from '@mui/material';
-import Sidebar from '@/components/sidebar/Sidebar';
-import CssBaseline from '@mui/material/CssBaseline';
-import globalTheme from '@/utils/theme/globalTheme';
-import { ThemeProvider } from '@mui/material/styles';
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import { Container } from "@mui/material";
+import Sidebar from "@/components/sidebar/Sidebar";
+import CssBaseline from "@mui/material/CssBaseline";
+import globalTheme from "@/utils/theme/globalTheme";
+import { ThemeProvider } from "@mui/material/styles";
 
-const inter = Inter({ subsets: ['latin'] });
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-	title: 'Blw-Dataroom',
-	description: 'Share documents safely with your team and customers',
+  title: "Blw-Dataroom",
+  description: "Share documents safely with your team and customers",
 };
 
 interface RootLayoutProps {
-	children: React.ReactNode;
+  children: React.ReactNode;
 }
 
 export default function RootLayout({ children }: RootLayoutProps) {
-	return (
-		<html lang="en">
-			<body className={inter.className}>
-				<ThemeProvider theme={globalTheme}>
-					<CssBaseline />
-					<Container
-						sx={{
-							display: 'flex',
-							backgroundColor: 'white',
-							height: '100vh',
-							pt: 4,
-							pb: 3,
-							gap: 4,
-						}}>
-						<Sidebar />
-						{children}
-					</Container>
-				</ThemeProvider>
-			</body>
-		</html>
-	);
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <ThemeProvider theme={globalTheme}>
+          <CssBaseline />
+          <Container
+            sx={{
+              display: "flex",
+              backgroundColor: "white",
+              height: "100vh",
+
+              pt: 4,
+              pb: 3,
+              gap: 4,
+            }}
+          >
+            <Sidebar />
+            <>{children}</>
+          </Container>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
 }